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

封装bridge.js

H5调用客户端

客户端调H5

更多相关文章

随机推荐