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，我们签名后通过邮件回复。

注意：从2025年1月1日开始，DCloud公用证书重签服务将不再免费提供，将调整为每个App每年收费5000。

关于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官网中自定义事件的介绍

9宫格背景色修改：

.mui-table-view.mui-grid-9{  
      /*替换成自己的颜色*/  
     background-color: blue;  
}

单元格按下高亮颜色值：

.mui-table-view.mui-grid-9 .mui-table-view-cell.mui-active{  
       /*替换成自己的颜色*/  
    background-color: red;  
}

说明：这是针对老版本hello mui的一篇说明；mui 0.7.1之后，Hello mui已在首页增加了侧滑导航示例，可直接参考。

很多同学直接拷贝Hello mui中的侧滑导航示例，作为App的首页，发现侧滑效果总是和示例不同，很是疑惑；

其实，首页侧滑不生效的原因主要有两点：
1、首页面不是通过mui.openWindow()方法打开的，而是5+ runtime直接打开的，因此不会触发pagebeforeshow事件，故menu页面没创建成功，移动主页面后，漏出了更下方的loading界面；
2、hello mui中侧滑主界面zindex值为9999，menu页面zindex值为9998，在主界面下方，移动主界面会漏出其下方的menu界面；而App首页主界面的zindex值为0（mui.openWindow方法若不传zindex值，默认也是0），若再创建zindex值为9998的menu页面（zindex类似css中的z-index，值越大，显示越靠上），menu页面就会遮罩在主界面上方；

第一个问题的解决方法比较简单，使用plusReady事件代替pagebeforeshow事件即可；

第二个问题的解决，也比较简单，设置menu的zindex更低即可，比如设置为-1；

修改后的主页面代码如下：

mui.plusReady(function() {        
        var left = '0%';  
        if (slideTogether) {  
            left = '-70%';  
        }  
        //创建menu页面  
        menu = mui.createWindow({  
            id: 'offcanvas-plus-menu',  
            url: 'offcanvas-plus-menu.html',  
            styles: {  
                left: left,  
                width: '70%',  
                zindex:-1  
            }  
        });  
        if (menu) {  
            menu.show('none');  
        }  
    });

另外，首页的关闭通常采用toast提示的方式，对应需要修改。

注意：最新版mui已经不再占用$，所以不会存在$冲突的问题。

关于历史版本的mui，有三个解决思路：

1、放弃使用$，直接使用mui或jQuery；
比如：mui框架中$.openWindow方法，等价于mui.openWindow方法；
jquery框架中$.ready方法，等价于jQuery.ready方法；

这种方式使用范围最广，解决问题最彻底；

2、jquery放弃$符，启用其它别名
比如使用$$代替$使用jquery，这样可以就将$符让渡给了mui；

var $$=jQuery.noConflict();  
$$(document).ready(function(){  
     // jquery相关代码  
});

3、通过代码块的方式使用$符
如下方式使用mui中的$

(function($){  
$.plusReady(function(){  
     // mui相关代码  
});  
})(mui);

如下方式使用jquery中的$

(function($){  
$(document).ready(function(){  
     // jquery相关代码  
});  
})(jQuery);

这种方式无法处理mui和jquery代码交叉的情况，使用范围有限。

1、通过直观现象分析
预加载页面会立即打开，不会显示等待框；非预加载页面默认会先显示等待框，再显示新页面；
2、增加log分析预加载页面是否已创建
比如：A页面中预加载B页面，则在A页面完全加载（可通过setTimeout模拟）后，打印当前应用所有webview，看是否包含B页面的url，以此来分析。

例如：在A页面增加如下代码：

mui.plusReady(function(){  
    setTimeout(function(){  
        var array = plus.webview.all();  
        if(array){  
            for(var i=0,len=array.length;i<len;i++){  
                    console.log(array[i].getURL());  
                }  
        }  
    },5000)  
});

当然，如上代码仅能打印Android平台日志，ios平台可通过类似操作，比如将url作为某div的innerHTML显示在页面上。

构建索引是为了更快的语法提示。
就像Windows创建索引是为了更快搜索一样道理。

索引的速度与磁盘速度有非常大的关系，ssd硬盘会比较快。
索引时cpu也比较高。
在cpu和硬盘的压力下，在低配电脑上索引时敲代码确实可能会不太流畅。

如果工程下有不太需要提示的文件，比如《参考》这类的文件或目录，对他们点右键-移除在扫描范围外。

