HBuilder用來(lái)寫H5項(xiàng)目，Xcode用來(lái)寫iOS原生的插件，我所需實(shí)現(xiàn)的是，在H5頁(yè)面點(diǎn)擊打印，運(yùn)行iOS原生插件來(lái)實(shí)現(xiàn)連接藍(lán)牙打印機(jī)并打印出獲取的內(nèi)容。

首先去HBuilder文檔上，下載HBuilder離線打包iOS版SDK，運(yùn)行HBuilder-Hello，在HBuilder-Hello項(xiàng)目基礎(chǔ)上開始進(jìn)行原生插件開發(fā)。

HTML5+ 基座擴(kuò)展采用三層結(jié)構(gòu)，JS層、PluginBridge層和Native層。 三層功能分別是：
JS層： 在Webview頁(yè)面調(diào)用，觸發(fā)Native層代碼，獲取執(zhí)行結(jié)果。 PluginBridge層： 將JS層請(qǐng)求進(jìn)行處理，觸發(fā)Native層擴(kuò)展插件代碼。
Native層： 插件擴(kuò)展的平臺(tái)原生代碼，負(fù)責(zé)執(zhí)行業(yè)務(wù)邏輯并執(zhí)行結(jié)果返回到請(qǐng)求頁(yè)面。

先來(lái)注冊(cè)下對(duì)應(yīng)關(guān)系
修改PandoraAPI.bundle中feature.plist文件，在其中添加JS插件別名和Native插件類的對(duì)應(yīng)關(guān)系，SDK基座會(huì)根據(jù)對(duì)應(yīng)關(guān)系查找并生成相應(yīng)的Native對(duì)象并執(zhí)行對(duì)應(yīng)的方法。

plugintest為你所要擴(kuò)展的插件類的類名，在iOS中創(chuàng)建plugintest類，并繼承于PGPlugin，在.h中導(dǎo)入PGPlugin.h，PGMethod.h

 #include "PGPlugin.h"    #include "PGMethod.h"

若需要靜態(tài)庫(kù)的話直接吧.a和.h文件拖到項(xiàng)目中就可以了，native中的方法分同步和異步方法，我在這里只介紹異步方法

- (void)PluginTestFunctionArrayArgu:(PGMethod *)msg  {      NSArray *pArray = [NSArray array];    if (msg)      {        //CallBackid 異步方法的回調(diào)id，H5+ 會(huì)根據(jù)回調(diào)ID通知JS層運(yùn)行結(jié)果成功或者失敗          NSString *cdId = [msg.arguments objectAtIndex:0];        //用戶的參數(shù)會(huì)在第二個(gè)參數(shù)傳回，可以按照Array方式傳入          pArray = [msg.arguments objectAtIndex:1];          NSLog(@"cdId: %@    pArray: %@",cdId,pArray);        // 如果使用Array方式傳遞參數(shù)          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);        //可以直接調(diào)用所導(dǎo)入的靜態(tài)庫(kù)里面的方法          NSString *UUID = [ZQDeviceSDK Prn_GetPortList:1];          NSString *port = [UUID stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];          [self startPrintText:pArray andUUID:port];        // 運(yùn)行Native代碼結(jié)果和預(yù)期相同，調(diào)用回調(diào)通知JS層運(yùn)行成功并返回結(jié)果           PDRPluginResult *result = [PDRPluginResult resultWithStatus:PDRCommandStatusOK messageAsString:pResultString];        // 如果Native代碼運(yùn)行結(jié)果和預(yù)期不同，需要通過(guò)回調(diào)通知JS層出現(xiàn)錯(cuò)誤，并返回錯(cuò)誤提示//        PDRPluginResult *resultError = [PDRPluginResult resultWithStatus:PDRCommandStatusError messageAsString:@"出錯(cuò)了！"];          //通知JS層Native層運(yùn)行結(jié)果，JS Pluginbridge會(huì)根據(jù)cbid找到對(duì)應(yīng)的回調(diào)方法并觸發(fā)         [self toCallback:cdId withReslut:[result toJSONString]];      }  }

在js中的函數(shù)

document.addEventListener( "plusready",  function(){  // 聲明的JS“擴(kuò)展插件別名”       var _BARCODE = 'plugintest',B = window.plus.bridge;     var plugintest ={         // 聲明異步返回方法           // 通知Native層plugintest擴(kuò)展插件運(yùn)行”PluginTestFunction”方法          //參數(shù)為所需傳入原生的參數(shù)           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中調(diào)用的代碼

plus.plugintest.PluginTestFunctionArrayArgu( printData, function( result ) {                   mui.alert( result );                  },function(result){                   mui.alert(result)                   });

大致的開發(fā)流程就值這個(gè)樣子，其實(shí)真正麻煩的并是不代碼而是IDE的各種調(diào)試..
下面就是把H5項(xiàng)目導(dǎo)入Xcode來(lái)實(shí)現(xiàn)離線打包了，在項(xiàng)目的manifest.json中，修改appid，使其與Xcode中的appid一致，Version和Build對(duì)應(yīng)version下的name和code

將manifest.json中的中文注釋全部刪除,然后把H5項(xiàng)目導(dǎo)入到Pandora下的www目錄中，記住，把項(xiàng)目下的所有文件導(dǎo)入到www下，而不是項(xiàng)目文件夾直接導(dǎo)入到www下，那樣運(yùn)行會(huì)打不開App。

把www上一級(jí)的文件夾名稱改為Appid一致的名稱，修改圖標(biāo)可以把圖標(biāo)放入HBuilder中可以生成相應(yīng)尺寸的圖標(biāo)..這點(diǎn)兒用著非常親民..之前iOS開發(fā)都是去找美工要的..接著修改項(xiàng)目名稱等我就不再一一說(shuō)了。

【相關(guān)推薦】

1. 免費(fèi)h5在線視頻教程

2. HTML5 完整版手冊(cè)

3. php.cn原創(chuàng)html5視頻教程