
Android平台云端打包 - DCloud公用证书(DCloud老版证书)
由于老版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
由于老版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+App IOS平台第三方插件开发指导
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 API,JS API将在HTML页面中触发调用对应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”类实现第三方插件扩展。
- 创建一个继承自“PGPlugin”类的Objective-c类
- 在源文件中引入头文件“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平台开发第三方插件请参考
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 API,JS API将在HTML页面中触发调用对应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”类实现第三方插件扩展。
- 创建一个继承自“PGPlugin”类的Objective-c类
- 在源文件中引入头文件“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 API,JS API将在HTML页面中触发调用对应Native扩展方法的请求,并负责接收运行结果。
开发者在编写扩展插件的JS时需要调用Javascript Plugin Bridge的API用来完成对Native层代码的调用和运行结果的返回。在实际应用中,开发者可以根据扩展方法的实际需求不同,将插件的扩展方法设置为同步执行或异步执行。
同步执行的扩展方法会阻塞当前JS代码的执行,直到Native层插件扩展方法执行完毕。异步扩展方法不会阻塞当前JS代码的执行,使用者需要设置回调方法接收Native层返回的执行结果,开发者需要在插件中调用 Native plugin brigde的方法将执行结果返回到请求页面。
工程示例请参考SDK内包含的HBuilder-Integrate工程,工程里已经整合了插件开发和集成方式的示例。
扩展插件工作流程
异步方法的执行不会阻塞当前JS的运行,方法的执行结果会通过回调的方式返回。
插件异步扩展方法:
同步方法的执行会阻塞当前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插件开发
老接口实现方式
开发步骤
创建插件类
开发者创建的扩展插件类应当继承自“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会根据对应的类名查找并生成相应的对象并执行对应的逻辑。
在应用的manifest.json文件中还需要添加扩展插件的应用使用权限
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平台开发第三发插件请参考
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 API,JS API将在HTML页面中触发调用对应Native扩展方法的请求,并负责接收运行结果。
开发者在编写扩展插件的JS时需要调用Javascript Plugin Bridge的API用来完成对Native层代码的调用和运行结果的返回。在实际应用中,开发者可以根据扩展方法的实际需求不同,将插件的扩展方法设置为同步执行或异步执行。
同步执行的扩展方法会阻塞当前JS代码的执行,直到Native层插件扩展方法执行完毕。异步扩展方法不会阻塞当前JS代码的执行,使用者需要设置回调方法接收Native层返回的执行结果,开发者需要在插件中调用 Native plugin brigde的方法将执行结果返回到请求页面。
工程示例请参考SDK内包含的HBuilder-Integrate工程,工程里已经整合了插件开发和集成方式的示例。
扩展插件工作流程
异步方法的执行不会阻塞当前JS的运行,方法的执行结果会通过回调的方式返回。
插件异步扩展方法:
同步方法的执行会阻塞当前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插件开发
老接口实现方式
开发步骤
创建插件类
开发者创建的扩展插件类应当继承自“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会根据对应的类名查找并生成相应的对象并执行对应的逻辑。
在应用的manifest.json文件中还需要添加扩展插件的应用使用权限
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平台设置UrlSchemes,实现被第三方应用调用
此文档不再维护,请参考新文档地址: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://",方便开发者调测。
如果是离线打包,自行在原生工程中配置
此文档不再维护,请参考新文档地址: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,实现被第三方应用调用

mui框架如何实现页面间传值
在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官网中自定义事件的介绍
在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官网中自定义事件的介绍

mui如何自定义9宫格样式
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;
}
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;
}
收起阅读 »

mui框架如何在首页使用侧滑导航
说明:这是针对老版本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提示的方式,对应需要修改。
说明:这是针对老版本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提示的方式,对应需要修改。
收起阅读 »
如何处理jquery和mui关于$符的冲突
注意:最新版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代码交叉的情况,使用范围有限。
注意:最新版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显示在页面上。
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和硬盘的压力下,在低配电脑上索引时敲代码确实可能会不太流畅。
如果工程下有不太需要提示的文件,比如《参考》这类的文件或目录,对他们点右键-移除在扫描范围外。
还可以在空闲时间做索引。先把工程索引停止,等到空闲时比如午饭时手动索引,对工程点右键-构建索引-重新构建项目,选择需要的项目构建。
没有索引的影响是:
- HTML和css编写不影响
- HTML里的class引用候选列表将缺少样式
- js的标准语法不影响,比如敲document可以正常提示。但外部js里自定义的变量将不提示和不识别。
构建索引是为了更快的语法提示。
就像Windows创建索引是为了更快搜索一样道理。
索引的速度与磁盘速度有非常大的关系,ssd硬盘会比较快。
索引时cpu也比较高。
在cpu和硬盘的压力下,在低配电脑上索引时敲代码确实可能会不太流畅。
如果工程下有不太需要提示的文件,比如《参考》这类的文件或目录,对他们点右键-移除在扫描范围外。
还可以在空闲时间做索引。先把工程索引停止,等到空闲时比如午饭时手动索引,对工程点右键-构建索引-重新构建项目,选择需要的项目构建。
没有索引的影响是:
- HTML和css编写不影响
- HTML里的class引用候选列表将缺少样式
- js的标准语法不影响,比如敲document可以正常提示。但外部js里自定义的变量将不提示和不识别。

