通过JsBridge进行app与webview通信(Android版)
一、问题现在很多app都是嵌套h5页面的混合型app,实现方式就是app加一个webview,webview加入h5的项目地址,那么有时候我们需要获取设备id、获取定位等等信息,都是h5获取不了的,这时候就需要app与h5建立一个通信,实现信息传输,我们可以使用JsBridge来实现这个需求。
二、JsBridge通过JsBridge,Web端可以调用Native端的Java接口,同样Native端也可以通过JsBridge调用Web端的JavaScript接口,实现彼此的相互调用。
了解JsBridge-https://github.com/lzyzsd/JsBridge
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.在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>
四、结合Android实现效果
通过JsBridge进行app与webview通信(Android版)
运行出来的界面
JS 通过 JSBridge 调用 Android
Android 通过 JSBridge 调用 JS
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)