vue项目使用WebViewJavascriptBridge
WebViewJavascriptBridge当 H5 页面与 IOS 端交互比较复杂时,
比如页面需要获取 IOS 端传回的返回值,或者 IOS 端需要调用 js 方法。
可以通过第三方库来实现,我们项目用的是 WebViewJavascriptBridge。
下面介绍我怎么在 vue 项目中使用 WebViewJavascriptBridge
WebViewJavascriptBridge GitHub 地址创建 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
在需要调用客户端方法的组件中(事先需要与客户端同事约定好方法名)
this.$bridge.callhandler('ObjC Echo', params, (data) => { // 处理返回数据 })
当客户端需要调用 js 函数时,事先注册约定好的函数即可
this.$bridge.registerhandler('JS Echo', (data, responseCallback) => { alert('JS Echo called with:', data) responseCallback(data) })