美文网首页
小程序和h5之间的通讯及注意事项

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

作者: 站在大神的肩膀上看世界 | 来源:发表于2022-05-10 14:46 被阅读0次

起因:在小程序中嵌入已有的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 分享可动态传参
  • 小程序刷新路径参数丢失

相关文章

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

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

  • 微信小程序跳转

    最近整理了下微信官方提供的微信小程序与小程序、h5、公众号、app应用的跳转实现方式及一些规则注意事项 小程序-》...

  • 干货|一篇文章读懂小程序、APP、H5之间的区别!

    自从小程序上线以后,就有人一直拿小程序和APP、H5比较,那么小程序和APP之间到底有那些差距呢? 小程序与H5相...

  • 小程序之社交

    主要内容:小程序调用AppApp调用小程序App分享小程序小程序自身分享功能小程序与H5交互小程序之间互相跳转绘制...

  • 微信小程序(三)小程序中的JS

    本节目标 了解小程序JS的基本情况 了解小程序JS运行环境及开发注意事项 (一) 小程序Javascript 开发...

  • 小程序和H5页面互相跳转的实现

    需求体现: 在小程序里面,实现小程序和H5页面互相跳转。 1. 实现H5页面跳转小程序 小程序里面加载H5页面,需...

  • uni-app兼容H5和小程序的setClipboardData

    uni-app兼容H5和小程序的setClipboardData,目前只测试微信小程序和H5。 核心代码来自这里:...

  • 微信小程序开发知识点总结

    微信小程序自我小总结 微信小程序是一个介于原生app和H5之间的一个东东。不过微信小程序是依赖微信开发平台的,甚至...

  • 小程序页面之间如何通讯

    首先将通信的模型列举出来, 分为以下几种 1.兄弟页面间通信2.父路径页面向子路径页面通信3.子路径页面向父路径页...

  • 小程序笔记

    小程序示例及源码 注意事项a. 开始标签和结束标签中空格和换行都有实际效果...

网友评论

      本文标题:小程序和h5之间的通讯及注意事项

      本文链接:https://www.haomeiwen.com/subject/memlurtx.html