WebViewJavascriptBridge當 H5 頁面與 IOS 端交互比較復雜時痹籍，
比如頁面需要獲取 IOS 端傳回的返回值阿迈，或者 IOS 端需要調(diào)用 js 方法。
可以通過第三方庫來實現(xiàn)，我們項目用的是 WebViewJavascriptBridge辜妓。
下面介紹我怎么在 vue 項目中使用 WebViewJavascriptBridge
WebViewJavascriptBridge GitHub 地址創(chuàng)建 src/config/bridge.js 文件，
用于封裝 WebViewJavascriptBridge將以下代碼拷貝到 bridge.js 文件中
function setupWebViewJavascriptBridge (callback) {
? if (window.WebViewJavascriptBridge) {
? ? return callback(window.WebViewJavascriptBridge)? }
? if (window.WVJBCallbacks) {
? ? return window.WVJBCallbacks.push(callback)? }
? window.WVJBCallbacks = [callback]
? let WVJBIframe = document.createElement('iframe')
? WVJBIframe.style.display = 'none'
? WVJBIframe.src = 'https://__bridge_loaded__'? document.documentElement.appendChild(WVJBIframe)
? setTimeout(() => {
? ? document.documentElement.removeChild(WVJBIframe)? }, 0)
}
export default {
? ? callhandler (name, data, callback) {
? ? ? ? ? ? setupWebViewJavascriptBridge(function (bridge) {
? ? ? ? ? ? ? ? ? bridge.callHandler(name, data, callback)? ? })
? ? ? ? ? ? },
? ? registerhandler (name, callback) {
? ? ? ? ? ? setupWebViewJavascriptBridge(function (bridge) {
? ? ? ? ? ? ? ? ? ? ? bridge.registerHandler(name, function (data, responseCallback) {
? ? ? ? ? ? ? ? callback(data, responseCallback)
? ? ? ? ? })
? ? ? })
? }
}
在 main.js 中引入該文件
import Bridge from './config/bridge.js'
Vue.prototype.$bridge = Bridge
在需要調(diào)用客戶端方法的組件中（事先需要與客戶端同事約定好方法名）
this.$bridge.callhandler('ObjC Echo', params, (data) => {
? // 處理返回數(shù)據(jù)
})
當客戶端需要調(diào)用 js 函數(shù)時,事先注冊約定好的函數(shù)即可
this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {
? ? alert('JS Echo called with:', data)? responseCallback(data)
})
搜索微信公眾號
“前端小偉的編程歷史”
回復 想要你的技術(shù)資料（例如：JavaScript） 就會通通免費給你送上
會持續(xù)更新各種編程技術(shù)視頻
