1.封装一个JsBridge方法
//自定义JS注册事件监听 connectWebViewJavascriptBridge 方法名可改
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(window.WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, ()=> {
callback(window.WebViewJavascriptBridge)
},
false
);
}
}
//注册回调函数,第一次连接时调用 初始化函数 connectWebViewJavascriptBridge和上面一致
connectWebViewJavascriptBridge(function(jsbridge) {
//初始化 必须有 Android 通过 JSBridge 调用 默认JS bridge.init bridgeWebView.send调用
jsbridge.init(function(message, callback) {
callback({'Javascript Responds': 'Android调用JS初始化方法!'});
});
})
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);
});
})
}
}
2.main.js
import JsBridge from "./utils/JsBridge"
Vue.prototype.$jsbridge = JsBridge;
3.在app.vue使用(其他文件也可以)
<template>
<div id="app">
<div class="mianBox">
<div>app主动发送数据给h5:{{monitor}}</div>
<div>h5触发app方法接收的结果:{{contnet}}</div>
<button @click="getData" >调用app方法getAppData</button>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
contnet:"",
monitor:""
}
},
mounted(){
// 监听app触发monitorTestData,进行监听接收数据
this.$jsbridge.registerHandler('monitorTestData', (data) => {
console.log("监听到的数据",data)
this.monitor= data;
})
},
methods:{
getData(){
// 触发 app 内部设定好的方法,触发完成会有回调接收结果
this.$jsbridge.callHandler('getAppData',{'param': "你好,这是我JS传递给你的数据"}, (data) => {
console.log("获取到的数据",data)
this.contnet = data;
})
}
}
}
</script>
<style>
#app {
height: 100%;
}
</style>
每天一个新知识,一起加油吧!