小程序与webview通信传参

在小程序中，只要每次修改代码或者增加新的内容都是需要发版才行，常常用到与一些活动页面，这个时候小程序提供的webview就可以解决这个问题，通过调用H5页面，传参完成一些常用的功能。以后每次更改的时候，只需要修改H5页面就行。

• 小程序webview组件对嵌入的H5页面有要求、必须在小程序管理后台配置为合法的业务域名。

H5端

• H5页面需要引用微信提供的官方sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

• 通过绑定一个点击事件去触发一个方法给小程序通信,data就是我们需要传的参数给小程序

wx.miniProgram.postMessage({
          data: {
            value,
            name,
            phone,
            address,
          },
        })

小程序端

• 页面中添加webview组件、并添加监听事件

<web-view src="{{src}}" bindmessage='receivePostMsg'></web-view>  

• js里面添加监听事件,e里面可以看到传递的参数，根据收到的信息进行相应操作

receivePostMsg(e) {
    console.log(e)
  },

通信之间的坑

• 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。所以想收到消息的时候，就要做下上面的操作才可以。比如发消息之后，在执行个页面回退等。
• 所以这个小程序只能在特定的时机去触发，需要调用一个微信发方法wx.miniProgram.navigateBack()返回上一级页面，然后就可以打印东西

if (name || phone || address || value) {
        wx.miniProgram.postMessage({
          data: {
            value,
            name,
            phone,
            address,
          },
        })
        wx.miniProgram.navigateBack()
      }

• 这样就可以解决传参的问题。