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;
@endPluginTest.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];
}
@endiOS平台插件开发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)valuePDRMethod
扩展插件方法传入的参数，扩展插件定义的方法需要使用此类传入参数 属性：
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;
@endPluginTest.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];
}
@endiOS平台插件开发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)valuePDRMethod
扩展插件方法传入的参数，扩展插件定义的方法需要使用此类传入参数 属性：
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
收起阅读 »
没有取色器或调色板或颜色提示吗？
- HBuilder提示工程中使用过的颜色，避免开发者错用颜色
- HBuilder把常用颜色的英文列出来，方便开发者直观的敲或选择
- 如果你的颜色是美工给出的16进制或rgb值，直接手动敲，你不能用调色板自己选一个相近的颜色。
使用调色板那是美工的事情，作为程序员，精准的实现代码、快速的敲出代码更重要。
另外，插件市场有个插件可以用http://ext.dcloud.net.cn/plugin?id=146
- HBuilder提示工程中使用过的颜色，避免开发者错用颜色
- HBuilder把常用颜色的英文列出来，方便开发者直观的敲或选择
- 如果你的颜色是美工给出的16进制或rgb值，直接手动敲，你不能用调色板自己选一个相近的颜色。
使用调色板那是美工的事情，作为程序员，精准的实现代码、快速的敲出代码更重要。
另外，插件市场有个插件可以用http://ext.dcloud.net.cn/plugin?id=146
收起阅读 »