Ctrl+F并非总是弹出查找框，在不同场景下，为了更方便的使用，它的逻辑会有不同。

• 光标在代码区时，按Ctrl+F为显示/隐藏搜索条，若搜索条未显示，则显示，若搜索条已存在，则隐藏
• 光标在代码区时，选中代码按Ctrl+F，把选中的文字自动放入搜索框，并将光标置焦到搜索条
• 焦点在搜索条时，按Ctrl+F，查找定位到下一个匹配字符
• 焦点在搜索条时，按Esc，隐藏搜索条

另外Ctrl+H是高级搜索，功能更多，查询结果是单独列一个视图。

但是最好用的，其实还是一键搜索。
双击ctrl，光标自动进入右上角的一键搜索框里，敲不同的参数会有不同的搜索范围，鼠标放在输入框那里会有tips显示。
比如直接敲文本，就是在当前文档里搜文本。
敲/+文件名，就是搜索文件名；
敲@+变量名，就是搜索变量、函数、样式、id；
敲:+数字，就是转到某行；
敲!+功能名称，就是操作某功能，比如搜!+插件；
敲?+内容，就是搜索ask系统；

官方的策略是强化一键搜索，ctrl+f为了向下兼容暂时也不去掉，但不排除某天去掉此功能，建议大家多用一键搜索。

此文针对老HBuilder，不适用于HBuilderX。

此文档将不再维护，请参考新文档：https://uniapp.dcloud.io/tutorial/app-statistic

注：uni-app自带uni统计，无需使用三方统计。三方统计增加包体积且无法做到自带的免埋点采集行为数据。详见https://tongji.dcloud.io/

如确定使用友盟统计，则继续阅读下文。

App云端打包友盟统计功能，需要到友盟开发平台申请应用后获取相关配置参数：
友盟统计

配置参数需要提交云端打包后才能生效，如果需要真机运行生效请使用自定义基座

HBuilderX中配置统计

从友盟统计平台申请获取配置参数后，需在HBuilderX中配置并提交云端打包才能生效。
老版本HBuilder配置界面有差异，逻辑是一样的，建议更新使用HBuilderX

配置使用统计模块

打开应用的manifest.json文件，在“模块权限配置”项中勾选“Statistic(统计)”：

配置统计参数

在应用manifest.json文件的“SDK配置”页面，勾选“友盟统计”项，并输入从友盟统计平台申请的参数。

可视化界面配置

切换到“（App）SDK配置”页面：

源码视图配置

切换到“源码视图”

配置使用统计模块

• uni-app项目
  在"app-plus" -> "modules" 节点下添加 Statistic 节点
• 5+ APP（WAP2APP）项目
  在 "plus" -> "permissions" 节点下添加 Statistic 节点

"Statistic" : {  
    "des": "统计模块"  
}

配置友盟统计参数

• uni-app项目
  在 "app-plus" -> "distribute" -> "sdkConfigs" 节点下添加 statics节点
• 5+ APP（WAP2APP）项目
  在 "plus" -> "distribute" -> "plugins" 节点下添加 statics 节点

statics节点数据格式如下

        "statics": {  
          "umeng": {  
            "appkey_ios": "友盟统计平台申请应用获取的iOS平台appkey",  
            "channelid_ios": "iOS平台的渠道字符串，可输入任意字符串",  
            "appkey_android": "友盟统计平台申请应用获取的Android平台appkey",  
            "channelid_android": "Android平台的渠道字符串，可输入任意字符串"  
          }  
        },  
        //...

Ctrl+S保存，并提交云端打包生效。

注意：

IDFA说明

从HBuilderX2.2.5版本之后（含2.2.5），基座里集成了友盟v6.0.5统计SDK，因友盟官方，从组件化产品开始，【友盟+】SDK默认采集idfa标识，用来更准确的分析核对数据。对于应用本身没有获取idfa的情况，建议将应用提交至AppStore时按如下方式配置：（以避免被苹果以“应用不含广告功能，但获取了广告标示符IDFA”的而拒绝其上架。）

此文档将不再维护，请参考新文档：https://uniapp.dcloud.io/tutorial/app-webview-error

当Webview窗口加载错误地址（如本地页面不存在）或者访问网络资源失败（如无法访问网络）时会自动显示默认错误页面：

设置应用全局默认错误页面

• 5+App和wap2app
  在应用的manifest.json文件的"plus"->"error"节点的url属性可配置自定义错误页面替换默认的错误页面。
  打开manifest.json文件，切换到代码视图，添加以下数据：

  "plus": {  
      "error": {  
          "url": "error.html"  
      },  
      //...  
  },  
  //...

  其中url地址推荐使用本地地址，相对于应用根目录。
  设置为“none”则关闭跳转到错误页面功能，此时页面显示Webview默认的错误页面内容。

• uni-app项目

  "app-plus": {  
      "error": {  
          "url": "hybrid/html/error.html"  
      },  
      //...  
  },  
  //...

  error.html需要放到根目录下的hybrid/html目录下，否则不会被编译进去

单独设置Webview窗口的错误页面

如果需要单独自定义某个Webview窗口的错误页面，则需要在创建时通过WebviewStyle对象的errorPage属性控制:

var styles = {errorPage:"error.html"}; // 设置为“none”则关闭此Webview窗口的跳转到错误页面功能  
var webview = plus.webview.create( "url", "id", styles );     
webview.show();

错误页面中监听事件

在定义的error.html页面中可以通过监听"error"事件获取更多错误信息：

// 获取错误信息  
document.addEventListener("error",function(e){  
    var url = e.url;  // 错误页面的url地址  
    var href = e.href; // 错误页面的完整路径（包括完整的协议头）  
},false);

注意
Android平台使用iframe时如果无法加载页面在不同版本系统上存在差异：
5.0及以上版本：Webview窗口对象不会加载错误页面，仅iframe节点显示无法加载页面；
5.0以下版本：Webview窗口对象会加载错误页面。

HBuilder的js代码格式化使用的是jsbeautify插件，地址如下：https://github.com/beautify-web/js-beautify
配置css格式化后在一行，参考http://ask.dcloud.net.cn/article/628

如果想预览整体的css列表，HBuilder有大纲视图，在菜单-跳转里有转到大纲。
非要在一行，就参考上面的链接，在配置文件里修改配置。

HBuilderX的格式化配置另见文档：https://ask.dcloud.net.cn/article/36529

此文档将不再维护，请参考新文档：https://uniapp.dcloud.io/tutorial/app-payment

plus的支付API，支持支付宝App支付（移动快捷支付）、微信支付和苹果的IAP应用内支付。
配置参数需要提交云端打包后才能生效，如果需要真机运行生效请使用自定义基座

开发指导

传统支付流程如下：

如果使用uniCloud，则搭配uniPay会大幅简化开发，详见：https://ext.dcloud.net.cn/plugin?id=1835
如不使用uniCloud，可以继续往下看。

申请开通支付

在使用支付前，需要向各支付平台申请开通支付功能，如已申请可跳过此章节。

Apple应用内支付(IAP)

苹果应用内置流程与其它三方支付平台存在差异，请单独参考iOS 平台使用Apple应用内支付文档：
http://ask.dcloud.net.cn/article/497

注意事项：
iOS平台苹果审核规范要求，应用中虚拟物品交易必需使用Apple应用内支付，实物交易才能使用第三方支付（支付宝和微信支付）

支付宝支付

登录支付宝账号，创建应用接入支付宝App支付能力，包括以下步骤：

1. 创建应用（获取appid）
2. 开通App支付功能
3. 配置密钥（获取公钥、私钥）

详情可参考支付宝官方文档App支付快速接入

服务端生成支付订单

在App端调用支付功能时，需要先在服务器生成支付订单，下面是简单的参考示例。
参考示例代码支付宝App支付生成支付订单（PHP）
老版本“移动快捷支付”参考示例代码支付宝移动快捷支付（PHP）
C#生成支付宝订单示例

微信支付

1. 使用微信支付功能需到微信开放平台申请移动应用并开通支付功能
   微信APP支付接入商户服务中心
   申请应用后可以获取AppID和AppSecret值。

2. 开通支付功能后可获取支付业务服务器配置数据
   PARTNER：财付通商户号
   PARTNER_KEY：财付通密钥
   PAYSIGNKEY：支付签名密钥

服务端生成支付订单

在App端调用支付功能时，需要先在服务器生成支付订单，下面是简单的参考示例。
参考示例代码微信支付V3（PHP）

HBuilderX中配置使用支付功能

从微信开放平台申请获取配置参数（Apple应用内支付和支付宝无需配置）后，需在HBuilderX中配置并提交云端打包才能生效。
老版本HBuilder配置界面有差异，逻辑是一样的，建议更新使用HBuilderX

打开项目的manifest.json文件，在“App模块配置”项中勾选“Payment(支付)”：

勾选后会显示支持的支付模块，可根据应用需要进行选择配置

Apple应用内支付

在manifest.json文件“App模块配置”项的“Payment(支付)”下，勾选“Apple应用内支付”项

仅iOS平台支持。

支付宝支付

在manifest.json文件“App模块配置”项的“Payment(支付)”下，勾选“支付宝支付”项

可根据需要选择支持Android及iOS平台

微信支付

在manifest.json文件“App模块配置”项的“Payment(支付)”下，勾选“微信支付”项

