移動端之H5與原生交互

爲保證js加載初始化數據,而且保證交互時機,iOS端在頁面加載完成時會對js注入

webviewDidFinishLoading 函數,用以通知頁面交互通道已經建立完成,頁面能夠基於此時間點進行後續邏輯。

一、公共協議

 

APP與H5聯調規範

一、與APP聯調首先判斷機型即:Android 和 iOS

調APP方法要傳的參數格式:

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端'
// 交互規範
{'command': '要調用的APP方法名',(必填,格式爲 string
'parameter': '要傳遞給APP端的參數'(沒有能夠不傳，格式爲json格式)
'callback': 'APP執行成功後回調JS的方法'(不是必填項，格式爲string)}

二、調起APP端統一方法名爲:NativeFunction() 給APP端傳遞參數的時候要轉爲json字符串 即:

JSON.stringify({
    'command': 'nativeFunction',
    'parameter':parameterObj,
    'callback': 'callbackFn'})

// 以喚起APP端登陸頁面爲例:App 方法名爲:'loginsService'

if(isiOS) { //iOS設備
    window.webkit.messageHandlers.NativeFunction.postMessage(JSON.stringify({  
        'command': 'loginsService', 
        'parameter': loginObj, 
        'callback': 'loginBack'  })) 
} else if(isAndroid){ //Android設備
     window.jsobj.NativeFunction(JSON.stringify({
         'command': 'loginService',  
         'parameter': loginObj,  
         'callback': 'loginBack' }))
}

二、業務模塊交互協議

 

三、Android和H5 JS交互方式

 js調用數據格式：

public class OpenProtocol implements Serializable {

  /**
  * command : loginService
  * parameter : {"name":"ly","age":18}
  * callback : loginBack
  */
  private String command;
  private String parameter;
  private String callback;

}

使用方式：

@android.webkit.JavascriptInterface public void NativeFunction(final String jsonstring) {
  openProtocol = new Gson().fromJson(jsonstring, OpenProtocol.class);
  if (openProtocol.getCommand().equals("loginService")) { //判斷command
    final ToJsResult < String > toJsResult = new ToJsResult < String > (); //自定義返回Json數據
    toJsResult.setCode("0");
    toJsResult.setData("success");
    InvokeJsMethod(openProtocol.getCallback(), new Gson().toJson(toJsResult).toString());
  } else if (openProtocol.getCommand().equals("faceRecognitionService")) { //跳轉人臉識別
    MyRouter.create("host://FaceDetectActivityFace").withInt("FaceConfirm", PublicConstant.FACE_LOGIN).open(this, PublicConstant.FACE_LOGIN);
    final ToJsResult < String > toJsResult = new ToJsResult < String > ();
    toJsResult.setCode("0");
    toJsResult.setData("success");
    InvokeJsMethod(openProtocol.getCallback(), new Gson().toJson(toJsResult).toString());
  }

  /**
* 調用JS方法以及須要傳入js的參數
* @param method
* @param parameter
*/
  public void InvokeJsMethod(final String method, final String parameter) {
    webView.loadUrl("javascript:" + method + "('" + parameter + "')");
  }

四、項目使用

 引入

<script type="text/javascript" src="static/WebViewJavascriptBridge_my.js"></script>

WebViewJavascriptBridge_my.js

(function initJsBridge() {

  var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
  // 註冊jsbridge
  function connectWebViewJavascriptBridge(callback) {
    if (isAndroid) {
      if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge)
      } else {
        document.addEventListener(
          'WebViewJavascriptBridgeReady'
          , function () {
            callback(WebViewJavascriptBridge)
          },
          false
        );
      }
      return;
    }
    if (isiOS) {
      if (window.WebViewJavascriptBridge) {
        return callback(WebViewJavascriptBridge);
      }
      if (window.WVJBCallbacks) {
        return window.WVJBCallbacks.push(callback);
      }
      window.WVJBCallbacks = [callback];
      var WVJBIframe = document.createElement('iframe');
      WVJBIframe.style.display = 'none';
      WVJBIframe.src = 'https://__bridge_loaded__';
      document.documentElement.appendChild(WVJBIframe);
      setTimeout(function () {
        document.documentElement.removeChild(WVJBIframe)
      }, 0)
    }
  }
  // 調用註冊方法
  connectWebViewJavascriptBridge(function (bridge) {
    if (isAndroid) {
      bridge.init(function (message, responseCallback) {
        //console.log('JS got a message', message);
        responseCallback(data);
      });
    }


    //APP主動調用js方法，預留
    bridge.registerHandler('appCallJs', function (data, responseCallback) {
      sessionStorage.setItem("user", JSON.stringify(JSON.parse(data).data))
      //showResponse(data);//頁面展現邏輯
      //responseCallback('native 傳過來的是：' + data);//js返回APP回調
    });
    //readyCallback();
  });
}())

call_app ：

  /**
   * 分享連接
   * @param data：{
   *     contentURL：分享連接，
   *     contentTitle：分享標題，
   *     imageURL：分享圖片
   *     contentDescription:成功回調方法，
   *     successFunc:成功回調方法
   * }
   */
  shareURL(data){
    if(window.WebViewJavascriptBridge){
      window.WebViewJavascriptBridge.callHandler('jsCallApp', {
        "method":"share",
        "contentURL":data.contentURL,
        "contentTitle":data.contentTitle,
        "imageURL":data.imageURL,
        "contentDescription":data.contentDescription
      }, function (response) {
        data.successFunc(response);
      });
    }

  }

  /* 修改狀態欄顏色 */
  changeAppColor(data){
    if( window.WebViewJavascriptBridge){
      window.WebViewJavascriptBridge.callHandler('jsCallApp', {
        "method": "changeAppColor",
        "color": data.color
      }, function (response) {
        data.successFunc(response);
      });
    }
  }

調用：

/**
 * 分享
 *     contentURL：分享連接，
 *     contentTitle：分享標題，
 *     imageURL：分享圖片
 *     contentDescription:成功回調方法，
 *     successFunc:成功回調方法
 * */
share() {
  let _this = this;
  call_app.shareURL({
    contentURL: _this.agentinfor.card_tdc.card_tc,
    contentTitle:
      JSON.parse(sessionStorage.getItem("user")).agent_name + "的名片",
    imageURL: "",
    contentDescription: "",
    successFunc: function(data) {}
  });
},