iOS UIWebView 加載Vue的Html頁面（JavaScriptCore）：
- iOS調用Vue方法
-
Vue的方法給原生調用，則需要把方法掛在window下面：
image.png -
在iOS中這樣調用Vue的方法，如下：
image.png
或者定義JSContext屬性，在UIWebViewDelegate的代理方法里：
image.png
然后用context來調用js方法：
image.png
- Vue調用iOS方法
-
iOS引入<JavaScriptCore/JavaScriptCore.h>，并聲明JSContext類的屬性
image.png
在UIWebViewDelegate的代理方法里面用context屬性聲明一個方法供js調用：
image.png -
在Vue中里面直接用window.<方法名>調用iOS的方法：
image.png
iOS WKWebView 加載Vue的Html頁面（messageHandlers）：
- iOS調用Vue方法
-
Vue的方法給原生調用，則需要把方法掛在window下面：
image.png -
在iOS中這樣調用Vue的方法，如下：
image.png
- Vue調用iOS方法
-
在iOS中定義WKWebViewConfiguration并設置userContentController，遵守WKScriptMessageHandler協議，如下：
image.png
在WKScriptMessageHandler協議的代理方法里面根據message.name來判斷js是否調用并作出相關的處理，message.body即為js傳過來的參數：
image.png -
在Vue中調用iOS的方法，如下：
image.png
統一使用WebViewJavascriptBridge：
Github地址
在Vue中引入WebViewJavascriptBridge：
- 創建 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]
var WVJBIframe = document.createElement('iframe')
WVJBIframe.style.display = 'none'
WVJBIframe.src = 'https://__bridge_loaded__'
document.documentElement.appendChild(WVJBIframe)
setTimeout(function () {
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
在需要調用客戶端方法的組件中（事先需要與iOS端同事約定好方法名）
this.$bridge.callhandler('ObjC Echo', params, (data) => {
// 處理返回數據
})
當客戶端需要調用 js 函數時,事先注冊約定好的函數即可
this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {
alert('JS Echo called with:', data)
responseCallback(data)
})