• appid：
  微信开放平台申请应用的AppID值
• UniversalLinks：
  iOS平台通用链接，必须与微信开放平台配置的一致，参考iOS平台微信SDK配置通用链接（Universal Links）。

可根据需要选择支持Android及iOS平台

应用中调用支付功能

plus API使用步骤：

1. 调用plus.payment.getChannels()获取系统支持的支付通道；
2. 调用plus.payment.request()发起支付请求。

示例代码

var channel=null;  
// 1. 获取支付通道  
function plusReady(){ //uni-app中将此function里的代码放入vue页面的onLoad生命周期中  
    // 获取支付通道  
    plus.payment.getChannels(function(channels){  
        channel=channels[0];  
    },function(e){  
        alert("获取支付通道失败："+e.message);  
    });  
}  
document.addEventListener('plusready',plusReady,false);//uni-app不需要此代码  

var ALIPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';  
var WXPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total=';  
// 2. 发起支付请求  
function pay(id){  
    // 从服务器请求支付订单  
    var PAYSERVER='';  
    if(id=='alipay'){  
        PAYSERVER=ALIPAYSERVER;  
    }else if(id=='wxpay'){  
        PAYSERVER=WXPAYSERVER;  
    }else{  
        plus.nativeUI.alert("不支持此支付通道！",null,"捐赠");  
        return;  
    }  
    var xhr=new plus.net.XMLHttpRequest(); //uni-app中请使用uni的request api联网  
    xhr.onreadystatechange=function(){  
        switch(xhr.readyState){  
            case 4:  
            if(xhr.status==200){  
                plus.payment.request(channel,xhr.responseText,function(result){  
                    plus.nativeUI.alert("支付成功！",function(){  
                        back();  
                    });  
                },function(error){  
                    plus.nativeUI.alert("支付失败：" + error.code);  
                });  
            }else{  
                alert("获取订单信息失败！");  
            }  
            break;  
            default:  
            break;  
        }  
    }  
    xhr.open('GET',PAYSERVER);  
    xhr.send();  
}

注：第二步中获取到的支付订单数据需要业务服务器生成，参考前面章节中的服务端生成支付订单。

webview模式的选项卡页面，其实是将多个子选项卡对应的webview合并到了一个主webview中，点击选项卡时，动态显示、隐藏对应子webview页面，所有页面是一个整体，通常情况下得逻辑是，返回按键时，关闭主页面；

但若用户希望实现，点击返回时，返回到上一次活跃的子选项卡页面，则需简单定制，实现逻辑很简单：

1. 每次点击时，记录上一次活跃的选项卡；
2. 自定义返回函数，返回时隐藏当前选项卡，显示上一次活跃的选项卡页面；

如下为示例代码：

    //当前激活选项，默认为第一个；  
    var activeTab = subpages[0];  
    var lastActiveTabs = new Array();  
    //选项卡点击事件  
    mui('.mui-bar-tab').on('tap', 'a', function(e) {  
        var targetTab = this.getAttribute('href');  
        if (targetTab == activeTab) {  
            return;  
        }  

        //先隐藏当前的  
        plus.webview.hide(activeTab);  
        //再显示目标  
        plus.webview.show(targetTab);  
        //记录上次活跃的选项卡  
        lastActiveTabs.push(activeTab);  
        //更改当前活跃的选项卡  
        activeTab = targetTab;  
    });  
    mui.back = function(){  
        if(lastActiveTabs.length>0){  
            var last = lastActiveTabs.pop();  
            //先隐藏当前的  
            plus.webview.hide(activeTab);  
            //取消当前选项卡的高亮样式  
            document.querySelector(".mui-bar-tab .mui-active").classList.remove("mui-active");  
            //再显示历史页面  
            plus.webview.show(last);  
            //历史选项卡增加高亮样式  
            document.querySelector(".mui-bar-tab a[href='http://ask.dcloud.net.cn/"+last+"']").classList.add("mui-active");  
            //更改当前活跃的选项卡  
            activeTab = last;  
        }else{  
            //不能再退了  
        }  
    }

HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。webkit remote debug其实是google、apple官方提供的服务，本文主要介绍google的chrome下如何调试Android手机上webview里运行的网页。
系列文章目录导航：

• 调试方式介绍一 边改边看
• 调试方式介绍二 真机运行
• [调试方式介绍三 webkit remote debug之Chrome调试Android手机]
• 调试方式介绍四 webkit remote debug之Safari调试iOS手机

Chrome调试Android手机之概述

调试是软件开发过程中很重要的环节，它能帮助开发者快速的定位和解决开发过程中碰到的问题。对于HTML5的开发，大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验，不仅能快速方便调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式，还能跟踪分析页面资源加载性能等问题。对于移动平台的开发者来说，从Android4.4开始，也可以通过Chrome的DevTools工具连接设备对于应用进行调试。

调试效果如图所示：

软件要求

• Android设备或模拟器的系统版本为4.4及以上；

真机调试环境

如果你有Android设备，并且系统是4.4以上版本，那么可以直接使用Chrome连接进行调试。

检测设备版本

打开系统“设置”-> “关于”，查看Android版本：

Android版本必需是4.4及以上，否则无法进行应用调试。请参考“模拟器调试环境”章节使用模拟器进行应用调试。

显示开发者选项

Android设备默认“开发者选项”是隐藏的，需要打开“设置”-> “关于”页面，多次（7次）点击“版本号”项，返回到“设置”页面可显示“开发者选项”：

点击“开发者选项”，打开“开发者选项”设置页面。

开启USB调试

连接PC

Android设备通过USB数据线连接到PC，如果系统无法正确识别，则需要安装驱动，通常可到设备制造商的官方网站下载安装。也可使用第三方手机助手软件安装，如“360手机助手”、“应用宝”等。

PC识别到设备后，这时可通过HBuilder的真机运行功能进行连接并安装HBuilder应用。

使用HBuilder调试

在HBuilder最新版里，点运行菜单，或者HBuilderX的视图菜单，点里面的“打开Webview调试模式”。
确保手机连接正常、确保启动了可调试的app，那么右侧或底部会列出可调试的页面。点击调试/inspect即可打开chrome控制台进行调试。

注意：chrome83起调整了协议。HBuilderX2.8起适配了新协议。如果你的chrome升级到83以上版本，需更新HBuilderX到2.8+才能正常使用

================================================
正常情况下，开发者阅读到此结束。后续文档是Android模拟器的安装教程和不使用HBuilder调试而使用chrome调试的教程
================================================
================================================

附录：Android模拟器调试环境

如果你没有Android手机，又想调试Android应用，那么你需要安装Google官方的Android模拟器。
注意三方模拟器如genymotion、海马玩、Bluestacks蓝叠等模拟器只能真机运行，不能debug调试。

下文仅介绍Google官方模拟器的安装方法。由于Google经常更新，也建议开发者随时关注网上的其他更新教程。

如果没有Android4.4及以上版本设备，可以配置Android模拟器来调试。Android模拟器一直都以运行速度慢著称，其实官方已经提供解决方案使用Intel HAXM技术来加速，使得模拟器运行速度有大幅的提升。
硬件要求

• CPU支持Intel VT技术（AMD CPU无法使用HAXM加速）；
• 内存推荐4G；
• Window XP/Vista/7/8（32/64-bit），推荐Windows 7/8（64-bit）。

网络要求
使用Google的服务，不得不付出的代价就是要准备好翻墙工具。
模拟器安装更新和调试初始化时都必须翻墙。
无条件翻墙的同学可以尝试修改本机host的方法来访问Google相关服务，host内容参考google-hosts，注意及时更新：）

ADT工具

配置模拟器调试环境需要安装ADT工具，如果已经配置过android开发环境，则可跳过此章节。

下载ADT工具

Android模拟器开发环境需通过ADT工具进行安装，这里不需要下载完整的ADT Bundle，使用独立ADT工具即可：

• 进入官网下载Android SDK Tools
  
  选择windows平台下的独立ADT插件安装包。

• 同意使用条款和条件
  
  点击下载按钮。

• 保存安装包
  目前版本为22.6.2，保存到本地为：installer_r22.6.2-windows.exe。

安装ADT工具

• 双击运行保存的ADT安装文件（install_r22.6.2-windows.exe），开始安装
  
  选择下一步“Next”。

• 配置JDK环境
  如果已经安装了JDK环境，则提示确认：
  
  直接选择下一步“Next”。
  如果没有安装过JDK，则会提示没有找到：
  
  需安装JDK，并设置JAVA_HOME环境变量，完成后重新运行ADT安装文件。

• 选择用户
  
  选择默认值，仅当前用户使用即可，选择下一步“Next”。

• 选择安装目录
  
  选择非系统盘目录（如“D:\AndroidSDK”），确保有足够的磁盘空间安装SDK及模拟器文件（至少需要1G的空间）。选择下一步“Next”。

• 选择开始菜单目录
  
  保持默认值，选择下一步“Next”。

• 解压安装
  
  完成后，选择下一步“Next”：
  

• 完成安装
  
  选择立即启动SDK管理器（Android SDK Manager），选择下一步“Next”，完成ADT工具的安装。
  如未立即启动，可在Android SDK根目录（如“D:\AndroidSDK”），双击运行“SDK Manager.exe”程序。

