最近不清楚是更新了HBuilder的版本问题，还是更新了android版本的问题，重新在本地发布apk后，进行图片下载。发现读取的时候，文件名读取不到，后面在模拟器中，测试后，发现文件名都变成GetUrl的文件，之后看了下官方文档。怀疑是未指定路径导致的。直接上代码：
旧代码：
plus.io.resolveLocalFileSystemURL(
'_downloads/'+item.FileName,
function(entry){
entry.remove(function(entry) {
var dtask = plus.downloader.createDownload(item.Path, {retry:1}**, function(d, status) {
if (status == 200) { // 下载成功
console.log("下载成功："+item.Path)
} else { //下载失败
console.log("下载失败："+item.Path)
}
});
dtask.start();
}, function(e) {
var dtask = plus.downloader.createDownload(item.Path, {retry:1}**, function(d, status) {
if (status == 200) { // 下载成功
console.log("下载成功2："+item.Path)
} else { //下载失败
console.log("下载失败2："+item.Path)
}
});
dtask.start();
});
},
function(e){
var dtask = plus.downloader.createDownload(item.Path, {retry:1}**, function(d, status) {
if (status == 200) { // 下载成功
console.log("下载成功3："+item.Path)
} else { //下载失败
console.log("下载失败3："+item.Path)
}
});
dtask.start();
}
);

新代码：
var dtask = plus.downloader.createDownload(item.Path, {retry:1,filename:'_downloads/'+item.FileName}, function(d, status) {
if (status == 200) { // 下载成功
console.log("下载成功2："+item.Path)
} else { //下载失败
console.log("下载失败2："+item.Path)
}
});
dtask.start();

主要是在createDownload的参数区别，不清楚各位有没有遇到，就当给自己做个记录吧。

使用yarn安装至uniapp(同vue)项目

yarn add jsencrypt --dep
或者使用npm

npm install jsencrypt --dep
引入jsencrypt

项目中会出现node_modules文件见进入文件，再进jsencrypt***，再进bin文件用下面的附件解压出来替换jsencrypt.js文件

引入jsencrypt
import { JSEncrypt } from 'jsencrypt'

公钥或私钥跟后台要

methods: {  
    //  加密  
    encryptedData(publicKey, data) {  
      // 新建JSEncrypt对象  
      let encryptor = new JSEncrypt();  
      // 设置公钥  
      encryptor.setPublicKey(publicKey);  
      // 加密数据  
      return encryptor.encrypt(data);  
    },  
    // 解密  
    decryptData(privateKey,data){  
      // 新建JSEncrypt对象  
      let decrypt= new JSEncrypt();  
      // 设置私钥  
      decrypt.setPrivateKey(privateKey);  
      // 解密数据  
      return decrypt.decrypt(secretWord);  
    }  
  }

uni-app 中在manifest.json 配置 navigateToMiniProgramAppIdLis

WordPress开发APP系列教程：UNI、Flutter、Ionic、各种小程序，这次一网打尽

uni-app

既然帖子发在了这儿，我相信大家都知道uni-app是什么了。

但是在这里我还是要提一下，就是uni-app的确很6，主要是它解决了当下行业产品快速上线的痛点。总所周知当下移动应用四分五裂，这家出个原生的，那家出个自己平台的小程序等等。

而现在软件市场上的需求也是各有各的想法，这个要app又能H5的，那家要app又能小程序的，而且小程序平台还不一致（QQ、微信、今日头条）等等。而uni-app的出现就直接解决了这一系列技术重新开始的痛点。看了看论坛，虽然现在bug和体验性还美中不足，但是我相信uni-app是会越来越好的，因为它在软件市场上在逐渐的成为一种开发模式（我在公司面试招人的时候首先就是问会不会vue、搞没搞过un-app，如果没搞过这，上报上去基本就是不要的）。

所以没事多折腾折腾，是很有必要的。

一句话就是无论6不6，无论有用没用，大家都在折腾，大家都在学，自己学点儿也没啥。

WordPress

当然也许你知道uni-app但并不知道WordPress，所以我这里会说一下。

WordPress是一个款国外开源的著名【博客】程序，它由全世界的开源贡献者一起开发，现在已经成为了一个款CMS建站系统首选的程序。据不完全统计每十个网站中起码有一个使用WordPress开发的！

