标签:reg lse ipo androi event data main prot nbsp
最近在app 原生页面 嵌套 做Vue 的H5,混合开发,当然原生和Vue 交互方面当然用到 WebViewJavascriptBridge 这个东西啦,
当然在用到的时候也有问题,可以参考大佬的写法 然后结合自己的写法 ,自己整除一套适合的代码
这个是 https://github.com/marcuswestin/WebViewJavascriptBridge 这个是对WebViewJavascriptBridge 描述,不懂的可以去看看么
1.创建 src/utils/bridge.js 文件,用于封装 WebViewJavascriptBridge
//判断机型 let u = navigator.userAgent; function setupWebViewJavascriptBridge(callback) { //var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断ios 还是Android if (/(iPhone|iPad|iPod|iOS)/i.test(u)) { if (window.WebViewJavascriptBridge) { return callback(window.WebViewJavascriptBridge) } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback) } window.WVJBCallbacks = [callback] let WVJBIframe = document.createElement(‘iframe‘) WVJBIframe.style.display = ‘none‘ WVJBIframe.src = ‘https://__bridge_loaded__‘ document.documentElement.appendChild(WVJBIframe) setTimeout(() => { document.documentElement.removeChild(WVJBIframe) }, 0) } } //安卓注册事件监听 function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( ‘WebViewJavascriptBridgeReady‘, function () { callback(WebViewJavascriptBridge) }, false ); } } connectWebViewJavascriptBridge(function (bridge) { //初始化 if (!/(iPhone|iPad|iPod|iOS)/i.test(u)) { console.log("初始化") bridge.init(function (message, responseCallback) { //var data = {‘Javascript Responds‘: ‘Wee!‘}; responseCallback(data); }); } }); export default { callHandler(name, data, callback) { setupWebViewJavascriptBridge(function (bridge) { bridge.callHandler(name, data, callback) }) }, registerhandler(name, callback) { setupWebViewJavascriptBridge(function (bridge) { bridge.registerHandler(name, function (data, responseCallback) { callback(data, responseCallback) }) }) } }
2、在main.js 中引入.
import Bridge from ‘./utils/bridge.js‘
Vue.prototype.bridgeObj = Bridge
3.在需要调用客户端方法的组件中(事先需要与客户端同事约定好方法名)
this.$bridge.callhandler(‘ObjC Echo‘, params, (data) => { // 处理返回数据 })
4.当客户端需要调用 js 函数时,事先注册约定好的函数即可
this.$bridge.registerhandler(‘JS Echo‘, (data, responseCallback) => { alert(‘JS Echo called with:‘, data) responseCallback(data) })
当然 我是封装了 这些方法在utils中,代码就不放出来了,
这样就可以调用啦, 适配ios 和android
完美哦 ,嘻嘻
vue项目 WebViewJavascriptBridge 适配android和ios
标签:reg lse ipo androi event data main prot nbsp
原文地址:https://www.cnblogs.com/yf-html/p/11304694.html