ホームページ  >  記事  >  ウェブフロントエンド  >  iOSプラグイン機能のH5プロジェクト開発サンプルコード

iOSプラグイン機能のH5プロジェクト開発サンプルコード

零下一度
零下一度オリジナル
2017-05-10 14:23:552669ブラウズ

HBuilder は H5 プロジェクトの作成に使用され、Xcode は iOS ネイティブ プラグインの作成に使用されます。私が達成する必要があるのは、H5 ページで [印刷] をクリックし、iOS ネイティブ プラグインを実行して Bluetooth プリンターに接続し、印刷することです。取得したコンテンツを出力します。

まず、HBuilder ドキュメントにアクセスし、HBuilder オフライン パッケージング iOS バージョン SDK をダウンロードし、HBuilder-Hello を実行して、HBuilder-Hello プロジェクトに基づいたネイティブ プラグインの開発を開始します。

HTML5+ベースの拡張機能は、JS層、PluginBridge層、Native層の3層構造を採用しています。 3 つの関数層は次のとおりです:
JS 層: Webview ページで呼び出され、ネイティブ層コードをトリガーし、実行結果を取得します。 PluginBridge レイヤー: JS レイヤーのリクエストを処理し、ネイティブ レイヤー拡張プラグイン コードをトリガーします。
ネイティブ層: プラグイン拡張機能のプラットフォーム ネイティブ コードは、ビジネス ロジックを実行し、要求されたページに実行結果を返す責任があります。

最初に対応する関係を登録します
PandoraAPI.bundle 内の feature.plist ファイルを変更し、JS プラグイン エイリアスとネイティブ プラグイン クラスの間に対応する関係を追加します。SDK ベースは、対応するネイティブ オブジェクト ベースを見つけて生成します。対応する関係に基づいて対応するメソッドを実行します。

plugintestは拡張したいプラグインクラスのクラス名です。静的ライブラリが必要な場合は、iOSでplugintestクラスを作成し、.h

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

のPGPlugin.hとPGMethod.hをインポートします。 .h ファイルをプロジェクトにドラッグするだけです。ネイティブのメソッドは同期メソッドと非同期メソッドに分けられます。ここでは非同期メソッドのみを紹介します

- (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にインポートすることです。プロジェクトの json を変更し、appid を変更し、Xcode の appid と一致させます。バージョンとビルドがバージョンの下の名前とコードに対応するようにし、manifest.json 内の中国語のコメントをすべて削除して、H5 プロジェクトを www にインポートします。プロジェクト フォルダーを www に直接インポートするのではなく、すべてのファイルを www の下に置きます。そうしないと、実行時にアプリが開きません。

www の上位にあるフォルダーの名前を Appid と一致する名前に変更するには、アイコンを HBuilder に入れて、対応するサイズのアイコンを生成することができます。これは非常に使いやすいです。以前は iOS の開発は アーティストに依頼して…その後プロジェクト名を変更する など、いちいち詳しくは説明しません。

【関連おすすめ】

1.

無料のh5オンラインビデオチュートリアル

2.

php.cnオリジナルのhtml5ビデオチュートリアル

以上がiOSプラグイン機能のH5プロジェクト開発サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。