下载SDK和模拟器

安装ADT工具后，启动SDK管理程序对各版本编译工具、SDK、模拟器、插件进行管理，如升级、安装、卸载等。如果已经下载了SDK和模拟器，可跳过此章节。

• 更新SDK列表
  启动SDK管理程序后会自动获取最新的工具、SDK、模拟器及扩展插件列表。
  

• 列表更新完成
  更新完成后，显示日志：
  

• 选择下载项
  使用Intel HAXM加速模拟器，必须选择以下项下载：

选择好下载项后，如下图所示：

选择“Intall 4 Packages...”，开始下载安装。

• 接受许可协议
  
  分别选择右侧packages列表中的项后，选中“Accept License”接受许可协议。然后点击“Install”，开始下载。

• 开始下载
  
  由于SDK和模拟器镜像文件比较大，下载时间会比较长，而且国内访问google官方网站不太稳定，经常提示下载失败：
  
  关闭提示对话框，重新下载，或者翻墙后再尝试下载。

安装Intel X86HAXM

下载Intel X86 HAXM插件后，需要到下载目录运行安装程序进行安装，目录为： “%ADT安装目录%\extras\intel\Hardware_Accelerated_Execution_Manager\”。双击运行intelhaxm.exe进行安装，目前新版本为1.0.8，如果已经安装过低版本，建议升级。

• 开始安装
  
  选择下一步“Next”。

• 配置HAXM使用最大内存
  
  安装程序会自动计算推荐值，使用默认值，选择下一步“Next”。

• 确认配置
  
  选择下一步“Next”。

• 完成安装
  

创建模拟器

ADT工具带Android模拟器管理程序（Android Virtual Device Manager），可在Android SDK根目录（如“D:\AndroidSDK”），双击运行“AVD Manager.exe”程序。

由于没有创建过模拟器，在列表中显示无可用模拟器，点击“New...”开始新建模拟器。

• 新建模拟器
  

注意务必设置好SD Card，否则无法真机运行。
设置完成后，点击“OK”。

• 确认配置
  

• 创建完成后在模拟器列表中显示
  

启动模拟器

创建完模拟器，每次启动Android模拟器管理程序都能在列表中显示：

• 启动模拟器
  
  选择“Android4.4.2”模拟器，点击“Start...”启动。

• 设置启动配置信息
  

点击“Launch”启动。

• 等待加载模拟器
  
  PC的配置决定速度，耐心等待模拟器的启动。

• 完成启动模拟器
  
  模拟器配置完毕，这时可通过HBuilder的真机运行功能进行连接，参考后面“应用调试”章节。

附录：使用chrome调试webview

配置完模拟器或真机调试环境后，可通过Chrome的DevTools工具快速调试HBuilder开发的移动应用。

安装HBuilder应用

启动HBuilder后会自动检测连接到PC上的设备（模拟器或真机），创建“移动App”后，可通过以下方式在设备上安装HBuilder应用进行调试：
运行的快捷键是Ctrl+R。也可以通过鼠标操作（注意下图中run in device的按钮在新版中已经不存在了，只需点击手机即可）

• 通过“运行”菜单启动
  

• 通过工具栏启动
  
  设备上安装完HBuilder应用后，会同步应用资源并自动运行。

• 模拟器
  

• 真机
  
  应用启动后则可通过Chrome的DevTools工具连接进行调试。

使用Chrome调试

我们推荐开发者直接使用HBuilder的调试，详见上文。这样可以免翻墙。
如果你不使用HBuilder的调试，而要自己使用chrome调试，可以看这里的教程，注意要翻墙。
检测Chrome版本号
Chrome 30及以上版本才支持Android设备调试，打开Chrome的关于页面查看：

要求最低Chrome30以上版本，如果版本太低则需更新版本，推荐使用最新版本。

打开设备检查页面
在Chrome地址栏，输入“chrome://inspect”或通过“菜单”->“工具”->“检查设备”打开设备检查页面：

DevTools工具会自动检测已连接设备运行的可调试页面列表，点击对应页面的“inspect”链接打开调试页面。
如果上图界面没有显示可调试的手机，请重新根据上文提到的方法检查手机的usb调试模式或驱动安装情况。同时注意Android4.4以下的手机无法调试，注意海马玩等模拟器无法调试。
如果上图界面有手机，但没有可调试的app，可能的原因如下：

1. 手机端需要调试的HBuilder基座或其他app并没有启动或没有运行任何html页面；
2. 要调试的app拒绝了调试请求。HBuilder调试基座是默认开放调试请求的，但云打包或本地打包的app默认是关闭调试请求的。云打包是在manifest里配置是否允许调试，具体请查询manifest配置指南，本地打包也要配置debug="true"，具体需要看本地打包配置环境。

点击"inspect"时，如果遇到启动了一个白屏界面，说明被墙了。因为此服务需要连接google的服务器
一般情况下，只在第一次使用"inspect"时需要翻墙，以后会缓存在本地。
开发者可以使用三方翻墙服务，但注意并不是可以访问google.com就可以使用chrome调试，有些翻墙软件支持的dns并不全。关键是要ping通chrometophone.appspot.com（此url可能随google调整服务而变化）。

还有一个简单易行的方法是修改本机host。这里提供一些host清单。https://github.com/racaljk/hosts，注意及时更新。于2016年7月25日亲测可行，注意此host文件涉及的国外域名很多，不需要的dns解析可以删除）
注意host文件修改在window下需要管理员权限，具体方法本文不讲述请自行百度。

页面调试
打开调试页面后DevTools会自动加载相关资源，调试页面操作方式与普通html调试页面完全一致。

• 在Elements下查看DOM结构
  
  选中DOM元素后，在设备上会高亮显示，右侧Styles下修改CSS属性可即时生效：
  

• 在Sources下断点调试JavaScript
  
  按F5可重新加载页面，重新开始调试。

注意：每个Webview在chrome候选调试列表里是不同的列表，需要单独点inspect。当你inspect WebviewA时，点击了一个按钮，打开了WebviewB，此时若要调试B，需要返回chrome://inspect/#devices页面，找到WebviewB，然后点inspect。

由于老版DCloud证书包含了DCloud公司名称信息，最近发现开发者使用此证书发布违规违法APP，牵连了DCloud。
应监管部门要求，HBuilderX将不再推荐使用老版DCloud公用证书，请开发者使用自己的证书打包发布应用，参考生成Android签名证书

• 云端打包
  老版DCloud公用证书将于2020年3月1日过期，过期后再使用本证书需实名认证。
• 离线打包
  从即日起不再提供老版DCloud公用证书的下载，请开发者更换为自己的证书。如继续使用需实名认证，先用其它证书打包生成apk，然后使用通过实名认证的邮箱将apk发送到service@dcloud.io，我们签名后通过邮件回复。

如需测试、体验打包，不想自己生成证书，可以临时使用公共测试证书

关于Android证书的用途

证书是一个开发者的身份标志，对Android系统而言。使用一个证书签发的App，是属于同一个开发者的App。

举个极端的例子，如果你的应用证书泄露，那么别人可以用这个证书签名一个仿冒App，假如包名和你的包名也一样，就可以覆盖安装安卓手机上你之前的包。

当前仅依赖证书校验是不完善的，所以主流的Android应用市场，通过实名认证开发者信息和著作权，强化了App的唯一性。也就是从主流应用市场点更新，不会发生冒充事件。但是通过其他方式安装apk，仍然会发生冒充的可能性。

如果签名不同，即使包名相同，也无法覆盖安装。此时安卓手机会在安装时报错，需要先卸载老的版本，才能安装新版。

DCloud在新版HBuilderX中提供了一个新的公共测试证书，这个证书也仅适合用于初期体验测试和不在意被冒充的业务（虽然是极端情况下）。敏感的商业应用，不应该使用公共测试证书，而要用自己的证书。

安卓应用升级的逻辑

安卓手机安装新的apk时，会校验本机已存在的应用包名，如果本机没有相同包名的应用，会走新安装流程。
如果本机已存在相同包名的应用，则走升级流程，然后会进一步判断证书签名是否相同、版本号是否更高，校验通过后才会覆盖升级。

应用更新证书可能引起以下问题，需要开发者谨慎操作：

• 更换证书会造成老用户无法覆盖安装
  此时方式1，是请老用户卸载旧版，重新下载。
  方式2，也可以干脆换个包名和logo，在应用图标上带个新版之类的标记。老应用启动时，直接引导用户重新安装新版apk。
• 更换证书需要同步更新第三方SDK配置的应用签名
  如微信登录、分享、支付，更新证书需要登录微信开放平台修改更新Android平台的应用签名。
• 更换证书会导致应用市场更新麻烦
  应用市场更新应用时会校验签名信息，如果证书更换可能无法上传更新。
  方式1，先下架老应用再上传新应用
  方式2，重新新建应用上传

DCloud公用证书信息（将过期不要再使用）

HBuilder|HBuilderX应用云端打包Android平台默认使用的DCloud公用证书，其信息如下：
MD5： 59:20:1C:F6:58:92:02:CB:2C:DA:B2:67:52:47:21:12
SHA1：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58
SHA256：D7:5C:1F:A2:B9:AE:86:7C:E6:88:A8:AD:C6:DE:AC:7C:D6:BA:96:F4:3A:75:1F:D1:0A:20:0F:A5:97:4A:C6:36

