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);  
    }  
}

详细问题描述

1.后台线程刷新UI

=================================================================  
Main Thread Checker: UI API called on a background thread: -[UIApplication statusBarOrientation]  
PID: 9255, TID: 3252441, Thread name: com.taobao.weex.bridge, Queue name: com.apple.root.default-qos.overcommit, QoS: 0  
Backtrace:  
Main Thread Checker: UI API called on a background thread: -[UIView safeAreaInsets]  
PID: 9255, TID: 3252441, Thread name: com.taobao.weex.bridge, Queue name: com.apple.root.default-qos.overcommit, QoS: 0  
Backtrace:

决解方案

刷新UI的代码加到UI线程上去： dispatch_async(dispatch_get_main_queue(),^{
[UIApplication statusBarOrientation];
})

2.第三方库太多，没有按需加载，全部都一股脑集成项目，同时也不支持bitcode，导致安装包ipa太大(70多M)

决解方案

1.可以出个配置文档，开发者自行按照文档配置

1. 动态读取manifest.json的配置，按需加载对应的第三方库

3.修改了很多iOS项目默认的配置，导致常规的iOS开发配置有很多问题，如：

Build Settings的GCC_PREPROCESSOR_DEFINITIONS、LIBRARY_SEARCH_PATHS、OTHER_LDFLAGS这些配置把项目的默认配置都改掉了，导致集成cocopods很多问题

决解方案

常规的配置不要乱修改，按需添加uni-app自己的配置即可，如：LIBRARY_SEARCH_PATHS 的$(inherited)这个配置不要删掉，增加$(SRCROOT)/../SDK/libs、$(PROJECT_DIR)即可

4.项目文件结构乱，存在不明文件，如

BDSClientEASRResources文件夹下的*.bat文件作用不明

Bundles在存在多个js文件，没有组织一起
splash启动页还是采用老式的静态图方式

决解方案

不明文件是否是必须？

启动页可以抛弃静态图方式，js可以建立bundle包，采用storyboard方式

5.代码适配有问题，如

ViewController.m里状态栏的高度竟然还是定义为：

define kStatusBarHeight 20.f

没有适配iphone X后的版本

决解方案

修正状态栏高度宏定义：

define kStatusBarHeight (iPhoneX ? 44.f : 20.f)

5.PROJECT名和TARGETS名没有按照默认的一致，导致集成cocopods的时候需要制定target和project

决解方案

改成一致就好，命名不要包含-，采用英文首字母大写即可

6.没有针对现有iOS项目集成uni-app的功能

决解方案

可以参考Cordova的方案

此文章以停止更新！请移步Android uni小程序API参考手册

如果你不清楚uniMPSDK是什么？ 请先阅读uniMPSDK 概述

类 DCUniMPSDK

uni小程序SDK入口句柄,该类为工厂模式。通过getInstance()获取对象实例！

DCUniMPSDK 对象的方法介绍

DCUniMPSDK.getInstance()

获取SDK实例

参数说明

无

返回值

<a id="initialize"></a>

DCUniMPSDK.getInstance().initialize(context, config, callback)

sdk初始化

参数说明

返回值

无

示例

MenuActionSheetItem item = new MenuActionSheetItem("关于", "gy");  
List<MenuActionSheetItem> sheetItems = new ArrayList<>();  
sheetItems.add(item);  
DCSDKInitConfig config = new DCSDKInitConfig.Builder()  
    .setCapsule(true)  
    .setMenuDefFontSize("16px")  
    .setMenuDefFontColor("#ff00ff")  
    .setMenuDefFontWeight("normal")  
    .setMenuActionSheetItems(sheetItems)  
    .build();  
DCUniMPSDK.getInstance().initialize(this, config, new DCUniMPSDK.IDCUNIMPPreInitCallback() {  
    @Override  
    public void onInitFinished(boolean isSuccess) {  
        Log.e("unimp", "onInitFinished-----------"+isSuccess);  
    }  
});

DCUniMPSDK.getInstance().isInitialize()

SDK是否初始化成功

参数说明

无

返回值

DCUniMPSDK.getInstance().getAppBasePath(context)

获取uni小程序运行路径

参数说明

返回值

Tips

此接口用于宿主管理应用资源或自释放wgt包集成uni小程序。

自释放wgt包集成uni小程序

宿主通过zip解压wgt包资源。主动释放到uni小程序运行路径下。需要自创建文件应用的APPID/www/的目录

路径格式 : "uni小程序运行路径/应用的APPID/www/wgt包中的资源"

示例

