H5项目开发iOS插件功能的实例代码


本文摘自PHP中文网,作者零下一度,侵删。

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对象并执行对应的方法。

plugintest为你所要扩展的插件类的类名,在iOS中创建plugintest类,并继承于PGPlugin,在.h中导入PGPlugin.h,PGMethod.h

1

2

#include "PGPlugin.h"

 #include "PGMethod.h"

若需要静态库的话直接吧.a和.h文件拖到项目中就可以了,native中的方法分同步和异步方法,我在这里只介绍异步方法

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

- (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中的函数

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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中调用的代码

1

2

3

4

5

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

将manifest.json中的中文注释全部删除,然后把H5项目导入到Pandora下的www目录中,记住,把项目下的所有文件导入到www下,而不是项目文件夹直接导入到www下,那样运行会打不开App。

把www上一级的文件夹名称改为Appid一致的名称,修改图标可以把图标放入HBuilder中可以生成相应尺寸的图标..这点儿用着非常亲民..之前iOS开发都是去找美工要的..接着修改项目名称等我就不再一一说了。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

以上就是H5项目开发iOS插件功能的实例代码的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html5标签选择方法指引

html5本地存储应用sessionstorage和localstorage

h5和css3有哪些新特性

html5plus移动应用的开发实例分享

html5实现文字轮滚的示例代码

html5中在元素或者选取的文本被拖动时触发的事件ondrag

html5视频播放教程实例

websocket+mse――html5 直播技术解析

html5中关于history模式的详解

html5实现清空画布的三种方法

更多相关阅读请进入《h5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...