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
- H5與APP混合開發遇到的問題總結H5APP
- 使用APICloud AVM多端框架開發app通訊錄功能APICloud框架APP
- React Native與Android通訊互動React NativeAndroid
- 移動端H5混合開發設定覆盤與總結H5
- IOS逆向--Tweak和app互動方案【程式通訊】iOSAPP
- Hybrid 混合App開發APP
- Hybrid小程式混合開發之路 – 資料互動
- 動態記憶體開闢實現通訊錄記憶體
- Flutter混合開發(三):Android與Flutter之間通訊詳細指南FlutterAndroid
- uni-app 混合開發APP
- 網路通訊3:TCP互動通訊TCP
- 原生開發、H5開發和混合開發的區別H5
- h5視訊播放踩坑記錄H5
- 移動端通訊錄
- Go 記錄一次groutine通訊與context控制GoContext
- Flutter 混合開發實戰問題記錄(二)自定義簡單的混合棧路由Flutter路由
- Flutter 混合開發實戰問題記錄(一)FlutterView閃爍FlutterView
- 北京手機APP開發公司-北京銳智互動APP
- APP開發價格多少錢-北京銳智互動APP
- swift之與h5之間的互動(一)SwiftH5
- H5與安卓/IOS進行原生互動H5安卓iOS
- web與APP之間的互動—WebViewJavascriptBridgeAPPWebViewJavaScript
- Vue使用JSBridge與原生APP通訊VueJSAPP
- Flutter Webview網頁與App通訊FlutterWebView網頁APP
- Android Flutter 混合開發高仿大廠AppAndroidFlutterAPP
- Flutter與webview通訊橋樑開發FlutterWebView
- iOS BLE 開發小記[5] 與 Remote Peripheral 互動的最佳實踐iOSREM
- 企業即時通訊APP開發,手機聊天軟體開發APP
- Phaser遊戲框架與HTML Dom元素之間的通訊互動遊戲框架HTML
- 直播類app開發解決方案、直播app功能有哪些?-北京銳智互動軟體開發APP
- webpack + Vue + Hbuilder 打包成App,混合app開發,一個人搞定WebVueUIAPP
- Hyperf 開發的動漫站記錄
- Laravel 後臺與爬蟲互動-通過 Redis 的頻道訂閱來通訊Laravel爬蟲Redis
- Android 整合 Flutter 及通訊互動詳解AndroidFlutter