uniapp app内嵌h5的通信方式

笔者由于项目需要，需要在一个app壳子中内嵌h5来实现业务，需要用到app的扫码能力，顾整理此篇文章，贴一个官方地址https://uniapp.dcloud.net.cn/component/web-view.html#web-view

1. h5端

将uni的sdk下载到本地https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js

在main.js中引入，当然为了纯洁也可以单独写个文件,然后监听其UniAppJSBridgeReady，待UniAppJSBridgeReady触发后将uni的api挂载到原型上

import * as myUni from './js/index.js'
document.addEventListener("UniAppJSBridgeReady", function() {  
    Vue.prototype.myUni = myUni  
});复制

h5需要使用扫码能力时，向app发送消息，参数只能写在data中，更多的限制请参考官方文档

this.myUni.webView.postMessage({
     data: {
         type: 'normalScan'
      },  
})复制

2. app端

使用uniapp的webview组件嵌套h5，通过message事件监听h5发送过来的信息

<view class="" style="height: 400px;">
    <web-view @message="listenPost" src=""></web-view>
</view>复制

这里h5因为是多个地方需要用到扫码能力，通过type来确定其扫码类型，然后使用evalJS定向的触发h5对应挂载到window的方法,这里需要注意的是使用evalJS传递参数时，如果是对象需要序列化，如果是字符串需要将字符串放置在''中，like下面

listenPost(e){
    const type = e.detail.data[0].type;
    this.getScanCode(type)
},
getScanCode(type){
    let that = this;
     uni.scanCode({
         onlyFromCamera: true,
         scanType: ['qrCode'],
         success: function (res) {
              //获取webview对象
              const currentWebview = that.$scope.$getAppWebview().children()[0];
              currentWebview.evalJS(`${type}('${res.result}')`)
          }
      });
 },复制

扫码完成后触发h5传递的type：normalScan挂载在h5window上的方法,这个方法应与h5调用扫码能力的方法在同一个页面，便于维护

window.normalScan = function(arg) {
// do something
}复制