Vue使用jsBridge与APP交互
jsBridge 介绍JSBridge是一座用JavaScript搭建起来的桥,一端是web,一端是native。我们搭建这座桥的目的也很简单,让native可以调用web的js代码,让web可以 “调用” 原生的代码。编写jsBridge文件/* eslint-disable */function setupWebViewJavascriptBridge(callback) {if (windo
·
jsBridge 介绍
JSBridge是一座用JavaScript搭建起来的桥,一端是web,一端是native。我们搭建这座桥的目的也很简单,让native可以调用web的js代码,让web可以 “调用” 原生的代码。
编写jsBridge文件
/* eslint-disable */
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function () {
callback(WebViewJavascriptBridge)
}, false);
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)
}
}
//初始化
setupWebViewJavascriptBridge(function (bridge) {
try {
bridge.init(function (message, callback) {
callback(null);
})
} catch (e) { }
});
export default {
//js调APP方法 (参数分别为:app提供的方法名 传给app的数据 回调)
callhandler: function (method, params, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.callHandler(method, params, callback)
})
},
// APP调js方法 (参数分别为:js提供的方法名 回调)
registerHandler(method, callback) {
setupWebViewJavascriptBridge((bridge) => {
bridge.registerHandler(method, (data, responseCallback) => {
callback(data, responseCallback)
})
})
}
}
引入
//注册jsBridge 并挂载全局
import Bridge from './http/jsBridge.js'
Vue.prototype.$bridge = Bridge;
调用
H5调用APP方法
this.$bridge.callhandler("getTID", "", responseData => {
let res = JSON.parse(responseData);
console.log(res,'res');
});
APP调用H5方法
this.$bridge.registerHandler("getTimes", (datas, responseCallback) => {
console.log(datas);
});
注意:
1.不管是APP调用js还是js调用APP方法,方法名需要沟通好否则接受不到
2.APP调用js方法时,H5页面初始化的时候就需要调用后续APP调用js的方法。
例如在mounted生命周期内调用getTimes这个方法,初始化不调用后期APP调用后H5接收不到
更多推荐
已为社区贡献11条内容
所有评论(0)