应用签名: 59201cf6589202cb2cdab26752472112

完整信息如下：

别名: hbuilder  
创建日期: 2014-9-29  
条目类型: PrivateKeyEntry  
证书链长度: 1  
证书[1]:  
所有者: CN=DH, OU=数字天堂（北京）网络技术有限公司, O=数字天堂（北京）网络技术有限公司, L=海淀, ST=北京, C=86  
发布者: CN=DH, OU=数字天堂（北京）网络技术有限公司, O=数字天堂（北京）网络技术有限公司, L=海淀, ST=北京, C=86  
序列号: 5174dc8b  
有效期为 Mon Apr 22 14:45:31 CST 2013 至 Sun Aug 23 14:45:31 CST 3012  
证书指纹:  
         MD5:  59:20:1C:F6:58:92:02:CB:2C:DA:B2:67:52:47:21:12  
         SHA1: BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58  
         SHA256: D7:5C:1F:A2:B9:AE:86:7C:E6:88:A8:AD:C6:DE:AC:7C:D6:BA:96:F4:3A:75:1F:D1:0A:20:0F:A5:97:4A:C6:36  
签名算法名称: SHA1withRSA  
主体公共密钥算法: 1024 位 RSA 密钥  
版本: 3

5+原生插件将不再继续维护，建议开发者升级应用为uni-app项目并使用uni原生插件。uni原生插件文档
本文为5+app插件开发指南。uni-app请另外参考文档：https://ask.dcloud.net.cn/article/35428

欢迎有原生开发能力的朋友入群一起交流学习（入群请提供注册邮箱）：
DCloud原生开发者群：
1群：256775471（已满）
2群：814228233 (已满)
3群：455763866

技术架构

HTML5+ 基座扩展采用三层结构，JS层、PluginBridge层和Native层。 三层功能分别是：
JS层： 在Webview页面调用，触发Native层代码，获取执行结果。
PluginBridge层： 将JS层请求进行处理，触发Native层扩展插件代码。
Native层： 插件扩展的平台原生代码，负责执行业务逻辑并执行结果返回到请求页面。

开发者在编写扩展插件的JS时需要调用Javascript Plugin Bridge的API用来完成对Native层代码的调用和运行结果的返回。在实际应用中，开发者可以根据扩展方法的实际需求不同，将插件的扩展方法设置为同步执行或异步执行。

同步执行的扩展方法会阻塞当前JS代码的执行，直到Native层插件扩展方法执行完毕。异步扩展方法不会阻塞当前JS代码的执行，使用者需要设置回调方法接收Native层返回的执行结果，开发者需要在插件中调用 Native plugin brigde的方法将执行结果返回到请求页面。

扩展插件工作流程：

插件异步扩展方法：

异步方法的执行不会阻塞当前JS的运行，方法的执行结果会通过回调的方式返回给调用者。

插件同步扩展方法：

同步方法的执行会阻塞当前JS的运行，方法执行完成后可直接获取执行的结果。

扩展插件JS API 编写

开发者在实现JS层API时首先要定义一个插件类别名，并需要在IOS工程的PandoraApi.bundle\feature.plist文件中声明插件类别名和Native层扩展插件类的对应关系

JS扩展方法的实现

同步返回JS扩展方法实现
在实现同步扩展方法时，开发者需要调用JS Plugin Bridge的window.plus.bridge.execSync()
方法，该方法可同步获取Native插件返回的运行结果。

void plus.bridge.execSync( String service, String action, Array<String> args );

service: 插件类别名
action: 调用Native层插件方法名称。
args： 参数列表。

异步返回JS扩展方法实现
在实现异步扩展方法时，开发者需要调用JS Plugin Bridge的plus.bridge.exec()方法，该方法会通知Native层插件执行指定方法，运行结果会通过回调的方式通知JS层

void plus.bridge.exec( String service, String action, Array<String> args );

service: 插件类别名
action: 调用Native层插件方法名称。
args： 参数列表。

扩展插件JS API代码示例：

document.addEventListener( "plusready",  function()  
{  
// 声明的JS“扩展插件别名”  
    var _BARCODE = 'plugintest',  
        B = window.plus.bridge;  
    var plugintest =   
{  
// 声明异步返回方法  
        PluginTestFunction : function (Argus1, Argus2, Argus3, Argus4, successCallback, errorCallback )   
        {  
            var success = typeof successCallback !== 'function' ? null : function(args)   
            {  
                successCallback(args);  
            },  
            fail = typeof errorCallback !== 'function' ? null : function(code)   
            {  
                errorCallback(code);  
            };  
            callbackID = B.callbackId(success, fail);  
// 通知Native层plugintest扩展插件运行”PluginTestFunction”方法  
            return B.exec(_BARCODE, "PluginTestFunction", [callbackID, Argus1, Argus2, Argus3, Argus4]);  
        },  
        PluginTestFunctionArrayArgu : function (Argus, successCallback, errorCallback )   
        {  
            var success = typeof successCallback !== 'function' ? null : function(args)   
            {  
                successCallback(args);  
            },  
            fail = typeof errorCallback !== 'function' ? null : function(code)   
            {  
                errorCallback(code);  
            };  
            callbackID = B.callbackId(success, fail);  
            return B.exec(_BARCODE, "PluginTestFunctionArrayArgu", [callbackID, Argus]);  
        },        
        // 声明同步返回方法  
        PluginTestFunctionSync : function (Argus1, Argus2, Argus3, Argus4)   
        {              
            // 通知Native层plugintest扩展插件运行“PluginTestFunctionSync”方法并同步返回结果                         
            return B.execSync(_BARCODE, "PluginTestFunctionSync", [Argus1, Argus2, Argus3, Argus4]);  
        },  
        PluginTestFunctionSyncArrayArgu : function (Argus)   
        {                                     
            return B.execSync(_BARCODE, "PluginTestFunctionSyncArrayArgu", [Argus]);  
        }  
    };  
    window.plus.plugintest = plugintest;  
}, true );

HTML使用示例

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
        <meta name="HandheldFriendly" content="true"/>  
        <meta name="MobileOptimized" content="320"/>  
        <title>H5Plugin</title>  
        <script type="text/javascript" src="./js/common.js"></script>  
        <script type="text/javascript" src="./js/test.js"></script>  
        <script type="text/javascript">  

        function pluginShow() {  
            plus.plugintest.PluginTestFunction("Html5","Plus","AsyncFunction","MultiArgument!", function( result ) {alert( result[0]  + "_" + result[1]  + "_" + result[2]  + "_" + result[3] );},function(result){alert(result)});  
        }  

        function pluginShowArrayArgu() {  
            plus.plugintest.PluginTestFunctionArrayArgu( ["Html5","Plus","AsyncFunction","ArrayArgument!"], function( result ) {alert( result );},function(result){alert(result)});  
        }  

        function pluginGetString()  
        {  
            alert(plus.plugintest.PluginTestFunctionSync("Html5","Plus","SyncFunction","MultiArgument!"));  
        }  

        function pluginGetStringArrayArgu()  
        {  
            var Argus = plus.plugintest.PluginTestFunctionSyncArrayArgu(["Html5","Plus","SyncFunction","ArrayArgument!"]);  
            alert( Argus.RetArgu1 + "_" +  Argus.RetArgu2 + "_" + Argus.RetArgu3  + "_" + Argus.RetArgu4 );  
        }  

        </script>  
        <link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8"/>  
    </head>  
    <body>  
        <header>  
            <div class="nvbt" onclick="back();"><div class="iback"></div></div>  
            <div class="nvtt">PluginTest</div>  
        </header>  
        <div id="dcontent" class="dcontent">  
            <br/>  
             <div class="button" onclick="pluginShow()">PluginTestFunction()</div>  
            <div class="button" onclick="pluginShowArrayArgu()">PluginTestFunctionArrayArgu()</div>  
            <div class="button" onclick="pluginGetString()">PluginTestFunctionSync()</div>  
            <div class="button" onclick="pluginGetStringArrayArgu()">PluginTestFunctionSyncArrayArgu()</div>      
            <br/>  
        </div>  
    </body>  
</html>

IOS平台第三方插件开发指导

准备：

首先需下载H5+ 的IOS平台离线打包SDK（下载地址：http://ask.dcloud.net.cn/article/103
在MAC平台解压后打开HBuilder-plugin工程。

开发步骤

一 创建插件类

开发者新创建的类需要继承“PGPlugin”类实现第三方插件扩展。

1. 创建一个继承自“PGPlugin”类的Objective-c类
2. 在源文件中引入头文件“PGPlugin.h”和“PGMethod.h”

二 编写插件的方法

开发者可根据需求，在JS层通过调用不同的JS Plugin Bridge方法，将扩展方法定义为同步执行或异步执行。
同步执行的方法会阻塞当前JS代码的执行，并同步获取Native层扩展方法返回的运行结果。
异步执行方法不会阻塞当前JS代码的执行，需要开发者用回调的方式接收Native层的执行结果。
但需要注意，在调用plus.bridge.exec或plus.bridge.execSync方法时，传入的第一个参数是插件的别名，开发者需要声明别名和Native代码类名的对应关系。传入的第二个参数(调用插件的方法名)，需要和要调用的扩展插件的方法名一致，否则无法通过JS调用到Native层扩展类方法。

