h5(vue)嵌套ios和android雙向交互

之前跟客戶端聯調可能沒有注意到細節問題，這次開發又遇到聯調，統一整理下，然後自己也封裝一套基礎代碼
注意android以下情況---安卓沒帶參數，h5端也需要不帶參數 ,安卓需要參數，這邊也需要攜帶參數 否則有bug
注意ios情況下 就算ios不需要攜帶參數，也需要傳空

封裝bridge.js

// 封裝一個bridge.js 文件 ,然後並把這個文件在main.js 掛載到vue原型上
import utils from '@extend/util/util.js'
// utils.deviceType 是獲取設備類型的方法
export default {
    callhandler (name,callback,data) {
        let result = '';
        if(utils.deviceType === 'Android'){
            if(data){
                // 這是android提前與安卓開發人員協商好
                result = window.android[name](data);
            }else{
                window.android[name]();
            }
        }
        if(utils.deviceType === 'IOS'){
            result = window.webkit.messageHandlers[name].postMessage(data);
        }
        // 這裏考慮到可能有的api有返回值,所以返回了個result
        callback && callback(result)
    },
    registerhandler (name, callback) {
        if(utils.deviceType === 'Android' || utils.deviceType === 'IOS'){
            window[name] = res => {
                let data = '';
                if(res){
                    data = JSON.parse(JSON.stringify(res)) 
                }
                callback && callback(data)
            }
        }
    }
}

H5調用客戶端

// 只需要一句話調用即可
this.$bridge.callhandler('finish');

實際應用--在填寫完資料後通知客戶端

客戶端調H5

// 需要提前先註冊
this.$bridge.registerhandler('setUserInfo', () => {
    this.commit() // commit寫在本地的提交方法
})

實際應用--在填寫完資料後客戶端點擊右上角保存按鈕

參考文章
WebViewJavascriptBridge