一、前言
为了开发Hybrid App，在vue项目中通过对WebViewJavaScriptBridge第三方库的封装，创建一个桥梁，实现H5和android、ios的通信。
也可以去github查看详细的WebViewJavascriptBridge介绍
二、创建文件
创建 src/utils/jsBridge.js 文件，用于封装 WebViewJavascriptBridge
const App = {}
// 计数
let failNum = 0;
// 获取型号
App.userAgent = navigator.userAgent
// 是否在android APP中运行
App.isAndroidApp = /application_ccicAndroid/i.test(App.userAgent);
// 是否在iPhone APP中运行
App.isiPhoneApp = /application_ccicIos/i.test(App.userAgent);
// 这里主要是注册 OC 将要调用的 JS 方法。
App.setupWebViewJavascriptBridge = function(callback) {
// 执行监听 && 检测 JSBridge需要一个契机去告诉JS，我准备好了，你可以来调用我的方法了
if (window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
} else {
document.addEventListener('WebViewJavascriptBridgeReady',function() { callback(WebViewJavascriptBridge);},false);
}
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback]; // 创建一个 WVJBCallbacks 全局属性数组，并将 callback 插入到数组中。
var WVJBIframe = document.createElement('iframe'); // 创建一个 iframe 元素
WVJBIframe.style.display = 'none'; // 不显示
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; // 设置 iframe 的 src 属性
document.documentElement.appendChild(WVJBIframe); // 把 iframe 添加到当前文导航上。
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
};
// 与原生交互方法
App.callNative = function(data) {
if (App.isiPhoneApp) {
App.setupWebViewJavascriptBridge(function(bridge) {
/*
* 封装 JS 调用了 OC 的方法
* data.fun 是传递给 OC 的方法名
* data.data 是传递给 OC 的数据
* function 是 JS 调用完毕之后OC的回调
* responseData 是 OC 传递过来的数据.
*/
// jsbridge.callHandler是JS调Native方法的核心
bridge.callHandler(data.fun, data.data, function responseCallback(responseData) {
if (typeof data.callback === 'function') {
data.callback(responseData);
}
});
});
} else if (App.isAndroidApp) {
/*
*andorid从老系统返回时偶尔报错callHandler不是一个function，
*应该是还未注入到webview，使用setTimeout反复调用
*/
if ((!window.WebViewJavascriptBridge) || (!window.WebViewJavascriptBridge.callHandler)) {
failNum++;
if (failNum > 50) {return;} // 设置失败超过50次后停止
setTimeout(() => {App.callNative(data);}, 300)
return;
}
/*
* 封装 JS 调用了安卓方法
*/
window.WebViewJavascriptBridge.callHandler(data.fun, data.data, function(res) {
let responseDataJson = {};
if (res) {responseDataJson = JSON.parse(res);}
if (typeof data.callback === 'function') {data.callback(responseDataJson);}
});
}
};
export default App
三、在jsBridge.js中封装设置调取原生的方法
这里的fun方法名是需要跟原生小伙伴商量确定的，这里封装的app.方法名习惯性的和调取原生的方法名一致，方便管理。
app.fun方法名 = function(req){
app.callNative({
fun: 'fun方法名',
data: {
参数1: req.aaa,
},
callback: req.fun
});
}
四、项目引用
在main.js中引入封装的jsBridge.js
import bridge from '/utils/jsBridge';
Vue.prototype.$bridge = bridge;
五、js调原生使用
let data = {
aaa:'',
bbb:''
}
this.$bridge.fun方法名( data )
六、OC主动调用 JS 的方法
//声明 OC 需要主动调用 JS 的方法
app.setupWebViewJavascriptBridge(function(bridge) {
/*
* testFun： 是注入到桥梁中 JS 函数的别名。以供 OC 端调用。
* data： OC 端传递过来的数据。
* responseCallback：JS 调用在被 OC 调用完毕之后，向 OC 端传递的数据的一个回调。
*/
bridge.registerHandler('testFun ', function(data,responseCallback){
testFun (data) // 此处用的方法名和桥梁中注册的方法名一致，个人习惯，也方便管理
});
}
// 官方给出下面两种调用方式，可以根据自己项目情况来选择合适的方法：
bridge.registerHandler("showAlert", function(data) { alert(data) })
bridge.registerHandler("getCurrentPageUrl", function(data, responseCallback) {
responseCallback(document.location.toString())
})
