vue實現與安卓、IOS交互

方案背景

• IOS用的是jsBridge插件實現調用、傳參、回調的
• 安卓是在window掛載方法和掛載回調的

IOS實現方案

• 調用原生方法封裝以下

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)
}
function callhandler (name, data, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
        bridge.callHandler(name, data, callback)
    })
}

• 實際調用以下

callhandler(functionName: string, params: object, res => {})

• 註冊方法給原生

registerhandler (name, callback) {
    // 安卓
    window[name] = res => {
      let data = JSON.parse(res)
      callback(data)
    }
    // IOS
    setupWebViewJavascriptBridge(function (bridge) {
        bridge.registerHandler(name, function (data, responseCallback) {
            callback(data, responseCallback)
        })
    })
}

安卓實現方案

• 調用原生方法

window.HTTP_TEST.functionName()

• 定義回調方法/註冊方法給原生

window['functionName'] = res => {}

特殊說明

1. 安卓在交互中的參數傳遞只能支持string類型，對象參數要轉成string傳遞
2. 由於安卓的回調方法名是固定的，同一方法同時請求兩次以上時，有可能只獲得一次回調。若是用隨機數處理就會不斷地在window上掛載新的函數，調用次數過多可能會出問題，因此目前是避免同時請求同一方法來解決的。若是有需求避免不了，那仍是要用隨機數解決。