Communication between app and webview through JsBridge (Android version)
1. Problems
Now many apps are hybrid apps with nested h5 pages. The way to achieve this is to add a webview to the app, and add the project address of h5 to the webview. Then sometimes we need to obtain device id, location and other information, which cannot be obtained by h5. , At this time, it is necessary for the app to establish a communication with h5 to realize information transmission. We can use JsBridge to realize this requirement.
Two, JsBridge
Through JsBridge, the Web side can call the Java interface of the Native side, and the Native side can also call the JavaScript interface of the Web side through JsBridge to realize mutual calls.
Learn about JsBridge - https://github.com/lzyzsd/JsBridge
3. Vue2 combined with WebViewJavascriptBridgeReady
1. Encapsulate a JsBridge method
JsBridge.js
//自定义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. Use in app.vue (other files are also available)
<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>
4. Combining with Android to realize the effect
Communication between app and webview through JsBridge (Android version) The interface JS
running out calls Android through JSBridge Android calls JS through JSBridge