还可以在空闲时间做索引。先把工程索引停止，等到空闲时比如午饭时手动索引，对工程点右键-构建索引-重新构建项目，选择需要的项目构建。

没有索引的影响是：

1. HTML和css编写不影响
2. HTML里的class引用候选列表将缺少样式
3. js的标准语法不影响，比如敲document可以正常提示。但外部js里自定义的变量将不提示和不识别。

从Android3.0（API Level 11）开始，支持硬件加速，可充分利用GPU的特性，使得界面渲染更加平滑。
但是硬件加速自身并非完美，在某些Webview版本上，比如Android5初期的一些rom上的Webview版本是chrome37、38版本，由于其本身的硬件加速策略的bug，导致代码稍微给硬件一些压力，就会引发闪屏、花屏等渲染问题。

硬件加速的好处

硬件加速对渲染的流畅度有大幅提升。
在开启硬件加速后，上下拖动列表的感觉是没有跳帧的平滑拖动感，如果没有硬件加速，拖动时能感受到有丢帧。
在窗体切换动画上也类似，硬件加速开关对切换动画的影响很大。
对于video、canvas、webgl，没有硬件加速是没法商用的，Android webview里video标签里的视频如果没有硬件加速会看不到画面。

硬件加速的代价

硬件加速属于双缓冲机制，使用显存进行页面渲染（使用较少的物理内存），导致更频繁的显存操作，可能引起以下现象：
花屏、闪屏、分块渲染；
那么对于开发者，始终要注意降低页面的内存占用，给硬件加速腾出RAM。
具体参考http://ask.dcloud.net.cn/article/12837

硬件加速的开关控制

在5+App可以从两个级别对硬件加速进行控制：

App级别

程序级别开关是设置整个程序是否使用硬件加速，关闭后程序中所有页面将都不可使用硬件加速功能，可通过以下方式操作：

• HBuilder中配置的方法
  打开应用的manifest.json文件，切换到“代码视图”，在plus->distribute->google节点下添加“hardwareAccelerated”字段：
  
  
  
  要开启硬件加速设置值为true，关闭硬件加速则设置值为false。不配置的话默认是auto。
  保存提交到App云端打包才能生效。
• 离线打包配置的方法
  打开工程的AndroidManifest.xml文件，切换到代码视图模式，在application节点下修改“android:hardwareAccelerated”属性值：
  
  
  
  要开启硬件加速设置值为true，关闭硬件加速则设置值为false。
  保存后重新编译即可生效。

Webview窗口级别

除了App级别，还可以对单个Webview控制是否开启硬件加速功能，比如App关闭了硬件加速，但某个webview又打开了硬件加速：

• 新开Webview窗口是否开启硬件加速
  创建Webview窗口时（注意创建完毕再修改无效），可设置WebviewStyle参数的hardwareAccelerated属性值控制是否开启硬件加速：

  var styles = {hardwareAccelerated:true}; // true表示开启Webview的硬件加速，false表示关闭Webview的邮件加速  
  var webview = plus.webview.create( "url", "id", styles );     
  webview.show();

• 设置首页webview是否开启硬件加速
  上面的新开webview时设置硬件加速对首页是无效的，因为首页不是js创建的。首页webview的硬件加速单独配置需要在manifest里进行。
  注意此配置与全局设置不同，虽然都在manifest配置，但此配置仅是对首页生效的，并非全局App的硬件加速配置。
  打开应用的manifest.json文件，切换到“代码视图”，在plus节点下添加“hardwareAccelerated”字段：
  
  
  
  设置值为true表示开启硬件加速，false表示关闭硬件加速。

关于硬件加速默认的auto值的说明，即不同平台上5+runtime默认开启或关闭硬件加速的策略

参考：http://ask.dcloud.net.cn/article/12830
可以通过5+ API查询Webview默认硬件加速是否开启
但注意此api即defauleHardwareAccelerated，是我们的引擎的默认策略查询，开发者手动打开硬件加速后，并不会更改这个值。
检测硬件加速是否开启，一方面看上下滑动的流畅度，另一种方法是放一个video标签，看看视频是否有画面。

关闭硬件加速时，如果想播放视频，有2种方案：

1. 对播放视频的webview单独开硬件加速，创建这个webview时参考上面的方法开启硬件加速。
2. 调用外部原生播放器单独播放视频，http://ask.dcloud.net.cn/question/614