H5項目如何開發(fā)iOS插件功能

這篇文章主要為大家展示了“H5項目如何開發(fā)iOS插件功能”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“H5項目如何開發(fā)iOS插件功能”這篇文章吧。

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

首先去HBuilder文檔上，下載HBuilder離線打包iOS版SDK，運行HBuilder-Hello，在HBuilder-Hello項目基礎上開始進行原生插件開發(fā)。

HTML5+ 基座擴展采用三層結構，JS層、PluginBridge層和Native層。 三層功能分別是：
JS層： 在Webview頁面調用，觸發(fā)Native層代碼，獲取執(zhí)行結果。 PluginBridge層： 將JS層請求進行處理，觸發(fā)Native層擴展插件代碼。
Native層： 插件擴展的平臺原生代碼，負責執(zhí)行業(yè)務邏輯并執(zhí)行結果返回到請求頁面。

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

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

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

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

- (void)PluginTestFunctionArrayArgu:(PGMethod *)msg
{
    NSArray *pArray = [NSArray array];    if (msg)
    {        //CallBackid 異步方法的回調id，H5+ 會根據(jù)回調ID通知JS層運行結果成功或者失敗
        NSString *cdId = [msg.arguments objectAtIndex:0];        //用戶的參數(shù)會在第二個參數(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);        //可以直接調用所導入的靜態(tài)庫里面的方法
        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層出現(xiàn)錯誤，并返回錯誤提示//        PDRPluginResult *resultError = [PDRPluginResult resultWithStatus:PDRCommandStatusError messageAsString:@"出錯了！"];
        //通知JS層Native層運行結果，JS Pluginbridge會根據(jù)cbid找到對應的回調方法并觸發(fā)
       [self toCallback:cdId withReslut:[result toJSONString]];
    }
}

在js中的函數(shù)

document.addEventListener( "plusready",  function(){  // 聲明的JS“擴展插件別名”
     var _BARCODE = 'plugintest',B = window.plus.bridge;     var plugintest ={         // 聲明異步返回方法
         // 通知Native層plugintest擴展插件運行”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中調用的代碼

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

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

將manifest.json中的中文注釋全部刪除,然后把H5項目導入到Pandora下的www目錄中，記住，把項目下的所有文件導入到www下，而不是項目文件夾直接導入到www下，那樣運行會打不開App。

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

以上是“H5項目如何開發(fā)iOS插件功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！