注册初始化方法JsBridge
javascript
//JS注册事件监听
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
//Android主动发送消息给JS:无方法名
connectWebViewJavascriptBridge(function(bridge) {
//初始化
bridge.init(function(message, responseCallback) {
var data = {
'Javascript Responds': '我是JS的回复消息'
};
responseCallback(data);
});
//Android->签名图片
bridge.registerHandler("test1", function(data, responseCallback) {
var responseData = "666";
responseCallback(responseData);
});
})
export default {
registerHandler: function(name, fun) {
connectWebViewJavascriptBridge(function(jsbridge) {
//Android调用js方法:functionInJs方法名称需要保持一致 ,并返回给Android通知
jsbridge.registerHandler(name, function(data, responseCallback) {
responseCallback(fun(data));
});
})
},
callHandler: function(name, data, fun) {
connectWebViewJavascriptBridge(function(jsbridge) {
//JS调用Android方法:接收Android传递过来的数据,并做处理
jsbridge.callHandler(name, data, function(data) {
fun(data);
});
})
}
}
在main.js中引入注册
javascript
import JsBridge from '@/static/JsBridge/JsBridge.js';
Vue.prototype.$jsbridge = JsBridge
使用实例
javascript
//registerHandler监听事件
this.$jsbridge.registerHandler('test1', (data) => {
alert(data)
})
//callHandler触发事件
this.$jsbridge.callHandler('test2', {
'data': "123"
}, (data) => {
alert(data)
})
注意!!!监听事件需要在初始化方法JsBridge中注册才能使用