异步方法：

开发者在编写异步方法时可通过PGPlugin类的回调方法将Native扩展方法运行结果返回到调用页面。使用方法如下
Native层代码实现

- (void)PluginTestFunctionArrayArgu:(PGMethod*)commands  
{  
    if ( commands ) {  

        // CallBackid 异步方法的回调id，H5+ 会根据回调ID通知JS层运行结果成功或者失败  
        NSString* cbId = [commands.arguments objectAtIndex:0];  

        // 用户的参数会在第二个参数传回，可以按照Array方式传入，  
        NSArray* pArray = [commands.arguments objectAtIndex:1];  

        // 如果使用Array方式传递参数  
        NSString* pResultString = [NSString stringWithFormat:@"%@ %@ %@ %@",[pArray objectAtIndex:0], [pArray objectAtIndex:1], [pArray objectAtIndex:2], [pArray objectAtIndex:3]];  

        // 运行Native代码结果和预期相同，调用回调通知JS层运行成功并返回结果  
        PDRPluginResult *result = [PDRPluginResult resultWithStatus:PDRCommandStatusOK messageAsString:pResultString];  

        // 如果Native代码运行结果和预期不同，需要通过回调通知JS层出现错误，并返回错误提示  
        //PDRPluginResult *result = [PDRPluginResult resultWithStatus:PDRCommandStatusError messageAsString:@"惨了! 出错了！ 咋(wu)整(liao)"];  

        // 通知JS层Native层运行结果，JS Pluginbridge会根据cbid找到对应的回调方法并触发  
        [self toCallback:cbId withReslut:[result toJSONString]];  
    }  
}

JS 层代码实现

        PluginTestFunction : function (Argus1, Argus2, Argus3, Argus4, successCallback, errorCallback )   
        {  
            var success = typeof successCallback !== 'function' ? null : function(args)   
            {  
                successCallback(args);  
            },  
            fail = typeof errorCallback !== 'function' ? null : function(code)   
            {  
                errorCallback(code);  
            };  
// 将两个callback方法进行封装，并生成一个CallbackID传递给Native层  
            callbackID = B.callbackId(success, fail);  
// 通知Native层plugintest扩展插件运行”PluginTestFunction”方法  
            return B.exec(_BARCODE, "PluginTestFunction", [callbackID, Argus1, Argus2, Argus3, Argus4]);  
        },  

同步方法：

同步扩展方法可通过返回值的方式，将Native层扩展插件的运行结果返回给调用该方法的HTML页面。同步方法返回值类型为NSData，传入参数为PGMethod类型。在返回结果较复杂时建议用户使用JSON格式的字符串。

- (NSData*)PluginTestFunctionSync:(PGMethod*)command  
{  
    // 根据传入获取参数  
    NSString* pArgument1 = [command.arguments objectAtIndex:0];  
    NSString* pArgument2 = [command.arguments objectAtIndex:1];  
    NSString* pArgument3 = [command.arguments objectAtIndex:2];  
    NSString* pArgument4 = [command.arguments objectAtIndex:3];  

    // 拼接成字符串  
    NSString* pResultString = [NSString stringWithFormat:@"%@ %@ %@ %@", pArgument1, pArgument2, pArgument3, pArgument4];  

    // 按照字符串方式返回结果  
    return [self resultWithString: pResultString];  
}

三 关联JS插件名和原生类

开发者在编写扩展插件时需要在JS层定义一个扩展插件的别名，并需要在改方法被调用之前，在H5+基座中注册项两者之间的对应关系。否则5+SDK无法准确的找到Native层的扩展插件。

5+ SDK 提供了两种注册对应关系的方式。
在plist文件中声明对应关系

在编写JS时同时需要修改PandoraAPI.bundle中feature.plist文件，在其中添加JS插件别名和Native插件类的对应关系，SDK基座会根据对应关系查找并生成相应的Native对象并执行对应的方法。

调用PDRCore的接口声明对应关系

开发者还可以通过调用PDRCore提供的设置接口来声明对应关系，该接口不但可以设置JS别名和Native扩展类名之间的关系，还可以注册扩展插件的JS层代码。该声明方法通常在PDRCore初始化后调用。开发者也可以自行决定声明的时机，但是必须在调用该扩展方法的html页面加载之前执行声明。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  
{  
    PDRCore* core = [PDRCore Instance];  
    // Override point for customization after application launch.  

    //添加一个自定义插件  
    NSError *error = nil;  
    NSString *JSPath = [[NSBundle mainBundle] pathForResource:@"Pandora/apps/H5Plugin/www/js/test-inner" ofType:@"js"];  
    NSString *logPluginJS = [NSString stringWithContentsOfFile:JSPath  
                                                      encoding:NSUTF8StringEncoding  
                                                         error:&error];  

    [core regPluginWithName:@"plugintest" impClassName:@"PGPluginTest" type:PDRExendPluginTypeFrame javaScript:logPluginJS];  

    return YES;  
}                                                                 

四 代码实例

PluginTest.h

//  
//  PluginTest.h  
//  HBuilder-Hello  
//  
//  Created by Mac Pro on 14-9-3.  
//  Copyright (c) 2014年 DCloud. All rights reserved.  
//  

#include "PGPlugin.h"  
#include "PGMethod.h"  
#import <Foundation/Foundation.h>  

@interface PGPluginTest : PGPlugin  

- (void)PluginTestFunction:(PGMethod*)command;  
- (void)PluginTestFunctionArrayArgu:(PGMethod*)command;  

- (NSData*)PluginTestFunctionSync:(PGMethod*)command;  
- (NSData*)PluginTestFunctionSyncArrayArgu:(PGMethod*)command;  
@end

PluginTest.m

//  
//  PluginTest.m  
//  HBuilder-Hello  
//  
//  Created by Mac Pro on 14-9-3.  
//  Copyright (c) 2014年 DCloud. All rights reserved.  
//  

#import "PluginTest.h"  
@implementation PGPluginTest  

- (void)PluginTestFunction:(PGMethod*)commands  
{  
    if ( commands ) {  

        // CallBackid 异步方法的回调id，H5+ 会根据回调ID通知JS层运行结果成功或者失败  
        NSString* cbId = [commands.arguments objectAtIndex:0];  

        // 用户的参数会在第二个参数传回  
        NSString* pArgument1 = [commands.arguments objectAtIndex:1];  
        NSString* pArgument2 = [commands.arguments objectAtIndex:2];  
        NSString* pArgument3 = [commands.arguments objectAtIndex:3];  
        NSString* pArgument4 = [commands.arguments objectAtIndex:4];  

        // 如果使用Array方式传递参数  
        NSArray* pResultString = [NSArray arrayWithObjects:pArgument1, pArgument2, pArgument3, pArgument4, nil];  

        // 运行Native代码结果和预期相同，调用回调通知JS层运行成功并返回结果  
        PDRPluginResult *result = [PDRPluginResult resultWithStatus:PDRCommandStatusOK messageAsArray: pResultString];  

        // 如果Native代码运行结果和预期不同，需要通过回调通知JS层出现错误，并返回错误提示  
        //PDRPluginResult *result = [PDRPluginResult resultWithStatus:PDRCommandStatusError messageAsString:@"惨了! 出错了！ 咋(wu)整(liao)"];  

        // 通知JS层Native层运行正确结果  
        [self toCallback:cbId withReslut:[result toJSONString]];  
    }  
}  

- (void)PluginTestFunctionArrayArgu:(PGMethod*)commands  
{  
    if ( commands ) {  

        // CallBackid 异步方法的回调id，H5+ 会根据回调ID通知JS层运行结果成功或者失败  
        NSString* cbId = [commands.arguments objectAtIndex:0];  

        // 用户的参数会在第二个参数传回，可以按照Array方式传入，  
        NSArray* pArray = [commands.arguments objectAtIndex:1];  

        // 如果使用Array方式传递参数  
        NSString* pResultString = [NSString stringWithFormat:@"%@ %@ %@ %@",[pArray objectAtIndex:0], [pArray objectAtIndex:1], [pArray objectAtIndex:2], [pArray objectAtIndex:3]];  

        // 运行Native代码结果和预期相同，调用回调通知JS层运行成功并返回结果  
        PDRPluginResult *result = [PDRPluginResult resultWithStatus:PDRCommandStatusOK messageAsString:pResultString];  

        // 如果Native代码运行结果和预期不同，需要通过回调通知JS层出现错误，并返回错误提示  
        //PDRPluginResult *result = [PDRPluginResult resultWithStatus:PDRCommandStatusError messageAsString:@"惨了! 出错了！ 咋(wu)整(liao)"];  

        // 通知JS层Native层运行结果  
        [self toCallback:cbId withReslut:[result toJSONString]];  
    }  
}  

- (NSData*)PluginTestFunctionSync:(PGMethod*)command  
{  
    // 根据传入获取参数  
    NSString* pArgument1 = [command.arguments objectAtIndex:0];  
    NSString* pArgument2 = [command.arguments objectAtIndex:1];  
    NSString* pArgument3 = [command.arguments objectAtIndex:2];  
    NSString* pArgument4 = [command.arguments objectAtIndex:3];  

    // 拼接成字符串  
    NSString* pResultString = [NSString stringWithFormat:@"%@ %@ %@ %@", pArgument1, pArgument2, pArgument3, pArgument4];  

    // 按照字符串方式返回结果  
    return [self resultWithString: pResultString];  
}  

