微信小程序和H5页面之间的通信

小程序和h5页面之间的通信

前言

• 小程序webview组件对嵌入的H5页面有要求、必须在小程序管理后台配置为合法的业务域名。
• H5页面调用小程序的能力有限，详情可参见微信小程序API

H5端

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

  https://res.wx.qq.com/open/js/jweixin-1.3.2.js

• 在按钮点击处，给小程序发送信息

  <!-- 具体参数、具体分析 -->
  wx.miniProgram.postMessage({ data: 'foo' })
  <!-- 详见`坑`处的说明 -->
  wx.miniProgram.navigateBack()

小程序端

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

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

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

  receivePostMsg:function(e){
      console.log("收到的消息是",e)
      app.globalData.isSHowKefu = true
  }

坑

• 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。所以想收到消息的时候，就要做下上面的操作才可以。比如发消息之后，在执行个页面回退等。

  <!--具体参数再商议-->
  wx.miniProgram.postMessage({ data: 'foo' })
  <!--需回退到小程序上层页面-->
  wx.miniProgram.navigateBack()