JavaScript和原生應(yīng)用常用的數(shù)據(jù)交互方式是什么

這篇文章給大家分享的是有關(guān)JavaScript和原生應(yīng)用常用的數(shù)據(jù)交互方式是什么的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

場(chǎng)景1

在原生app中經(jīng)常會(huì)使用到H5頁(yè)面，比如說(shuō)電商中的活動(dòng)頁(yè)，一些電商中的詳情頁(yè)，等等...這些頁(yè)面都有一個(gè)特點(diǎn)，那就是在未來(lái)修改的可能性，和一次性的幾率特別的大。所以用H5的頁(yè)面是最睿智的一種選擇。  
一旦使用了H5那么就少不了和原生開(kāi)發(fā)的一些交互（Android, IOS）如下的方案能夠幫助你解決。
其實(shí)現(xiàn)原理是原生在js的window對(duì)象中注入一個(gè)js方法，以備原生應(yīng)用進(jìn)行處罰觸發(fā)，就和我們平時(shí)去調(diào)用onclick的方法一樣簡(jiǎn)單。

js代碼：

// mobile/index.js 常用js 調(diào)用原生的方式都在這里體現(xiàn)。
export default {
    /**
     * 調(diào)用移動(dòng)端方法
     *
     * @param {*} {name, params, call} 移動(dòng)端注入的方法名 | 參數(shù) | 回調(diào)
     */
    callMoblieMethods({name, params, call}){
        // 移動(dòng)端安卓的環(huán)境
        if(window.android) {
            // 移動(dòng)端使用java所以不能直接解析json,只能解析字符串或者json字符串
            window.android[name](JSON.stringify(params));  
        }
        // 移動(dòng)端IOS的環(huán)境
        if(window.webkit && window.webkit.messageHandlers) {
            window.webkit.messageHandlers[name].postMessage(params);
        }
    }
}

調(diào)用方式

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

這個(gè)判斷條件大家看起來(lái)可能很詭異，我測(cè)試過(guò)這各種機(jī)器的機(jī)型，安卓機(jī)window肯定是沒(méi)有的屬性，但是在IOS上他會(huì)自帶webkit屬性所以我們先判斷他是否有webkit屬性在判斷他是否有注入的方法名這樣他就能很好的調(diào)用這個(gè)方法了；

為了方便大家查找這里也附上移動(dòng)端的代碼：

//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);
  }

  //活動(dòng)詳情
  @JavascriptInterface
  public void activityDetails(String jsonData) {
      Log.i("znh", "H5-JS-活動(dòng)詳情");
      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"];

通過(guò)這個(gè)流程大家就能很方便的調(diào)用原生的方法了。

場(chǎng)景2

我們需要在短信中使用某個(gè)鏈接去打開(kāi)原生應(yīng)用如果沒(méi)有那么就會(huì)提示他去下載某個(gè)應(yīng)用，首先原生的應(yīng)用需要定義一個(gè)url鏈接以備前端程序員在瀏覽器中調(diào)用，先給大家看一下鏈接示例：

// IOS
iOSStarClinic://

// Andriod 
yjjkyl://starclinic

短小精悍，你只需要調(diào)用這個(gè)就可以了

那么在js中要怎么做呢？

if(this.isIOS) {
    window.location.href = 'iOSStarClinic://';//與APP約定的一個(gè)協(xié)議URL
} else {
    var state = null;
    try {
        state = window.open('yjjkyl://starclinic', '_blank');//與APP約定的一個(gè)協(xié)議URL
    } catch(e) {}
    if (state) {
        window.close();
    } else {
        window.location.href = gbs.patientDownUrl;
    }
}

先判斷一下當(dāng)前是IOS還是安卓環(huán)境，其實(shí)現(xiàn)在的瀏覽器已經(jīng)不能通過(guò)偏方（計(jì)時(shí)的方法）來(lái)解決檢查當(dāng)前時(shí)候有沒(méi)有安裝應(yīng)用了，因?yàn)闉g覽器會(huì)彈出提示框用戶(hù)確認(rèn)才能跳轉(zhuǎn)所以用戶(hù)一旦不點(diǎn)擊確認(rèn)那么瀏覽器就會(huì)進(jìn)行跳轉(zhuǎn)！所以在當(dāng)前頁(yè)應(yīng)該要給用戶(hù)顯示一些內(nèi)容以便用戶(hù)未打開(kāi)應(yīng)用的時(shí)候有其他的業(yè)務(wù)流程。

感謝各位的閱讀！關(guān)于JavaScript和原生應(yīng)用常用的數(shù)據(jù)交互方式是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！