为了开发Hybrid App,在vue项目中通过对WebViewJavaScriptBridge第三方库的封装,创建一个桥梁,实现H5和android、ios的通信。也可以去github查看详细的介绍WebViewJavascriptBridge
新建封装文件
创建src/utils/jsBridge.js
文件,用于封装WebViewJavascriptBridge
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
| const App = {}
let failNum = 0;
App.userAgent = navigator.userAgent
App.isAndroidApp = /application_ccicAndroid/i.test(App.userAgent);
App.isiPhoneApp = /application_ccicIos/i.test(App.userAgent);
App.setupWebViewJavascriptBridge = function(callback) { 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]; var WVJBIframe = document.createElement('iframe'); WVJBIframe.style.display = 'none'; WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; document.documentElement.appendChild(WVJBIframe); setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0) };
App.callNative = function(data) { if (App.isiPhoneApp) { App.setupWebViewJavascriptBridge(function(bridge) {
bridge.callHandler(data.fun, data.data, function responseCallback(responseData) { if (typeof data.callback === 'function') { data.callback(responseData); } }); }); } else if (App.isAndroidApp) {
if ((!window.WebViewJavascriptBridge) || (!window.WebViewJavascriptBridge.callHandler)) { failNum++; if (failNum > 50) {return;} setTimeout(() => {App.callNative(data);}, 300) return; }
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
|
调取App原生方法
在jsBridge.js
中封装设置调取原生的方法,下面的fun方法名
是需要跟原生小伙伴商量确定的,这里封装的app.方法名
习惯性的和调取原生的方法名一致,方便管理。
1 2 3 4 5 6 7 8 9
| app.fun方法名 = function(req){ app.callNative({ fun: 'fun方法名', data: { 参数1: req.aaa, }, callback: req.fun }); }
|
项目中使用
在vue项目中使用,在main.js
中引入封装的jsBridge.js
1 2
| import bridge from '/utils/jsBridge'; Vue.prototype.$bridge = bridge;
|
js调原生使用
1 2 3 4 5
| let data = { aaa:'', bbb:'' } this.$bridge.fun方法名( data )
|
OC主动调用 JS 的方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| app.setupWebViewJavascriptBridge(function(bridge) {
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()) })
|
完成上面操作后,就完成了 h5
和 App
之间桥梁打通操作,后面只需要跟原生
商量方法名即可。