工作中遇到了为H5项目开发iOS插件的功能，就去啃了啃HBuilder得H5+文档，发现文档写的很晦涩..，现已实现，遂来分享下经验，以供大家参考。当然也是因为看到HBuilder的写文章有奖的活动了😂..快来吧，我的32寸曲面显示器😂
好啦，言归正传，用到的IDE -- Xcode7.3，HBuilder。
HBuilder用来写H5项目，Xcode用来写iOS原生的插件，我所需实现的是，在H5页面点击打印，运行iOS原生插件来实现连接蓝牙打印机并打印出获取的内容。
首先去HBuilder文档上，下载HBuilder离线打包iOS版SDK，运行HBuilder-Hello，在HBuilder-Hello项目基础上开始进行原生插件开发。
HTML5+ 基座扩展采用三层结构，JS层、PluginBridge层和Native层。 三层功能分别是：
JS层： 在Webview页面调用，触发Native层代码，获取执行结果。 PluginBridge层： 将JS层请求进行处理，触发Native层扩展插件代码。
Native层： 插件扩展的平台原生代码，负责执行业务逻辑并执行结果返回到请求页面。
先来注册下对应关系
修改PandoraAPI.bundle中feature.plist文件，在其中添加JS插件别名和Native插件类的对应关系，SDK基座会根据对应关系查找并生成相应的Native对象并执行对应的方法。
屏幕快照 2016-11-07 上午10.41.02.png
然后在HBuilder中你的H5项目里面的manifest.json中
屏幕快照 2016-11-07 上午10.40.38.png
plugintest为你所要扩展的插件类的类名，在iOS中创建plugintest类，并继承于PGPlugin，在.h中导入PGPlugin.h，PGMethod.h
#include "PGPlugin.h"
#include "PGMethod.h"
若需要静态库的话直接吧.a和.h文件拖到项目中就可以了，native中的方法分同步和异步方法，我在这里只介绍异步方法
- (void)PluginTestFunctionArrayArgu:(PGMethod *)msg
{
NSArray *pArray = [NSArray array];
if (msg)
{
//CallBackid 异步方法的回调id，H5+ 会根据回调ID通知JS层运行结果成功或者失败
NSString *cdId = [msg.arguments objectAtIndex:0];
//用户的参数会在第二个参数传回，可以按照Array方式传入
pArray = [msg.arguments objectAtIndex:1];
NSLog(@"cdId: %@ pArray: %@",cdId,pArray);
// 如果使用Array方式传递参数
NSString *pResultString = [NSString stringWithFormat:@"%@ %@ %@ %@ %@ %@ %@",[pArray objectAtIndex:0],[pArray objectAtIndex:1], [pArray objectAtIndex:2],[pArray objectAtIndex:3],[pArray objectAtIndex:4], [pArray objectAtIndex:5],[pArray objectAtIndex:6]];
NSLog(@"pResultString: %@",pResultString);
//可以直接调用所导入的静态库里面的方法
NSString *UUID = [ZQDeviceSDK Prn_GetPortList:1];
NSString *port = [UUID stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
[self startPrintText:pArray andUUID:port];
// 运行Native代码结果和预期相同，调用回调通知JS层运行成功并返回结果
PDRPluginResult *result = [PDRPluginResult resultWithStatus:PDRCommandStatusOK messageAsString:pResultString];
// 如果Native代码运行结果和预期不同，需要通过回调通知JS层出现错误，并返回错误提示
// PDRPluginResult *resultError = [PDRPluginResult resultWithStatus:PDRCommandStatusError messageAsString:@"出错了！"];
//通知JS层Native层运行结果，JS Pluginbridge会根据cbid找到对应的回调方法并触发
[self toCallback:cdId withReslut:[result toJSONString]];
}
}在js中的函数
document.addEventListener( "plusready", function(){
// 声明的JS“扩展插件别名”
var _BARCODE = 'plugintest',B = window.plus.bridge;
var plugintest ={
// 声明异步返回方法
// 通知Native层plugintest扩展插件运行”PluginTestFunction”方法
//参数为所需传入原生的参数
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]);
}
window.plus.plugintest = plugintest;
}, true );在H5中调用的代码
plus.plugintest.PluginTestFunctionArrayArgu( printData, function( result ) {
mui.alert( result );
},function(result){
mui.alert(result)
});大致的开发流程就值这个样子，其实真正麻烦的并是不代码而是IDE的各种调试..
下面就是把H5项目导入Xcode来实现离线打包了，在项目的manifest.json中，修改appid，使其与Xcode中的appid一致，Version和Build对应version下的name和code
屏幕快照 2016-11-07 上午11.15.27副本.png
屏幕快照 2016-11-07 上午11.15.45.png
将manifest.json中的中文注释全部删除,然后把H5项目导入到Pandora下的www目录中，记住，把项目下的所有文件导入到www下，而不是项目文件夹直接导入到www下，那样运行会打不开App。
把www上一级的文件夹名称改为Appid一致的名称，修改图标可以把图标放入HBuilder中可以生成相应尺寸的图标..这点儿用着非常亲民..之前iOS开发都是去找美工要的..接着修改项目名称等我就不再一一说了。
之前一直在做的是iOS原生项目，才开始做webApp项目，使用HBuilder确实感觉很便捷，也认识到了H5+的发展，希望自己能做到前端全栈吧！😂
