小程序和h5之间的通讯及注意事项

起因：在小程序中嵌入已有的h5页面，用于快速开发。但是h5和小程序中的事件通讯是需要解决的问题。参照官网后实践之后得出结论。

  • web-view 和小程序通信使用 getMessage接收消息 postMessage发送消息（类似iframe）
小程序中
<web-view  bindmessage='getMessage' src="{{webUrl}}"></web-view>
getMessage(e) {
    console.log('getMessage');
    console.log(e);
},

h5中
let postData = {
  url: window.location.href,
  title: '11111111',
  image: '1111111dfsdfsdfdfs',
  shareLink: this.shareLink,
  radShareTypeId: this.radShareTypeId,
  timeVal: this.timeVal,
  selectedTimestamp: this.selectedTimestamp
};
console.log('微信wx');
console.log(wx);
wx.miniProgram.postMessage({ data: JSON.stringify(postData) });
  • web-view 不能做支付功能
  • web-view ios不能屏蔽分享菜单
  • web-view 与小程序的通信只能在分享，小程序后退，页面销毁是触发
  • web-view 如果是个人版不支持此组件
  • web-view 分享可动态传参
  • 小程序刷新路径参数丢失
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容