vue获取安卓原生方法_vue与原生混合开发如何与原生安卓,IOS交互

前言介绍

使用 WebViewJavascriptBridge当 H5 页面与 安卓 端交互比较复杂时&＃xff0c;比如页面需要获取 安卓 端传回的返回值&＃xff0c;或者 安卓 端需要调用 js 方法。可以通过第三方库来实现&＃xff0c;   我的项目用的是 WebViewJavascriptBridge

1.创建 src/config/bridge.js 文件&＃xff0c;用于封装 WebViewJavascriptBridge

2.将以下代码拷贝到 bridge.js 文件中

function setupWebViewJavascriptBridge(callback) {

if (window.WebViewJavascriptBridge) {

return callback(window.WebViewJavascriptBridge)

}

if (window.WVJBCallbacks) {

return window.WVJBCallbacks.push(callback)

}

window.WVJBCallbacks &＃61; [callback]

let WVJBIframe &＃61; document.createElement(&＃39;iframe&＃39;);

WVJBIframe.style.display &＃61; &＃39;none&＃39;

WVJBIframe.src &＃61; &＃39;https://__bridge_loaded__&＃39;

document.documentElement.appendChild(WVJBIframe);

setTimeout(() &＃61;> {

document.documentElement.removeChild(WVJBIframe)

}, 0)

}

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)

})

})

}

}

3.在 main.js 中引入该文件

import Bridge from &＃39;./config/bridge.js&＃39;

Vue.prototype.$bridge &＃61; Bridge

4.然后调取你想要的方法&＃xff0c;也就是安卓或则IOS给你写的方法(事先需要与客户端同事约定好方法名)

this.$bridge.callhandler(&＃39;方法名&＃39;, params, (data) &＃61;> { // 处理返回数据})

以下为我的代码

5.这样就可以调到安卓或则IOS给你写的方法了

6.安卓或IOS调你的JS方法

this.$bridge.registerhandler(&＃39;JS Echo&＃39;, (data, responseCallback) &＃61;> { alert(&＃39;JS Echo called with:&＃39;, data) responseCallback(data)})

7.打包 最关键的一步  &＃xff0c;因为你现在运用了iOS和安卓给你提供的方法 &＃xff0c;所以打包时 &＃xff0c;也需要把他们 的代码集成在一起打包进去&＃xff0c;这时  用简单的Hbuilder打包肯定不行了&＃xff0c;如果是安卓端的话就需要用android studio打包了 把vue npm ru build出来的dist目录中的index.html放这里

同时注意这里也要改动

这布具体问安卓开发&＃xff0c;因为我不是专业安卓开发

写的不是详细