- (NSData*)PluginTestFunctionSyncArrayArgu:(PGMethod*)command  
{  
    // 根据传入参数获取一个Array，可以从中获取参数  
    NSArray* pArray = [command.arguments objectAtIndex:0];  

    // 创建一个作为返回值的NSDictionary  
    NSDictionary* pResultDic = [NSDictionary dictionaryWithObjects:pArray forKeys:[NSArray arrayWithObjects:@"RetArgu1",@"RetArgu2",@"RetArgu3", @"RetArgu4", nil]];  

    // 返回类型为JSON，JS层在取值是需要按照JSON进行获取  
    return [self resultWithJSON: pResultDic];  
}  

@end

iOS平台插件开发API：

PDRPlugin

扩展插件的基类，开发者编写的插件需要继承自此类。

常用方法：

(void)toCallback:(NSString *)callbackId withReslut:(NSString *)message

调用JS层回调函数。

扩展API原型

同步方法：

开发者需要实现同步方法需要实现此方法，如有JS层需要返回值，需要从方法的返回值返回。

(NSData*)syncMethodName:(PGMethod *)command

异步方法：

开发者需要实现的异步方法需要实现此方法，如有JS层需要通知运行结果和返回值可以调用 “toCallback”方法通知JS层运行结果。

(void)asyncMethodName:(PGMethod *)command

同步方法返回值处理方法：

(NSData* ) resultWithInt:(int)value  
(NSData* ) resultWithJSON:(int)value

PDRMethod

扩展插件方法传入的参数，扩展插件定义的方法需要使用此类传入参数  

属性：
NSArray* arguments 字符串数组，根据JS层参数的传入顺序获取传递的参数。

PDRPluginResult

扩展插件的异步调用方法返回值处理类，开发者可使用此类快速将要返回的结果格式化。
返回值类型：
boolea类型： resultWithStatus:OK messageAsInt:1 );
Number类型： resultWithStatus:OK messageAsInt:99 );
String类型： resultWithStatus:OK messageAsString:@"hello" );
数组类型： resultWithStatus:OK messageAsArray:[@"123",@"456",nill] );
JSON类型： resultWithStatus:OK messageAsDictionary:{@"name":@"value"} );
示例：

PDRPluginResult *result = [PDRPluginResult resultWithStatus:PDRCommandStatusOK messageAsString:@"123123"];  
[self toCallback:cbId withReslut:[result toJSONString]];

PDRCore

HTML5+基座的管理类，可以用来设置下载目录，文档目录，和添加扩展插件的关联
常用方法：

- (int)regPluginWithName:(NSString*)pluginName  impClassName:(NSString*)impClassName  
                    type:(PDRExendPluginType)pluginType  javaScript:(NSString*)javaScript;

参数说明：
pluginName： 插件名称JS文件中定义的名字
impClassName： 插件对应的实现类名
pluginType： 插件类型
javaScript js： 实现 为javascript文本

术语字典

JS Plugin Bridge： H5+ Plugin Bridge层JS部分API，用户通过调用相应的API触发Native层扩展插件相应方法的调用。
Native Plugin Bridge: H5+ Plugin Bridge层Native部分API，开发者通过实现接口类方法，实现由JS层触发Native层扩展插件逻辑。开发者调用API实现Native扩展方法运行结果得返回。
Native层插件：开发者使用原生语言实现的5+扩展插件，可被JS层通知调用。
插件类别名：JS层字符串，用来声明JS方法和Native层插件的对应关系

Android平台开发第三方插件请参考

Android平台第三方插件开发指导

5+原生插件将不再继续维护，建议开发者升级应用为uni-app项目并使用uni原生插件。uni原生插件文档

本文为5+app插件开发指南。uni-app请另外参考文档：https://ask.dcloud.net.cn/article/35428

欢迎有原生开发能力的朋友入群一起交流学习（入群请提供注册邮箱）：
DCloud原生开发者群：
1群：256775471
2群：814228233
3群：455763866

技术架构

HTML5+ 基座扩展采用三层结构，JS层、PluginBridge层和Native层。 三层功能分别是：
JS层： 在Webview页面调用，触发Native层代码，获取执行结果。
PluginBridge层： 将JS层请求进行处理，触发Native层扩展插件代码。
Native层： 插件扩展的平台原生代码，负责执行业务逻辑并执行结果返回到请求页面。

开发者在编写扩展插件的JS时需要调用Javascript Plugin Bridge的API用来完成对Native层代码的调用和运行结果的返回。在实际应用中，开发者可以根据扩展方法的实际需求不同，将插件的扩展方法设置为同步执行或异步执行。

同步执行的扩展方法会阻塞当前JS代码的执行，直到Native层插件扩展方法执行完毕。异步扩展方法不会阻塞当前JS代码的执行，使用者需要设置回调方法接收Native层返回的执行结果，开发者需要在插件中调用 Native plugin brigde的方法将执行结果返回到请求页面。

工程示例请参考SDK内包含的HBuilder-Integrate工程，工程里已经整合了插件开发和集成方式的示例。

扩展插件工作流程

异步方法的执行不会阻塞当前JS的运行，方法的执行结果会通过回调的方式返回。
插件异步扩展方法：

扩展插件JS API 编写

开发者在实现JS层API时首先要定义一个插件类的别名，并需要在Android工程的assets\data\properties.xml文件中声明插件类别名和Native层扩展插件类的对应关系

<properties>  
    <features>  
        <feature name="plugintest" value="com.example.H5PlusPlugin.PGPlugintest"></feature>  
</properties>

示例中为方便查看删除了其他插件的代码，开发者在可根据5+应用使用插件的情况进行增删修改。
Feature节点下声明的插件将会在调用时创建相应的对象。

JS扩展方法的实现

同步返回JS扩展方法实现
在实现同步扩展方法时，开发者需要调用JS Plugin Bridge的window.plus.bridge.execSync()
方法，该方法可同步获取Native插件返回的运行结果。

void plus.bridge.execSync( String service, String action, Array<String> args );

service: 插件类别名
action: 调用Native层插件方法名称。
args： 参数列表。

异步返回JS扩展方法实现
在实现异步扩展方法时，开发者需要调用JS Plugin Bridge的plus.bridge.exec()方法，该方法会通知Native层插件执行指定方法，运行结果会通过回调的方式通知JS层

void plus.bridge.exec( String service, String action, Array<String> args );

service: 插件类别名
action: 调用Native层插件方法名称。
args： 参数列表。

扩展插件JS API代码示例：

! function(root, factory) {  
    if (typeof exports == 'object' && typeof module != 'undefined') {  
        module.exports = factory()  
    } else if (typeof define == 'function' && define.amd) {  
        define(factory)  
    } else {  
        /**  
         * 插件对象直接扩展到 window 对象上  
         * 这个对象的名字，需要自己填写一下。例如：plugintest  
         */  
        var moduleName = 'plugintest';  
        root[moduleName] = factory()  
    }  
}(this, function() {  
    var _BARCODE = 'plugintest';  
    var plugintest = {  
        PluginTestFunction: function(Argus1, Argus2, Argus3, Argus4, successCallback, errorCallback) {  
            var success = typeof successCallback !== 'function' ? null : function(args) {  
                    successCallback(args);  
                },  
                fail = typeof errorCallback !== 'function' ? null : function(code) {  
                    errorCallback(code);  
                };  
            callbackID = plus.bridge.callbackId(success, fail);  

            return plus.bridge.exec(_BARCODE, "PluginTestFunction", [callbackID, Argus1, Argus2, Argus3, Argus4]);  
        },  
        PluginTestFunctionArrayArgu: function(Argus, successCallback, errorCallback) {  
            var success = typeof successCallback !== 'function' ? null : function(args) {  
                    successCallback(args);  
                },  
                fail = typeof errorCallback !== 'function' ? null : function(code) {  
                    errorCallback(code);  
                };  
            callbackID = plus.bridge.callbackId(success, fail);  
            return plus.bridge.exec(_BARCODE, "PluginTestFunctionArrayArgu", [callbackID, Argus]);  
        },  
        PluginTestFunctionSync: function(Argus1, Argus2, Argus3, Argus4) {  
            return plus.bridge.execSync(_BARCODE, "PluginTestFunctionSync", [Argus1, Argus2, Argus3, Argus4]);  
        },  
        PluginTestFunctionSyncArrayArgu: function(Argus) {  
            return plus.bridge.execSync(_BARCODE, "PluginTestFunctionSyncArrayArgu", [Argus]);  
        }  
    };  
    return plugintest;  
});