Android硬件加速详解
从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种方案:
- 对播放视频的webview单独开硬件加速,创建这个webview时参考上面的方法开启硬件加速。
- 调用外部原生播放器单独播放视频,http://ask.dcloud.net.cn/question/614
从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种方案:
- 对播放视频的webview单独开硬件加速,创建这个webview时参考上面的方法开启硬件加速。
- 调用外部原生播放器单独播放视频,http://ask.dcloud.net.cn/question/614

支持jquery、zepto、angular、ext、dojo 等js框架的提示吗
HBuilder有通行的js扫描分析提示,大部分js库都可以方便的提示。
但js是一门超级灵活的语言,通行分析有时分析的不够完美,如果对框架做单独优化配置,可以有更好的提示。
DCloud官方对vue、jquery、zepto、angular、bootstrap、微信JS SDK和MUI等框架专门做了优化。
但js框架太多,而我们精力有限,所以我们也提供了扩展方案,大家可以一起来完善js框架的优化提示。
官方优化的js库的提示挂载方法:
使用jquery、mui等框架,如果工程下存在标准的框架文件,或者HTML引用了网络cdn的框架地址,HBuilder会自动识别并挂载相应的框架语法。
如没有自动挂载语法库提示,需要对工程点右键-引用框架语法。
HBuilderX下的界面有调整,改为在右下角状态栏选择。
注意:如果显示是挂着的,但没效果,请先取消挂载,并确认,然后再次挂载重试。如果是HBuilder,对工程点右键重新建立索引。
注意:语法提示库是工程级的,不是文件级的。如果工程不在HBuilder或HBuilderX里,直接拖一个单独的文件进来,无法加载语法提示库。
DCloud还提供了3种js库语法提示扩展方案:
- 通过扩展代码块,可以补充angular的标签和属性。菜单工具-扩展代码块-HTML代码块。
- 通过框架语法库,可以补充js部分的语法。对项目点右键,引入框架语法,里面有提示。
- 编写JSDoc。参考 http://ask.dcloud.net.cn/article/129
开源语法库git地址:https://github.com/dcloudio/WebFrameworkGrammar
另外ext的提示,可以在工程中引入一个ext的jsdoc文件,也可以提示,具体参见 https://github.com/dcloudio/WebFrameworkGrammar
HBuilder有通行的js扫描分析提示,大部分js库都可以方便的提示。
但js是一门超级灵活的语言,通行分析有时分析的不够完美,如果对框架做单独优化配置,可以有更好的提示。
DCloud官方对vue、jquery、zepto、angular、bootstrap、微信JS SDK和MUI等框架专门做了优化。
但js框架太多,而我们精力有限,所以我们也提供了扩展方案,大家可以一起来完善js框架的优化提示。
官方优化的js库的提示挂载方法:
使用jquery、mui等框架,如果工程下存在标准的框架文件,或者HTML引用了网络cdn的框架地址,HBuilder会自动识别并挂载相应的框架语法。
如没有自动挂载语法库提示,需要对工程点右键-引用框架语法。
HBuilderX下的界面有调整,改为在右下角状态栏选择。
注意:如果显示是挂着的,但没效果,请先取消挂载,并确认,然后再次挂载重试。如果是HBuilder,对工程点右键重新建立索引。
注意:语法提示库是工程级的,不是文件级的。如果工程不在HBuilder或HBuilderX里,直接拖一个单独的文件进来,无法加载语法提示库。
DCloud还提供了3种js库语法提示扩展方案:
- 通过扩展代码块,可以补充angular的标签和属性。菜单工具-扩展代码块-HTML代码块。
- 通过框架语法库,可以补充js部分的语法。对项目点右键,引入框架语法,里面有提示。
- 编写JSDoc。参考 http://ask.dcloud.net.cn/article/129
开源语法库git地址:https://github.com/dcloudio/WebFrameworkGrammar
另外ext的提示,可以在工程中引入一个ext的jsdoc文件,也可以提示,具体参见 https://github.com/dcloudio/WebFrameworkGrammar
收起阅读 »