"/xxx/xxx/宿主包名/files/apps/__UNI__04E3A11/www/__UNI__04E3A11.wgt包中的资源"

DCUniMPSDK.getInstance().releaseWgtToRunPathFromePath(wgtPath, callBack)

将wgt包中的资源文件释放到uni小程序运行时路径下。

参数说明

wgtPath参数说明

uni小程序应用资源包路径。例如 "xxx/xxx/xxx/UNI04E3A11.wgt".

wgt文件命名

appid为wgt文件命名！！！ 如果.wgt的文件名不是已appid命名。releaseWgtToRunPathFromePath将无法正常释放资源。

Tips：

注意使用releaseWgtToRunPathFromePath方法需要申请存储权限：android.permission.WRITE_EXTERNAL_STORAGE

callback返回参数说明

返回值

无

示例

String wgtPath = context.getExternalCacheDir().getPath()+"/__UNI__04E3A11.wgt";  
DCUniMPSDK.getInstance().releaseWgtToRunPathFromePath(wgtPath, new ICallBack() {  
    @Override  
    public Object onCallBack(int code, Object pArgs) {  
        if(code ==1) {//释放wgt完成  
            try {  
                DCUniMPSDK.getInstance().startApp(context, "__UNI__04E3A11");  
            } catch (Exception e) {  
                e.printStackTrace();  
            }  
        } else{//释放wgt失败  
            Toast.makeText(context, "资源释放失败", Toast.LENGTH_SHORT).show();  
        }  
        return null;  
    }  
});

DCUniMPSDK.getInstance().setDefMenuButtonClickCallBack(callBack)

设置menu点击事件回调接口

参数说明

callback返回参数说明

返回值

无

示例

DCUniMPSDK.getInstance().setDefMenuButtonClickCallBack(new DCUniMPSDK.IMenuButtonClickCallBack() {  
    @Override  
    public void onClick(String appid, String id) {  
        switch (id) {  
            case "gy":{  
                Log.e("unimp", "点击了关于" + appid);  
                break;  
            }  
        }  
    }  
});

<a id="getCurrentPageUrl"></a>

DCUniMPSDK.getInstance().getCurrentPageUrl()

2.6.6开始支持此功能

获取运行时uni小程序的当前页面url 可用于页面直达等操作的地址。

参数说明

无

返回值

DCUniMPSDK.getInstance().startApp(context, appid, splashClass, redirectPath, arguments)

启动uni小程序，确保已初始化完毕再调用！可通过DCUniMPSDK.getInstance().isInitialize()判断。

参数说明

redirectPath参数说明

uni小程序页面直达地址。宿主可通过扫码、scheme、网络获取等形式获取相关数据。拼写redirectPath参数，调用startApp实现启动uni小程序直达逻辑。

redirectPath目前由小程序开发者提供。后续SDK将提供分享链接等接口数据。待完善！

格式

redirectPath = pagePath(uni小程序页面路径)+?+query(页面携带参数)

pages/component/scroll-view/scroll-view?a=1&b=2&c=3

返回值

无

示例

// 启动小程序  
try {  
    DCuniMPSDK.getInstance().startApp(context,"__UNI__04E3A11")  
} catch (Exception e) {  
    e.printStackTrace();  
}

// 启动小程序打开指定页面  
try {  
    DCUniMPSDK.getInstance().startApp(context,"__UNI__04E3A11",  MySplashView.class, "pages/component/scroll-view/scroll-view?a=1&b=2&c=3");  
} catch (Exception e) {  
    e.printStackTrace();  
}

// 启动小程序并传入参数 "Hello uni microprogram"  
try {  
    JSONObject arguments = new JSONObject();  
    arguments.put("MSG","Hello uni microprogram");  
    DCUniMPSDK.getInstance().startApp(context, "__UNI__04E3A11", arguments);  
} catch (Exception e) {  
    e.printStackTrace();  
}

DCUniMPSDK.getInstance().getRuningAppid()

2.6.3开始支持此功能

获取正在运行的uni小程序appid

参数说明

无

返回值

DCUniMPSDK.getInstance().closeCurrentApp()

2.6.3开始支持此功能

关闭当前正在运行的uni小程序

参数说明

无

返回值

DCUniMPSDK.getInstance().setUniMPOnCloseCallBack(callBack)

2.6.3开始支持此功能

小程序被关闭事件监听

参数说明

callback返回参数说明

返回值

无

示例:

DCUniMPSDK.getInstance().setUniMPOnCloseCallBack(new DCUniMPSDK.IUniMPOnCloseCallBack() {  
    @Override  
    public void onClose(String appid) {  
        Log.e("unimp", appid+"被关闭了");  
    }  
});