Html使用示例

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
        <meta name="HandheldFriendly" content="true"/>  
        <meta name="MobileOptimized" content="320"/>  
        <title>H5Plugin</title>  
        <script type="text/javascript" src="./js/common.js"></script>  
        <script type="text/javascript" src="./js/test.js"></script>  
        <script type="text/javascript">  

        function pluginShow() {  
            plus.plugintest.PluginTestFunction("Html5","Plus","AsyncFunction","MultiArgument!", function( result ) {alert( result[0]  + "_" + result[1]  + "_" + result[2]  + "_" + result[3] );},function(result){alert(result)});  
        }  

        function pluginShowArrayArgu() {  
            plus.plugintest.PluginTestFunctionArrayArgu( ["Html5","Plus","AsyncFunction","ArrayArgument!"], function( result ) {alert( result );},function(result){alert(result)});  
        }  

        function pluginGetString()  
        {  
            alert(plus.plugintest.PluginTestFunctionSync("Html5","Plus","SyncFunction","MultiArgument!"));  
        }  

        function pluginGetStringArrayArgu()  
        {  
            var Argus = plus.plugintest.PluginTestFunctionSyncArrayArgu(["Html5","Plus","SyncFunction","ArrayArgument!"]);  
            alert( Argus.RetArgu1 + "_" +  Argus.RetArgu2 + "_" + Argus.RetArgu3  + "_" + Argus.RetArgu4 );  
        }  

        </script>  
        <link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8"/>  
    </head>  
    <body>  
        <header>  
            <div class="nvbt" onclick="back();"><div class="iback"></div></div>  
            <div class="nvtt">PluginTest</div>  
        </header>  
        <div id="dcontent" class="dcontent">  
            <br/>  
             <div class="button" onclick="pluginShow()">PluginTestFunction()</div>  
            <div class="button" onclick="pluginShowArrayArgu()">PluginTestFunctionArrayArgu()</div>  
            <div class="button" onclick="pluginGetString()">PluginTestFunctionSync()</div>  
            <div class="button" onclick="pluginGetStringArrayArgu()">PluginTestFunctionSyncArrayArgu()</div>      
            <br/>  
        </div>  
    </body>  
</html>

uni-app 使用示例
uni-app 中无需主动监听 plusready，可以直接调用 plus 相关的 API。

<template>  
    <view>  
        <button @click="pluginShow">pluginShow</button>  
    </view>  
</template>  
<script>  
// 扩展的 js 文件的位置：common/plugins.js  
    var plugins = require('../../common/plugins.js')  
    export default {  
        data() {  
            return {  
                plugins: plugins  
            };  
        },  
        methods: {  
            pluginShow() {  
                this.plugins.PluginTestFunction("Html5", "Plus", "AsyncFunction", "MultiArgument!", function(result) {  
                    console.log(result[0] + "_" + result[1] + "_" + result[2] + "_" + result[3]);  
                }, function(result) {  
                    console.log(result)  
                });  
            }  
        }  
    }  
</script>  
<style>  

</style>

Android第三方插件开发指导

准备

首先要下载HTML5+基座的Android版SDK点击下载解压后将HBuilder-Integrate工程导入到ADT中。

uni-app插件开发

android平台：uni-app插件开发

老接口实现方式

开发步骤

创建插件类
开发者创建的扩展插件类应当继承自“IFeature”类实现第三方插件扩展。
创建插件类需要引入的包

import io.dcloud.common.DHInterface.AbsMgr;  
import io.dcloud.common.DHInterface.IFeature;  
import io.dcloud.common.DHInterface.IWebview;  
import io.dcloud.common.util.JSUtil;

实现接口类的“excute”方法
excute方法负责接收由html页面发起的扩展插件调用请求，并负责根据传入参数运行执行对应的业务。
“execute”方法的“action”参数传入的是JS类的方法名，类型为String。开发者需要在方法中通过字符串匹配来处理请求的逻辑。“pArgs”参数为字符串列表对象，如JS层调用的方法有传入参数，会通过该参数传递到Native的方法中，方法的传入顺序和JS层传入顺序一致。
开发者在实现同步和异步接口运行结果返回时调用的API是不同的
同步执行方法：
同步执行方法在返回结果时可以直接将结果以return的形式返回给js层，返回的结果需要调用

JSUtil.wrapJsVar("Html5 Plus Plugin Hello1!",true);

处理要返回的字符串，也可调用其他方法处理其他返回值类型（参考io.dclod.util.JSUtil的返回方法）。
异步执行方法：
异步方法开发者需要调用

JSUtil.execCallback(pWebview, cbId, (which==AlertDialog.BUTTON_POSITIVE)?"ok":"cancel", JSUtil.OK, false, false); 

代码实例

package com.example.H5PlusPlugin;  

import io.dcloud.common.DHInterface.AbsMgr;  
import io.dcloud.common.DHInterface.IFeature;  
import io.dcloud.common.DHInterface.IWebview;  
import io.dcloud.common.util.JSUtil;  

import org.json.JSONArray;  
import org.json.JSONException;  
import org.json.JSONObject;  

import android.annotation.SuppressLint;  
import android.annotation.TargetApi;  
import android.os.Build;  

public class PGPlugintest implements IFeature  
{  
    @Override  
    public void init(AbsMgr arg0, String arg1) {  
        // TODO Auto-generated method stub  

    }  

    @SuppressWarnings("deprecation")  
    @TargetApi(Build.VERSION_CODES.CUPCAKE)  
    @SuppressLint("NewApi")  
    @Override  
    public String execute(final IWebview pWebview, final String action, final String[] pArgs) {  
        // TODO Auto-generated method stub  
        //Context context = pWebview.getContext();  

        if ("PluginTestFunction".equals(action))  
        {  
            String CallBackID = pArgs[0];  
            JSONArray newArray = new JSONArray();  
            newArray.put(pArgs[1]);  
            newArray.put(pArgs[2]);  
            newArray.put(pArgs[3]);  
            newArray.put(pArgs[4]);  

            JSUtil.execCallback(pWebview, CallBackID, newArray, JSUtil.OK, false);  
        }  
        else if("PluginTestFunctionArrayArgu".equals(action))  
        {  
            String ReturnString = null;  
            String CallBackID =  pArgs[0];  
            JSONArray newArray = null;  
            try {  

                newArray = new JSONArray(pArgs[1]);           
                String inValue1 = newArray.getString(0);  
                String inValue2 = newArray.getString(1);  
                String inValue3 = newArray.getString(2);  
                String inValue4 = newArray.getString(3);  
                ReturnString = inValue1 + "-" + inValue2 + "-" + inValue3 + "-" + inValue4;  
            } catch (JSONException e) {  
                // TODO Auto-generated catch block  
                e.printStackTrace();  
            }  

            JSUtil.execCallback(pWebview, CallBackID, ReturnString, JSUtil.OK, false);  

        }else if("PluginTestFunctionSync".equals(action))  
        {  
            String inValue1 = pArgs[0];  
            String inValue2 = pArgs[1];  
            String inValue3 = pArgs[2];  
            String inValue4 = pArgs[3];  

            String ReturnValue = inValue1 + "-" + inValue2 + "-" + inValue3 + "-" + inValue4;  
            return JSUtil.wrapJsVar(ReturnValue,true);  

        }else if("PluginTestFunctionSyncArrayArgu".equals(action))  
        {  
            JSONArray newArray = null;  
            JSONObject retJSONObj = null;  
            try {  
                newArray = new JSONArray(pArgs[0]);  
                String inValue1 = newArray.getString(0);  
                String inValue2 = newArray.getString(1);  
                String inValue3 = newArray.getString(2);  
                String inValue4 = newArray.getString(3);  

                retJSONObj = new JSONObject();  
                retJSONObj.putOpt("RetArgu1", inValue1);  
                retJSONObj.putOpt("RetArgu2", inValue2);  
                retJSONObj.putOpt("RetArgu3", inValue3);  
                retJSONObj.putOpt("RetArgu4", inValue4);  

            } catch (JSONException e1) {  
                // TODO Auto-generated catch block  
                e1.printStackTrace();  
            }         

            return JSUtil.wrapJsVar(retJSONObj);  

        }  
        return null;  
    }  

    @Override  
    public void dispose(String arg0) {  
        // TODO Auto-generated method stub  

    }  
}

新接口实现方式

创建插件类
创建一个继承自StandardFeature的类，实现第三方插件扩展。
创建插件类需要引入的包
import io.dcloud.DHInterface.IWebview;
import io.dcloud.DHInterface.StandardFeature;
import io.dcloud.util.JSUtil;
实现扩展方法
Native层扩展插件的方法名需要和JS Plugin Bridge里windows.plus.bridge.exec()或windows.plus.bridge.execSync()方法的第二个传入参数相同，否则无法调用到指定的方法。

public void PluginTestFunction(IWebview pWebview, JSONArray array)

扩展方法有两个传入参数
IWebview pWebview 发起请求的webview，
JSONArray array JS请求传入的参数

开发者在实现同步和异步接口运行结果返回时调用的API是不同的
同步执行方法：
同步执行方法在返回结果时可以直接将结果以return的形式返回给js层，返回的结果需要调用

JSUtil.wrapJsVar("Html5 Plus Plugin Hello1!",true);

处理要返回的字符串，也可调用其他方法处理其他返回值类型（参考io.dclod.util.JSUtil的返回方法）。
异步执行方法：
异步方法开发者需要调用

JSUtil.execCallback(pWebview, cbId, (which==AlertDialog.BUTTON_POSITIVE)?"ok":"cancel", JSUtil.OK, false, false); 

代码示例

package com.example.H5PlusPlugin;  
import io.dcloud.common.DHInterface.IWebview;  
import io.dcloud.common.DHInterface.StandardFeature;  
import io.dcloud.common.util.JSUtil;  

