H5與APP混合開發通訊互動記錄

呱呱•.•發表於2020-12-28

JS給APP傳輸資訊

以下方法相容IOS和安卓

callMobile(parameters,messageHandlerName) {
  //handlerInterface由iOS addScriptMessageHandler與andorid addJavascriptInterface 程式碼注入而來。
  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    // alert('ios')
    window.webkit.messageHandlers[messageHandlerName].postMessage(JSON.stringify(parameters))
  } else {
    // alert('安卓')
    //安卓傳輸不了js json物件,只能傳輸string
    window.webkit[messageHandlerName](JSON.stringify(parameters))
  }
}

由app將原生方法注入到window上供js呼叫

  • messageHandlerName 約定的通訊方法
  • parameters 需要傳入的引數

APP呼叫JS方法

將js方法繫結到window供APP訪問

  • 此例是在VUE下使用
  mounted() {
    window.appJSExitHandle = function () {
      appJSExitHandle(2, () => {
        callMobile({ type: 2, data: { isBackAppPage: true } },'appJSHandle')
      })
    }
  },

相關文章