请注意我这里将这个博客打了个符号关起来了。因为经过我多年折腾，我发现将WordPress定义为博客程序实在是太狭隘了。我觉得那仅仅是没用用好的说法，用得好了WordPress可以做任何事情，用得好了WordPress就仅仅是一个类似于其他php开发框架的框架！

并且它比任何php框架开发起来都要迅速，因为它封装了数以万计开箱即用的函数、钩子。

而且，它是由全世界的开源贡献者一起开发的，在安全性方面也是毫不逊色。

WordPress+uni-app

试想一下如果你现在要用uni-app开发app你需要什么？

api接口？

做api接口又得用php框架写一个后台管理系统？

然后自己再从0到1开发一系列的接口？

那么你有么有想过用WordPress来当做后台管理系统，而你只负责ap接口的输出层？

这个方法也是从0到1？不不不，使用这套组合你可以调用WordPress数以万计的函数来加快你的开发！

关于本系列教程

相信想要折腾WordPress+uni-app的人肯定意见看见过我前面做的那套教程。

原本上套教程我只想抛个砖，让大家自己折腾折腾，但根据收集而来的五花八门的问题来看，大家好想并不太了解我这块砖。大家想要的是有用的、能上线的真正的项目。

因此我决定放弃那套教程，从0开始实战。从api接口开发开始。保证开发出来的项目能上线，教程中没一小节都拥有干货，且代码能复用！

此文档仅描述5+ App项目如何适配暗黑模式，uni-app项目请参考：https://uniapp.dcloud.net.cn/tutorial/darkmode

iOS13开始引入了暗黑模式（DarkMode），Android10 引入暗黑模式，在暗黑模式下，系统界面配色都会相应变暗，同时App也需要进行适配。

HBuilderX2.6.3+支持iOS平台适配暗黑模式
HBuilderX3.6.9+支持Android平台适配暗黑模式

特别说明

iOS平台

苹果近日对App Store商店的审核指南做了一次更新并发了一份公告，要求所有的APP 在4月30号前使用iOS 13 SDK开发应用，很多开发者错误理解成使用iOS 13 SDK开发应用就必须适配暗黑模式，实际上苹果的官方开发者文档从未强制要求应用必须适配深色样式（暗黑模式），完整解读参考：https://ask.dcloud.net.cn/article/37037。
重点：不适配暗黑模式，一样可以正常上Appstore。但是适配了暗黑模式，没适配利索，页面有黑有白，就可能会被拒绝上架。

注意：必须iOS13+设备上才支持

Android平台

注意：必须Android10+设备上才支持

开启适配暗黑模式（DarkMode）

为了保证应用的兼容性，HBuilderX打包生成的App默认已关闭兼容暗黑模式，需按以下方法配置开启适配暗黑模式。
开启适配暗黑模式后，弹出系统授权框将按当前系统设置的外观样式显示（可在 "设置" -> "显示与亮度" -> "外观" 中更改），应用中的页面则需要开发者根据下面的API获取当前系统外观模式进行适配处理。
注意：如果未开启适配黑暗模式，将无法获取当前系统的外观样式
打开项目的manifest.json文件，切换到“源码视图”项

