JavaScript和原生應用程式常用的資料互動方式的介紹

這篇文章帶給大家的內容是關於JavaScript和原生應用程式常用的資料互動方式的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

場景1

在原生app中常會使用到H5頁面，比如說電商中的活動頁，一些電商中的詳情頁，等等……這些頁面都有一個特點，那就是在未來修改的可能性，和一次性的幾率特別的大。所以用H5的頁面是最有智慧的選擇。 
一旦使用了H5那麼就少不了和原生開發的一些互動（Android, IOS）如下的方案能夠幫助你解決。
其實作原理是原生在js的window物件中註入一個js方法，以備原生應用進行處罰觸發，就和我們平時去呼叫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}});
}

這個判斷條件大家看起來可能很詭異，我測試過這各種機器的機型，安卓機window肯定是沒有的屬性，但是在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>

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

透過這個流程大家就能很方便的呼叫原生的方法了。

場景2

我們需要在簡訊中使用某個連結去開啟原生應用程式如果沒有那麼就會提示他去下載某個應用，首先原生的應用需要定義一個url連結以備前端程式設計師在瀏覽器中調用，先給大家看一下連結範例：

// IOS
iOSStarClinic://

// Andriod 
yjjkyl://starclinic

短小精悍，你只需要調用這個就可以了

那麼在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還是安卓環境，其實作在的瀏覽器已經不能透過偏方（計時的方法）來解決檢查目前時候有沒有安裝應用程式了，因為瀏覽器會彈出提示框用戶確認才能跳轉所以用戶一旦不點擊確認那麼瀏覽器就會進行跳轉！所以在當前頁應該要顯示一些內容以便使用者未開啟應用的時候有其他的業務流程。

#

以上是JavaScript和原生應用程式常用的資料互動方式的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！