h5vue嵌套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