封装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写在本地的提交方法 })
实际应用--在填写完资料后客户端点击右上角保存按钮
参考文章