• iOS平台
  在 "plus" -> "distribute" -> "apple" 节点下添加 defaultTheme 节点

  "plus": {  
  "distribute": {  
    "apple": {  
     "UIUserInterfaceStyle": "Automatic",   //不推荐使用，设置light或dark后将无法跟随系统  
     "defaultTheme": "light" | "dark" | "auto"   //HBuilderX 3.6.10及以上版本支持  
      //...  
    },  
    //...  
  },  
  //...

• Android平台
  在 "plus" -> "distribute" -> "google" 节点下添加 defaultNightMode 节点

  "plus": {  
  "distribute": {  
    "google": {  
      "defaultNightMode": "light" | "dark" | "auto"  
      //...  
    },  
    //...  
  },  
  //...

保存后，提交云端打包后生效

暗黑模式适配主要包括启动界面，应用中的页面，另一部分是特定功能弹出系统原生界面（如alert提示框）和iOS平台安全区域外背景颜色，下面会详细说明分别如何适配。

启动页

官方提供的默认启动页已适配 '暗黑模式'，会自动跟随系统模式改变背景颜色；自定义启动页请参考文档 自定义启动页

<a id="safearea"/>

iOS安全区域适配

开启安全区域占位

在 manifest.json文件的"plus" 节点下添加 "safearea" 适配iOS的安全区域，"background" 对应正常模式下安全区域外的背景颜色，"backgroundDark"对应暗黑模式下安全区域外的背景颜色

"plus" : {  
    "safearea": { //iOS平台的安全区域  
        "background": "#ffffff",  
        "backgroundDark": "#2f0508", // HX 3.1.19+支持  
        "bottom": {  
            "offset": "auto"  
        }  
    }  
...  
}

关闭安全区域占位

将 "offset" 置为 “none” 关闭安全区域的占位，注：关闭安全区域占位在刘海屏页面内容可能会被 “homeBar” 挡住，需要自行适配，具体请参考文档 iOS刘海屏适配

"safearea": {    
    "bottom": {    
        "offset": "none"    
    }    
}

更多关于 "safearea" 的说明请参考 manifest.json 说明

应用中页面适配暗黑模式

在应用中需要获取当前系统设置的外观模式格是否为暗黑模式，如果是则需要调整应用整体UI风格样式进行适配。

html页面可通过CSS适配

推荐使用CSS中的媒体查询 prefers-color-scheme 进行适配

@media (prefers-color-scheme: dark){  
    .content {  
        background-color: #1B1C1E;  
        color: white;  
    }  
}

注意：如果未开启适配黑暗模式，以上媒体查询样式将不会生效

获取当前系统外观模式

对于页面中的原生标题栏（TitleNView），则需获取当前的外观模式，动态修改样式进行适配。

5+ API：plus.navigator.getUIStyle获取当前系统外观模式。
返回"dark"表示当前为深色样式（DarkMode），即暗黑模式；"light"表示当前为浅色样式（LightMode），即普通模式。

function getUIStyle(){  
  var style = plus.navigator.getUIStyle();  
  if('dark'==style){  
    console.log('当前为暗黑模式');  
  }else{  
    console.log('当前为普通模式');  
  }  
}

监听系统外观模式改变

应用启动后，用户有可能改变系统外观，这时候可以通过监听切换暗黑模式事件进行处理。
5+ App（WAP2APP）项目，可在在页面中监听"uistylechange"事件

  document.addEventListener('uistylechange', function(){  
    var style = plus.navigator.getUIStyle();  
    console.log(('dark'==plus.navigator.getUIStyle())?'切换为暗黑模式':'切换为普通模式');  
  }, false);

系统原生界面适配暗黑模式

应用开启适配暗黑模式后，系统原生界面（plus.nativeUI）默认会自动适配系统设置的外观样式。
如果系统当前设置为深色外观（暗黑模式），则plus.nativeUI弹出的所有界面自动显示为深色（暗黑模式）样式；如果系统当前设置为浅色外观，则plus.nativeUI弹出的所有界面显示为浅色样式。

如系统提示框（plus.nativeUI.alert)）

• 深色（暗黑模式）样式效果
  
  
• 浅色（普通模式）样式效果
  
  

如果不想自动适配系统设置的外观样式，可以调用plus.nativeUI.setUIStyle强制设置原生界面的外观样式。
以下示例强制应用弹出原生界面为深色（暗黑模式）外观样式，即使系统没有设置为深色外观（暗黑模式）：

plus.nativeUI.setUIStyle('dark');  // ‘light’表示浅色外观样式

即使应用没有开启适配暗黑模式，此API也可生效

受影响的5+ API弹出系统原生界面

• plus.nativeUI.actionSheet
• plus.nativeUI.alert
• plus.nativeUI.confirm
• plus.nativeUI.previewImage
• plus.nativeUI.showWaiting
  仅在不指定背景颜色的情况会自动适配，如果代码中指定了背景颜色则需要根据不同模式进行适配设置合适的背景颜色。
• plus.nativeUI.pickDate
• plus.nativeUI.pickTime
• plus.nativeUI.pickTime
• plus.nativeUI.prompt
• plus.nativeUI.toast

受影响的uni-app弹出系统原生界面

• uni.showToast
• uni.showLoading
• uni.showModal
• uni.showActionSheet
• uni.previewImage
• picker（仅时间选择器，即：mode = time）

Hbuilder X内置浏览器和终端调节宽度或者高度的体验有点不好，需要鼠标恰好移到位置才能调节，容差太小

前言

WordPress做为最火的一个建站程序，相信现在在折腾网站的人肯定都是人手一个了。但是有了网站就够了吗？谁都知道，现在是移动端的天下，所以这个时候将你的WordPress网站转成一个app就颇为重要了！

而对于移动端开发，在很久以前也许这还是一个难题，但现在有了各种混合开发的技术栈，这一切都将迎刃而解，只要你掌握了api的开发方式、掌握了HTML、JS你就可以迅速做出一个app。（本人做的app 一隅 IONIC版只用了两周，flutter版只用了一周）。

于是折腾多年WordPress的本人，且尤其喜欢混合开发技术的我决定做一系列的WordPress开发app的实战教程，记住，是实战，是真实的可以上线的app，什么安全性问题、用户体验性问题等等这次都会涉及。

不再是像上个教程那样只是让你窥窥门径。

且通过上个教程我发现，你们要的是实战，是真正能用能上线的。

所以在本系列教程中，这些都将满足你们！

关于这个系列

既然是一个系列那么它就不简简单单的只是UNI-APP了，还包括了所有移动端。如下：

1. WordPress+uni-app打造cms资讯系统
2. WordPress+flutter打造cms系统。
3. WordPress+微信小程序打造CMS系统
4. WordPress+QQ小程序打造CMS系统
5. WordPress+IONIC 打造CMS系统

教程展现形式

为了通俗易懂本教程将以视频、文档+源码的方式展现

适合什么人

1. 会HTML、JS
2. 起码掌握NG、VUE其中一种开发思想
3. 起码能看懂PHP代码
4. 建议看本系列教程之前可以先看一下WordPress主题开发系列教程

实战项目

这次实战项目我将选择最火的资讯app 今日头条。当然，今日头条这么大一个app肯定不是我一个人所能完成的，所以在此教程中我将只实现app内以下功能：

首页
搜索
收藏
分享
阅读详情页
个人中心、登录注册
点赞、关注、评论
用户反馈
视频模块
作者个人主页
个人中心文章列表
个人中心投稿
更多待补充……

可以看出，即便只是实现了以上这些部分功能，这也是一个干货满满的教程啊哈！

教程目录

WordPress+uni-app：实战今日头条前言

第一阶段：WordPress开发移动app：api接口开发篇

关于本人

四年折腾开发经验折腾WordPress四年，各行各业各种类型全部用WordPress做。

折腾混合app四年，市面上所有混合开发框架全部折腾过。

文档，踩坑，谷歌，百度……

毫不夸张的说你想学的，我都会，都折腾过，而且都是不复制不粘贴，纯手工撸码。

WordPress开发APP系列教程详情

本人是一个少儿编程老师，平时也开发一些应用。因为同学们的兴趣，正在给他们持续录制一个从零实战App教学系列点击直达网站欢迎大家关注黑板助教公众号 一起来交流学习

今天又上架小米商店了，赞助一下H5+，希望越做越好

FAQ

Q：iOS 原生工程弹窗提示 “HTML5 + Rumtime D”

Q：提示 打包时未添加 xxx 模块 ...

<a id="duplicatesymbol"></a>

Q：三方库冲突

A：如果您原生工程依赖的三方库与SDK依赖的三方库冲突

• 源码开源的三方库比如 SDWebImage、ZXing等，这类库SDK内部大多数已经做过源码修改，为了保证功能的完整性所以请您使用SDK内置的三方库，移除您之前依赖的三方库，这些库的 .h 头文件存放在 UniMPSDK/Features/inc 路径中的，将对应库的头文件引入到您的工程中使用即可，如果您使用内置的三方库导致原生功能异常，请反馈给我们；
• 源码不开源的三方库比如 高德地图、微信、支付宝等，这类库官方依赖的版本如下表，如果您依赖的版本与SDk依赖的版本一致，你在使用SDK的功能模块时就不需要添加对应的三方库，如果版本不一致，请以高版本为准，如果SDK内使用的版本过低请您反馈给我我们，我们会做升级处理；
• 还有一种解决方法，就是您不使用官方扩展的功能模块，然后按照文档自行扩展这部分功能；

从2018年至今，uni-app的编译器历经了3代发展：非自定义组件模式、自定义组件模式、v3编译器。

在经历了3次重写编译器后，v3的出现，代表着uni-app进入成熟期。

关于v3编译器的新特性介绍，详见：https://ask.dcloud.net.cn/article/36599

v3编译器凝集了DCloud团队在2年的uni-app开发历程中的所有经验和教训，吸收了数百万开发者在实践中的反馈，在架构层面堪称完美。

在可预见的将来，DCloud不会立项开发v4编译器，而是将在v3的架构上持续迭代完善。

目前“非自定义组件模式”已经下线，“自定义组件模式”也走到生命周期的尾声。

为了集中精力、减少包体积，2020年4月发布的HBuilderX 2.7版本起，及对应的App SDK包，将不再提供“自定义组件模式”。（uni小程序sdk本身也仅支持v3）。

届时新版uni-app里将没有各种编译器的概念，包括v3的概念也没有，manifest里会取消所有编译器设置，项目默认运行在v3编译器下。对于新的开发者，他将无需理解这些编译器名称、区别。

与非自定义组件升级自定义组件不同，自定义组件升级v3正常没有需要改代码的地方，在设计上是完全向下兼容的。

如果你的App之前正常，但勾选v3编译器后异常，有2种可能：

1. v3编译器有bug，请在社区单独发帖，提供重现方式。DCloud会优先解决，保障v3的向下兼容性。
2. 你的应用之前使用了不推荐的写法，比如一些hack方式。此时需要你更正为正确的写法。如果正常写法无法满足你的需求，请发帖告知我们。

因v3的升级是app-vue端的，如果你之前的应用不涉及App端，或者App是纯nvue的，那么不受“自定义组件模式”下线的影响。

详细的过渡调整方案如下：

• HBuilderX 2.6.9开始，manifest.json的默认值从非v3调整为v3，即不写"compilerVersion" : 3,，也是v3编译模式。如果需要降级为非v3，请在manifest可视化界面-App其他常用配置 中去掉v3编译器的勾选。

• HBuilderX 2.7开始，将移除非v3编译器，只保留v3编译模式。如果开发者使用老版HBuilderX，也仍然可使用非v3编译器。本地打包可以通过使用老版的sdk来继续使用非v3。然后云打包将于5月底不再支持非v3的打包。

不管HBuilderX新版怎么调整，开发者已经发布在线上的App不会受到影响。

最后，再次强调，官方之所以敢于下线老版，是因为这2个编译器的差异没有那么大。正常老应用应该都是可以兼容的。如果在发布2.7版本前，v3的向下兼容性问题没有修复完毕的话，是不会强制下线的。

目前已知的主要问题就是subnvue的postmessage通信写法不再支持，建议使用新的页面通信方式https://uniapp.dcloud.io/collocation/frame/communication，更新常见问题排查：https://ask.dcloud.net.cn/article/37342。

另，最新的HBuilderX 修复了很多v3的bug，如果要报新bug，请体验新版后再报。

注意：我们强烈建议开发者尽快升级v3版本，因为后续新增功能仅支持v3版本，非v3版本将不再维护。如果您坚持使用老的编译器，有两个方案：

1. 离线打包
2. 使用HBuilderX 2.6.16 版（参考https://ask.dcloud.net.cn/article/37302下载历史版本），该版本将继续支持云端打包，其它老的HBuilderX版本将不再支持云端打包。注意，2.6.16版目前仅支持非v3打包，如果是v3版，请正常升级最新HBuilderX。

Android 扩展 uni小程序SDK 原生能力

概述

本文档主要介绍如何扩展 uni小程序SDK 原生能力。

什么是扩展原生能力？

扩展原生能力指的是将您原生开发的功能通过一定规范暴露给 uni小程序环境，然后即可在 uni小程序应用中调用您的原生功能。

扩展方式

uni 原生端是基于 WeexSDK 来实现扩展原生能力，扩展原生能力有两种方式：一种是不需要参与页面布局，只需要通过 API 调用原生功能，比如：获取当前定位信息、数据请求等功能，这种情况可通过扩展module的方式来实现；另一种是需要参与页面布局，比如：map、image，这种情况需要通过扩展component即组件的方法来实现；

开发前准备

• JAVA环境 jdk1.7+(最优1.8)
• Android Studio 下载地址：Android Studio官网 OR Android Studio中文社区
• 下载uni小程序 SDK 详情；
• HBuilderX-2.6.2+

注意事项

如果你扩展的Module或Component要与宿主进行数据交互需要注意。宿主与小程序不在同一进程，内存不共享。所以需要开发者自己实现跨进程通信。后续会完善此交互问题。

关于扩展的Module或Component代码中日志log。小程序运行在io.dcloud.unimp子进程。看日志log需要在这个进程看日志log。

扩展 module

下面以TestModule为例，源码请查看 uni小程序SDK 包中的示例 DEMO 工程；

1.创建Android Studio的Module模块

• 在现有Android项目中创建library的Module。例如TestModule

• 配置刚创建的Module的build.gradle信息。

  示例:

  //导入aar需要的配置  
  repositories {  
      flatDir {  
          dirs 'libs'  
      }  
  }  
  dependencies {  
      //必须添加的依赖  
      compileOnly 'com.android.support:recyclerview-v7:27.1.0'  
      compileOnly 'com.android.support:support-v4:27.1.0'  
      compileOnly 'com.android.support:appcompat-v7:27.1.0'  
      compileOnly 'com.alibaba:fastjson:1.1.46.android'  
  
      compileOnly fileTree(include: ['uniapp-release.aar'], dir: '../app/libs')  
  }  

  Tips:

  uniapp-release.aar是扩展module主要依赖库，必须导入此依赖库！

2.创建TestModule类

• Module 扩展必须继承 WXModule 类

  示例:

  public class TestModule extends WXModule  

• 扩展方法必须加上@JSMethod (uiThread = false or true) 注解。Weex 会根据注解来判断当前方法是否要运行在 UI 线程，和当前方法是否是扩展方法。

• Weex是根据反射来进行调用 Module 扩展方法，所以Module中的扩展方法必须是 public 类型。

  示例:

  //run ui thread  
  @JSMethod(uiThread = true)  
  public void testAsyncFunc(JSONObject options, JSCallback callback) {  
      Log.e(TAG, "testAsyncFunc--"+options);  
      if(callback != null) {  
          JSONObject data = new JSONObject();  
          data.put("code", "success");  
          callback.invoke(data);  
      }  
  }  
  
  //run JS thread  
  @JSMethod (uiThread = false)  
  public JSONObject testSyncFunc(){  
      JSONObject data = new JSONObject();  
      data.put("code", "success");  
      return data;  
  }  

• 同样因为是通过反射调用，Module 不能被混淆。请在混淆文件中添加代码：-keep public class extends com.taobao.weex.common.WXModule{;}

• Module 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数

3.注册TestModule

由于uni小程序运行在独立子进程中。内存与宿主不共享。所以宿主进程注册了TestModule，在uni小程序是无法使用的。
Android创建子进程时会主动再次初始化Application！所以uni小程序注册TestModule必须在Application中的onCreate初始化或注册。

Tips

• 注册TestModule之前记得配置宿主的build.gradle导入Module模块.
• 以下示例代码写在宿主的Application中。

示例:

public class App extends Application {  
    @Override  
    public void onCreate() {  
        super.onCreate();  
        try {  
            WXSDKEngine.registerModule("TestModule", TestModule.class);  
        } catch (WXException e) {  
            e.printStackTrace();  
        }  
    }  
}

到此，我们已经完成了一个简单的 module 扩展

4. 在 uni小程序 中调用 module 方法

module 支持在 vue 和 nvue 中使用

示例:

<template>  
    <div>  
        <button type="primary" @click="testAsyncFunc">testAsyncFunc</button>  
        <button type="primary" @click="testSyncFunc">testSyncFunc</button>  
    </div>  
</template>  

<script>  
    // 获取 module   
    var testModule = uni.requireNativePlugin("TestModule")  
    export default {  
        methods: {  
            testAsyncFunc() {  
                // 调用异步方法  
                testModule.testAsyncFunc({  
                        'name': 'unimp',  
                        'age': 1  
                    },  
                    (ret) => {  
                        console.log(ret)  
                    })  
            },  
            testSyncFunc() {  
                // 调用同步方法  
                var ret = testModule.testSyncFunc({  
                    'name': 'unimp',  
                    'age': 1  
                })  
                console.log(ret)  
            }  
        }  
    }  
</script>  

扩展组件 component

下面以TestComponent为例，源码请查看 uni小程序SDK 包中的示例 DEMO 工程；

1.创建Android Studio的Module模块

请参考 扩展 Module

2.创建TestComponent类

• Component 扩展类必须继承 WXComponent

  示例:

  public class TestText extends WXComponent<TextView>  

• WXComponent的initComponentHostView回调函数。构建Component的view时会触发此回调函数。

  示例:

  @Override  
  protected TextView initComponentHostView(@NonNull Context context) {  
      TextView textView = new TextView(context);  
      textView.setTextSize(20);  
      textView.setTextColor(Color.BLACK);  
      return textView;  
  }  

• Component 对应的设置属性的方法必须添加注解 @WXComponentProp(name=value(value is attr or style of dsl))

  示例:

  @WXComponentProp(name = "tel")  
  public void setTel(String telNumber) {  
      getHostView().setText("tel: " + telNumber);  
  }  

• Weex sdk 通过反射调用对应的方法，所以 Component 对应的属性方法必须是 public，并且不能被混淆。请在混淆文件中添加代码 -keep public class extends com.taobao.weex.ui.component.WXComponent{;}

• Component 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数

• Component 自定义事件
  对于每个组件默认提供了一些事件能力，如点击等。也可以自定义事件。在uni小程序代码中，通过 @事件名="方法名" 添加事件，如下添加onTel事件

  //原生触发fireEvent 自定义事件onTel  
  Map<String, Object> params = new HashMap<>();  
  Map<String, Object> number = new HashMap<>();  
  number.put("tel", telNumber);  
  //目前uni限制 参数需要放入到"detail"中 否则会被清理  
  params.put("detail", number);  
  fireEvent("onTel", params);  
  

  //标签注册接收onTel事件  
  <myText tel="12305" style="width:200;height:100" @onTel="onTel"></myText>  
  //事件回调  
  methods: {    
      onTel: (e)=> {  
          console.log("onTel="+e.detail.tel);  
      }  
  }    

  注意

  执行自定义事件fireEvent时params的数据资源都要放入到"detail"中。如果没有将你得返回的数据放入"detail"中将可能丢失。请注意！！！

3.注册TestComponent组件

由于uni小程序运行在独立子进程中。内存与宿主不共享。所以宿主进程注册了TestComponent，在uni小程序是无法使用的。
Android创建子进程时会主动再次初始化Application！所以uni小程序注册TestComponent必须在Application中的onCreate初始化或注册。

Tips

• 注册TestModule之前记得配置宿主的build.gradle导入的Module模块.
• 以下示例代码写在宿主的Application中。

示例:

public class App extends Application {  

    @Override  
    public void onCreate() {  
        try {  
            WXSDKEngine.registerComponent("myText", TestText.class);  
        } catch (WXException e) {  
            e.printStackTrace();  
        }  
        super.onCreate();  
    }  
}

到此，我们已经完成了一个简单的 component 扩展

4. 在uni小程序代码中使用组件

注意：扩展的 component 只能在 nvue 文件中使用

示例:

<template>  
    <div>  
        <myText tel="12305" style="width:200;height:100" @onTel="onTel"></myText>  
    </div>  
</template>  

<script>    
    export default {    
        data() {    
            return {    
            }    
        },    
        onLoad() {    
        },    
        methods: {    
            onTel: (e)=> {  
                console.log("onTel="+e.detail.tel);  
            }  
        }    
    }    
</script>

Android 扩展开发小提示

查看Android原生日志

小程序运行在独立子进程。所以想要看小程序的日志需要将进程切换到io.dcloud.unimp进程查看log！

查看小程序 console日志

修改项目中assets/data/dcloud_control.xml 内部信息。将syncDebug改为true，开启调试模式。 注意正式版需要改为false!!!
修改后查看io.dcloud.unimp进程查看log。TAG为console

在WXModule、WXComponent中跳转原生页面

获取WXSDKInstance对象。该对象中可以获取到上下文。

示例

@JSMethod (uiThread = true)  
public void gotoNativePage(){  
    if(mWXSDKInstance != null) {  
        Intent intent = new Intent(mWXSDKInstance.getContext(), NativePageActivity.class);  
        mWXSDKInstance.getContext().startActivity(intent);  
    }  
}