背景：

在我們工作中或多或少會遇到這樣的需求；那就是h5與安卓和ios的傳參問題；今天我給大家介紹一下大致的用法，希望能幫到你！
1.創建一個文件：JSBridge.js
復制以下代碼即可：

const isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1 const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // 這是必須要寫的，用來創建一些設置 function setupWebViewJavascriptBridge (callback) {// Android使用if (isAndroid) {if (window.WebViewJavascriptBridge) {callback(window.WebViewJavascriptBridge)} else {document.addEventListener('WebViewJavascriptBridgeReady',() => {callback(window.WebViewJavascriptBridge)},false)}sessionStorage.phoneType = 'android'}// iOS使用if (isiOS) {if (window.WebViewJavascriptBridge) {return callback(window.WebViewJavascriptBridge)}if (window.WVJBCallbacks) {return window.WVJBCallbacks.push(callback)}window.WVJBCallbacks = [callback]var WVJBIframe = document.createElement('iframe')WVJBIframe.style.display = 'none'// WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'document.documentElement.appendChild(WVJBIframe)setTimeout(() => {document.documentElement.removeChild(WVJBIframe)}, 0)sessionStorage.phoneType = 'ios'} } // 注冊回調函數，第一次連接時調用 初始化函數(android需要初始化,ios不用) setupWebViewJavascriptBridge((bridge) => {if (isAndroid) {// 初始化bridge.init((message, responseCallback) => {var data = {'Javascript Responds': 'Wee!'}responseCallback(data)})} }) export default {// js調APP方法 （參數分別為:app提供的方法名 傳給app的數據 回調）callHandler (name, data, callback) {setupWebViewJavascriptBridge((bridge) => {bridge.callHandler(name, data, callback)})},// APP調js方法 （參數分別為:js提供的方法名 回調）registerHandler (name, callback) {setupWebViewJavascriptBridge((bridge) => {bridge.registerHandler(name, (data, responseCallback) => {callback(data, responseCallback)})})} }

2.向ios/安卓傳值
需要在vue方法中聲明一個callApp事件并觸發

/*** 獲取安卓和ios的獲取點擊 share ios/安卓的函數即可；返回的值一個對象的形式*/callAPP () {const param = { msg: 'sajdklajskldj' } // JS給APP傳得參數console.log(123456)this.$bridge.callHandler('share', param, (res) => {alert('獲取app響應數據:' + res)})console.log(789)},

3.ios/安卓向h5傳值
需要在mounted聲明周期中去調用這個函數

/*** 這是h5自我注冊的方法；ios和安卓那邊進行觸發傳值給我*/appCall () {this.$bridge.registerHandler('appCallJS', (datas, responseCallback) => {console.log(datas)alert('showStationList')alert('showStationList' + datas)})}

寫到這兒基本上就可以獲取和接受值了，大家一定要注意2/3步驟；今天的分享就到了這。
如果這篇文章幫助到了你，那將是我的榮幸！

總結

以上是生活随笔為你收集整理的h5-（安卓和ios）之间的传值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。