<a id="getAppVersionInfo"></a>

DCUniMPSDK.getInstance().getAppVersionInfo(appid)

2.6.6开始支持此功能

获取已运行过得小程序应用版本信息,内置应用为运行过无法正常获取。返回值需要判空处理!!!

参数说明

返回值

返回值JSONObject格式说明

{  
"name": "1.0.0", //versionName  
"code": "100" //versionCode  
}

示例:

JSONObject jsonObject = DCUniMPSDK.getInstance().getAppVersionInfo("__UNI__04E3A11");  
if(jsonObject != null) {  
    Logger.d("__UNI__04E3A11版本信息为"+jsonObject.toString());  
}

<a id="sendUniMPEvent"></a>

DCUniMPSDK.getInstance().sendUniMPEvent(event, data)

2.6.10开始支持此功能

宿主主动触发事件到正在运行的小程序。注意：需要已有小程序在运行才可成功

参数说明

返回值

示例:

//JAVA原生层  
JSONObject data = new JSONObject();  
data.put("sj", "点击了关于");  
DCUniMPSDK.getInstance().sendUniMPEvent("gy", data);  

//uni小程序JS代码 监听宿主触发给小程序的事件  
uni.onNativeEventReceive(function(event, data){  
    console.log("onNativeEventReceive----="+event);  
});

<a id="setOnUniMPEventCallBack"></a>

DCUniMPSDK.getInstance().setOnUniMPEventCallBack(callBack)

2.6.10开始支持此功能

设置监听小程序发送给宿主的事件

参数说明

返回值

无

示例

//小程序js层发送事件给宿主  
uni.sendNativeEvent("aa",a, function(e){  
    console.log("sendNativeEvent-----------回调"+JSON.stringify(e));  
});  

//JAVA监听小程序发来的事件 通过callback返回参数  
DCUniMPSDK.getInstance().setOnUniMPEventCallBack(new DCUniMPSDK.IOnUniMPEventCallBack() {  
    @Override  
    public void onUniMPEventReceive(String event, Object data, DCUniMPJSCallback callback) {  
        callback.invoke( "测试数据");  
    }  
});

类 DCSDKInitConfig

uni小程序SDK初始化信息类。需通过DCSDKInitConfig.Builder构建DCSDKInitConfig对象。

类 DCSDKInitConfig.Builder

DCSDKInitConfig的构建者。通过DCSDKInitConfig.Builder().build()创建DCSDKInitConfig实例。

示例

DCSDKInitConfig config = new DCSDKInitConfig.Builder()  
                .setCapsule(true)  
                .setMenuDefFontSize("16px")  
                .setMenuDefFontColor("#ff00ff")  
                .setMenuDefFontWeight("normal")  
                .setMenuActionSheetItems(sheetItems)  
                .build();

DCSDKInitConfig.Builder 对象的方法介绍

setCapsule(isCapsule)

设置是否使用胶囊按钮

参数说明

setMenuDefFontColor(menuDefFontColor)

设置菜单默认按钮文字有颜色

参数说明

setMenuDefFontSize(menuDefFontSize)

设置菜单默认按钮字体大小

参数说明

setMenuDefFontWeight(menuDefFontWeight)

设置菜单默认按钮上文字的粗细

参数说明

setMenuActionSheetItems(list)

设置默认菜单按钮items

参数说明

类MenuActionSheetItem

构造函数 MenuActionSheetItem(title, id)

参数说明

示例

MenuActionSheetItem item = new MenuActionSheetItem("关于", "gy");

接口 IDCUniMPAppSplashView

自定义splashView接口类

IDCUniMPAppSplashView 接口方法介绍

<a id="getSplashView"></a>

getSplashView(context, appid)

splash创建时会调用此函数

参数说明

返回值

onCloseSplash(rootView)

splash关闭时会调用此函数

参数说明

返回值

无

示例

public class MySplashView implements IDCUniMPAppSplashView {  
    FrameLayout splashView;  
    @Override  
    public View getSplashView(Context context, String appid) {  
        splashView = new FrameLayout(context);  
        splashView.setBackgroundColor(Color.BLUE);  
        return splashView;  
    }  

    @Override  
    public void onCloseSplash(ViewGroup rootView) {  
        if(rootView != null)  
            rootView.removeView(splashView);  
    }  
}

DCUniMPJSCallback 2.6.10+新增

小程序js回调接口

invoke(data)

触发js回调(仅一次回调)

参数说明

返回值

无

invokeAndKeepAlive(data)

触发js回调(可多次回调)

参数说明

返回值

无