import org.json.JSONArray;  
import org.json.JSONException;  
import org.json.JSONObject;  

public class PGPlugintest extends StandardFeature  
{     
    public void PluginTestFunction(IWebview pWebview, JSONArray array)  
    {  
        String CallBackID = array.optString(0);  
        JSONArray newArray = new JSONArray();  
        newArray.put(array.optString(1));  
        newArray.put(array.optString(2));  
        newArray.put(array.optString(3));  
        newArray.put(array.optString(4));  
        JSUtil.execCallback(pWebview, CallBackID, newArray, JSUtil.OK, false);  

    }  

    public void PluginTestFunctionArrayArgu(IWebview pWebview, JSONArray array)  
    {  
        String ReturnString = null;  
        String CallBackID =  array.optString(0);  
        JSONArray newArray = null;  
        try {  

            newArray = new JSONArray( array.optString(1));            
            String inValue1 = newArray.getString(0);  
            String inValue2 = newArray.getString(1);  
            String inValue3 = newArray.getString(2);  
            String inValue4 = newArray.getString(3);  
            ReturnString = inValue1 + "-" + inValue2 + "-" + inValue3 + "-" + inValue4;  
        } catch (JSONException e) {  
            // TODO Auto-generated catch block  
            e.printStackTrace();  
        }  

        JSUtil.execCallback(pWebview, CallBackID, ReturnString, JSUtil.OK, false);  
    }  

    public String PluginTestFunctionSyncArrayArgu(IWebview pWebview, JSONArray array)  
    {  
        JSONArray newArray = null;  
        JSONObject retJSONObj = null;  
        try {  

            newArray = array.optJSONArray(0);  
            String inValue1 = newArray.getString(0);  
            String inValue2 = newArray.getString(1);  
            String inValue3 = newArray.getString(2);  
            String inValue4 = newArray.getString(3);  

            retJSONObj = new JSONObject();  
            retJSONObj.putOpt("RetArgu1", inValue1);  
            retJSONObj.putOpt("RetArgu2", inValue2);  
            retJSONObj.putOpt("RetArgu3", inValue3);  
            retJSONObj.putOpt("RetArgu4", inValue4);  

        } catch (JSONException e1) {  
            // TODO Auto-generated catch block  
            e1.printStackTrace();  
        }         

        return JSUtil.wrapJsVar(retJSONObj);  
    }  

    public String PluginTestFunctionSync(IWebview pWebview, JSONArray array)  
    {  
        String inValue1 = array.optString(0);  
        String inValue2 = array.optString(1);  
        String inValue3 = array.optString(2);  
        String inValue4 = array.optString(3);  

        String ReturnValue = inValue1 + "-" + inValue2 + "-" + inValue3 + "-" + inValue4;  
        return JSUtil.wrapJsVar(ReturnValue,true);  
    }  

}  

三 关联JS插件名和原生类

在编写扩展插件时需要修改“/assets/data”中properties.xml文件，在其中添加JS对象名称和Android包的类名对应关系，SDK会根据对应的类名查找并生成相应的对象并执行对应的逻辑。

Android平台插件开发API

io.dcloud.DHInterface.IFeature

扩展插件接口类，Android平台的扩展插件应当继承自此接口类并实现接口方法。

常用方法说明:

String execute(IWebview pWebView, String action, String[] pArgs);

执行扩展插件的方法，调用native代码实现具体的操作。
pWebView： 扩展插件方法运行的窗口
action： 调用插件方法的名称
args： 调用插件方法使用的参数列表

io.dcloud.util.JSUtil

常用方法说明：

String wrapJsVar(String value, boolean isString);

转换JS层的返回值，也用于异步接口中回调函数的参数。
参数说明：
value： 要返回到JS层的值
isString：返回值类型是否为原始字符串
返回方法：
boolea类型： wrapJSVar( "true", false );
Number类型： wrapJsVar( "99", false );
String类型： wrapJsVar( "hello", true );
数组类型： wrapJsVar( "[1,2,3,4,5]", false );
JSON类型： wrapJsVar( "{'name':'value'}", false );

String execCallback(IWebview pWebView, String pCallbackId, String pMessage, int pStatus, boolean isJson, boolean pKeepCallback);

触发扩展插件中的回调方法。

参数说明：
pWebView：扩展插件方法运行的窗口
pCallbackId：回调函数的唯一标识
pMessage：回调函数的参数
pStatus：操作是否成功，成功则使用JSUtil.OK，否则使用错误代码
isJson：回调函数参数是否为JSON数据
pKeepCallback：是否可多次触发回调函数

术语字典

JS Plugin Bridge： H5+ Plugin Bridge层JS部分API，用户通过调用相应的API触发Native层扩展插件相应方法的调用。
Native Plugin Bridge: H5+ Plugin Bridge层Native部分API，开发者通过实现接口类方法，实现由JS层触发Native层扩展插件逻辑。开发者调用API实现Native扩展方法运行结果得返回。
Native层插件：开发者使用原生语言实现的5+扩展插件，可被JS层通知调用。
插件类别名：JS层字符串，用来声明JS方法和Native层插件的对应关系

IOS平台开发第三发插件请参考

IOS平台第三发插件开发指导

此文档不再维护，请参考新文档地址：https://uniapp.dcloud.io/tutorial/app-ios-schemes

如果你的App想要在手机系统中注册一个scheme协议，方便其他App调用你的App，那么可以根据本文设置。

设置UrlSchemes

可视化界面配置

打开项目的manifest.json文件，在“App常用其它设置”页面“iOS设置”下的UrlSchemes中配置scheme字段：

注意：多个scheme使用','分割

代码视图配置

打开项目的manifest.json文件，切换到“代码视图”

• 5+App项目
  在manifest.json文件的"plus"->"distribute"->"apple"节点下添加urltypes数据
• uni-app项目
  在manifest.json的"app-plus"->"distribute"->"ios"节点下添加urltypes数据

urltypes节点数据如下：

"plus": {  
    "distribute": {  
        "apple": {  
            "urltypes": [  
                    {  
                        "urlidentifier":"com.xxx.test",  
                        "urlschemes": [  
                            "test"  
                        ]  
                    }  
            ],  
            //...  
        },  
        //...  
    },  
    //...  
},  
//...

值域说明：urlidentifier为标识，可自定义，格式为反向域名格式；
urlschemes为要指定的scheme值，字符串数组，使用小写字母，可设置多个。 比如设置为test，那么其他App呼起你的app的scheme协议就是test://。

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

浏览器中通过href启动应用

安装应用后，我们可以在html页面中，通过href直接调用应用：

<a href="test://abc">test:<a><br/>

5+ APP中处理urlscheme启动传递的参数

在其它应用中通过href调用Url Scheme传递过来的值，可以通过plus.runtime.arguments获取
其值为完整的urlscheme字符串，如上面href的值启动应用后获取的plus.runtime.arguments值为“test://abc”。
代码示例如下：

document.addEventListener('plusready',function(){  
    checkArguments();  
},false);  
// 判断启动方式  
function checkArguments(){  
    console.log("plus.runtime.launcher: "+plus.runtime.launcher);  
    var args= plus.runtime.arguments;  
    if(args){  
        // 处理args参数，如打开新页面等  
    }  
}  
// 处理从后台恢复  
document.addEventListener('newintent',function(){  
    console.log("addEventListener: newintent");  
    checkArguments();  
},false);

uni-app中处理urlscheme启动传递的参数

在App.vue 中onLaunch 里获取

onLaunch: function() {  
      plus.globalEvent.addEventListener('newintent', (e)=>{  
            var args= plus.runtime.arguments;  
        if(args){  
                // 处理args参数，如直达到某新页面等  
        }  
        });  
}   

在App.vue的onShow里获取

onShow: function() {  
    setTimeout(function(){   
      var args= plus.runtime.arguments;  
    if(args){  
        // 处理args参数，如直达到某新页面等  
    }  
   },10);   
}

HBuilder/HBuilderX自带真机运行基座的UrlSchemes为"hbuilder://"，方便开发者调测。

如果是离线打包，自行在原生工程中配置

iOS平台设置UrlSchemes白名单
Android平台设置UrlSchemes，实现被第三方应用调用

在App开发中，页面间传值是很常见的开发需求，mui框架根据业务场景不同，提供了两种传值模式。
1、页面初始化时，通过扩展参数传值；
mui在初始化页面时，提供了extras配置参数，通过该参数可以设置页面参数，从而实现页面间传值；
mui框架在如下几种场景下，会执行页面初始化操作：

• 通过mui.openWindow()打开新页面（若目标页面为已预加载成功的页面，则在openWindow方法中传递的extras参数无效）；
• 通过mui.init()方法创建子页面；
• 通过mui.init()方法预加载页面；
• 通过mui.preload()方法预加载页面

示例，假设我们有如下需求：
在首页中打开关于页面时，传递当前产品名称及版本号，然后在关于页面中读取这两个参数并显示出来；

首页实现代码：

mui.openWindow({  
    url:'info.html',  
    id:'info.html',  
    extras:{  
        name:'mui',  
        version:'0.5.8'  
    }  
});

关于页面实现代码：

var self = plus.webview.currentWebview();  
var name = self.name;  
var version = self.version;

2、页面已创建，通过自定义事件传值
参考mui官网中自定义事件的介绍