前言介紹
使用 WebViewJavascriptBridge當 H5 頁面與 安卓 端交互比較復雜時，比如頁面需要獲取?安卓 端傳回的返回值，或者?安卓 端需要調用 js 方法?？梢酝ㄟ^第三方庫來實現，? ?我的項目用的是?WebViewJavascriptBridge
1.創(chuàng)建 src/config/bridge.js 文件，用于封裝 WebViewJavascriptBridge
2.將以下代碼拷貝到 bridge.js 文件中
function setupWebViewJavascriptBridge(callback) {
? ? 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)
? }
? 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 './config/bridge.js'
??Vue.prototype.$bridge = Bridge
4.然后調取你想要的方法，也就是安卓或則IOS給你寫的方法（事先需要與客戶端同事約定好方法名）
this.$bridge.callhandler('方法名', params, (data) => { // 處理返回數據 })
以下為我的代碼
5.這樣就可以調到安卓或則IOS給你寫的方法了?
6.安卓或IOS調你的JS方法
this.$bridge.registerhandler('JS Echo', (data, responseCallback) => { alert('JS Echo called with:', data) responseCallback(data) })
7.打包 最關鍵的一步? ，因為你現在運用了iOS和安卓給你提供的方法 ，所以打包時 ，也需要把他們 的代碼集成在一起打包進去，這時? 用簡單的Hbuilder打包肯定不行了，如果是安卓端的話就需要用android studio打包了 把vue npm ru build出來的dist目錄中的index.html放這里
同時注意這里也要改動
這布具體問安卓開發(fā)，因為我不是專業(yè)安卓開發(fā)
寫的不是詳細?
