JavaScript とネイティブ アプリケーション間の一般的なデータ対話方法の紹介

この記事では、JavaScript とネイティブ アプリケーションの間で一般的に使用されるデータ対話方法について紹介します。必要な方は参考にしていただければ幸いです。

シナリオ 1

H5 ページは、e コマースのイベント ページや一部の e コマースの詳細ページなど、ネイティブ アプリでよく使用されます。これらのページにはすべて、将来的に変更される可能性があるという 1 つの特徴があり、特に 1 回限りの変更の可能性が高くなります。したがって、H5 ページを使用することが最も賢明な選択です。
H5 を使用すると、必然的にネイティブ開発 (Android、IOS) とのやり取りが必要になります。次の解決策が問題の解決に役立ちます。
実装の原則は、js メソッドを js window オブジェクトにネイティブに挿入して、ネイティブ アプリケーションがペナルティをトリガーできるようにすることです。これは、onclick を呼び出す通常の方法と同じくらい簡単です。

js コード:

// mobile/index.js 常用js 调用原生的方式都在这里体现。
export default {
    /**
     * 调用移动端方法
     *
     * @param {*} {name, params, call} 移动端注入的方法名 | 参数 | 回调
     */
    callMoblieMethods({name, params, call}){
        // 移动端安卓的环境
        if(window.android) {
            // 移动端使用java所以不能直接解析json,只能解析字符串或者json字符串
            window.android[name](JSON.stringify(params));  
        }
        // 移动端IOS的环境
        if(window.webkit && window.webkit.messageHandlers) {
            window.webkit.messageHandlers[name].postMessage(params);
        }
    }
}

メソッドの呼び出し

if(window.android || (window.webkit && window.webkit.messageHandlers.activityDetails)) {
    mobile.callMoblieMethods({ name: 'activityDetails', params: {activityId: item.act_id}});
}

この判定条件が奇妙に思われるかもしれませんが、さまざまなマシンモデルをテストしてきましたが、Android マシンのウィンドウには確かにあります。属性はありませんが、IOS では独自の Webkit 属性があるため、最初に Webkit 属性があるかどうかを判断し、次にこのメソッドを適切に呼び出すことができるように挿入されたメソッド名があるかどうかを判断します。検索を容易にするために、モバイル コードもここに添付されています:

//Android

public class AndroidJavascriptInterface {

  Activity mActivity;

  public AndroidJavascriptInterface(Activity activity) {
      this.mActivity = activity;
  }

  //诊所详情
  @JavascriptInterface
  public void clinicDetails(String jsonData) {
      Log.i("znh", "H5-JS-诊所详情");
      Intent intent = new Intent(mActivity, OutPatientActivity.class);
      Bundle bundle = new Bundle();
      bundle.putString(Constants.CLINIC_ID, GsonUtil.getJSONObjectKeyVal(jsonData, "clinicId"));
      intent.putExtras(bundle);
      mActivity.startActivity(intent);
  }

  //活动详情
  @JavascriptInterface
  public void activityDetails(String jsonData) {
      Log.i("znh", "H5-JS-活动详情");
      Intent intent = new Intent(mActivity, ActivityDetailActivity.class);
      Bundle bundle = new Bundle();
      bundle.putString("id", GsonUtil.getJSONObjectKeyVal(jsonData, "activityId"));
      intent.putExtras(bundle);
      mActivity.startActivity(intent);
  }
}


//IOS
#import <JavaScriptCore/JavaScriptCore.h>

WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
[wkWebConfig.userContentController addScriptMessageHandler:self name:@"clinicDetails"];
[wkWebConfig.userContentController addScriptMessageHandler:self name:@"activityDetails"];

このプロセスを通じて、ネイティブ メソッドを簡単に呼び出すことができます。

シナリオ 2

テキスト メッセージ内のリンクを使用してネイティブ アプリケーションを開く必要があります。そのようなリンクがない場合は、ダウンロードするように求められます。まず、ネイティブ アプリケーション フロントエンド プログラマがブラウザで呼び出すための URL リンクを定義する必要があります。最初にリンクの例を示します。

// IOS
iOSStarClinic://

// Andriod 
yjjkyl://starclinic

短く簡潔に説明します。必要なのは呼び出すだけです。 this

じゃあjsではどうすればいいでしょうか？

if(this.isIOS) {
    window.location.href = 'iOSStarClinic://';//与APP约定的一个协议URL
} else {
    var state = null;
    try {
        state = window.open('yjjkyl://starclinic', '_blank');//与APP约定的一个协议URL
    } catch(e) {}
    if (state) {
        window.close();
    } else {
        window.location.href = gbs.patientDownUrl;
    }
}

まず、現在の環境が IOS か Android かを判断します。実際、現在のブラウザでは、アプリケーションが現時点でインストールされているかどうかを確認する民間療法 (タイミング方法) を使用できなくなりました。ユーザーにプロンプ​​ト ボックスを表示します。ジャンプするには確認が必要なので、ユーザーがクリックして確認しないと、ブラウザーがジャンプします。したがって、ユーザーがアプリケーションを開いていないときに他のビジネス プロセスが存在するように、現在のページに一部のコンテンツをユーザーに表示する必要があります。

以上がJavaScript とネイティブ アプリケーション間の一般的なデータ対話方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。