各种百度之后,在别的站看到一篇文章,介绍可以使用 WebViewJavascriptBridge与原生app进行通信;
在项目中尝试了一下,确实有效记录一下。
原文链接:
https://blog.csdn.net/szjSmiling/article/details/82773293
1,引入第三方WebViewJavascriptBridge的库
1 function setupWebViewJavascriptBridge(callback) {
2 if (window.WebViewJavascriptBridge) {
3 return callback(window.WebViewJavascriptBridge)
4 }
5 if (window.WVJBCallbacks) {
6 return window.WVJBCallbacks.push(callback)
7 }
8 window.WVJBCallbacks = [callback]
9 let WVJBIframe = document.createElement('iframe');
10 WVJBIframe.style.display = 'none'
11 WVJBIframe.src = 'https://__bridge_loaded__'
12 document.documentElement.appendChild(WVJBIframe);
13 setTimeout(() => {
14 document.documentElement.removeChild(WVJBIframe)
15 }, 0)
16 }
17 export default {
18 callhandler(name, data, callback) {
19 setupWebViewJavascriptBridge(function (bridge) {
20 bridge.callHandler(name, data, callback)
21 })
22 },
23 registerhandler(name, callback) {
24 setupWebViewJavascriptBridge(function (bridge) {
25 bridge.registerHandler(name, function (data, responseCallback) {
26 callback(data, responseCallback)
27 })
28 })
29 }
30 }
新建一个js文件,把上面的代码复制粘贴就好了
2,在main.js中引入文件
import Bridge from './assets/js/bridge.js'
Vue.prototype.$bridge = Bridge
3,调用方法
let ua = navigator.userAgent;
let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
// console.log(isAndroid, '安卓')
// console.log(isiOS, 'ios')
if (isiOS) {
this.$bridge.callhandler('popToStudyRootVC', (data) => {
// 处理返回数据
console.log(data, '我走了这里')
})
}
popToStudyRootVC:是有原生开发的同事定义的方法名
这样就完成了