H5與APP混合開發通訊互動記錄
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')
})
}
},
相關文章
- vue 與原生app的對接互動(混合開發)VueAPP
- H5 與 APP 互動!H5APP
- WebView與APP互動實戰記錄WebViewAPP
- Android與Flutter混合開發-UI互動AndroidFlutterUI
- Android混合開發之WebView與Javascript互動AndroidWebViewJavaScript
- H5與APP混合開發遇到的問題總結H5APP
- 混合APP開發MUI框架書目錄APPUI框架
- 移動端H5混合開發設定覆盤與總結H5
- iOS與H5互動iOSH5
- IOS逆向--Tweak和app互動方案【程式通訊】iOSAPP
- 使用APICloud AVM多端框架開發app通訊錄功能APICloud框架APP
- IOS開發筆記 IOS如何訪問通訊錄iOS筆記
- React Native與Android通訊互動React NativeAndroid
- Android混合開發之WebViewJavascriptBridge實現JS與java安全互動AndroidWebViewJavaScriptJS
- 網路通訊3:TCP互動通訊TCP
- Flutter混合開發(三):Android與Flutter之間通訊詳細指南FlutterAndroid
- Hybrid小程式混合開發之路 – 資料互動
- 原生開發、H5開發和混合開發的區別H5
- uni-app 混合開發APP
- Hybrid 混合App開發APP
- webView與js互動——獲取通訊錄手機號並顯示運營商WebViewJS
- h5視訊播放踩坑記錄H5
- uniapp開發踩坑記錄APP
- 移動端通訊錄
- appium 點選微信通訊錄APP
- 互動設計工作記錄
- H5與安卓/IOS進行原生互動H5安卓iOS
- h5與native互動總結1H5
- React Nactive混合APP開發-CSDN公開課-專題視訊課程ReactAPP
- 寫給VR手遊開發小白的教程:(五)Cardboard外掛與Android之間的通訊互動VRAndroid
- Phaser遊戲框架與HTML Dom元素之間的通訊互動遊戲框架HTML
- Flutter 混合開發實戰問題記錄(二)自定義簡單的混合棧路由Flutter路由
- Flutter與webview通訊橋樑開發FlutterWebView
- Flutter 混合開發實戰問題記錄(一)FlutterView閃爍FlutterView
- swift之與h5之間的互動(一)SwiftH5
- Go 記錄一次groutine通訊與context控制GoContext
- Vue元件通訊實踐記錄Vue元件
- 北京手機APP開發公司-北京銳智互動APP