H5專案開發iOS外掛功能的實例程式碼

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

 #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

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

把www上一級的資料夾名稱改為Appid一致的名稱，修改圖示可以把圖示放入HBuilder中可以產生對應尺寸的圖示..這點兒用非常親民..之前iOS開發都是去找美工要的..接著修改專案名稱等我就不再一一說了。

【相關推薦】

1. 免費h5線上影片教學

2. HTML5 完整版手冊

#3. php.cn原始html5影片教學

#

以上是H5專案開發iOS外掛功能的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！