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

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

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

  • web-view 和小程序通信使用 getMessage接收消息  postMessage发送消息(类似iframe)

```

小程序中

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 分享可动态传参
  • 小程序刷新路径参数丢失
相关文章
|
2月前
|
移动开发 小程序 API
【小程序质量提优解决方案】(三)内嵌H5页面访问受限
【小程序质量提优解决方案】(三)内嵌H5页面访问受限
85 0
|
2月前
|
移动开发 小程序 JavaScript
【小程序质量提优解决方案】(二)内嵌H5加载异常(404)
【小程序质量提优解决方案】(二)内嵌H5加载异常(404)
35 0
|
4月前
|
Web App开发 移动开发 小程序
"项目中mpaas升级到10.2.3 适配Android 14之后 app中的H5以及小程序都访问不了,
"项目中mpaas升级到10.2.3 适配Android 14之后 app中的H5以及小程序都访问不了,显示“网络不给力,请稍后再试”,预发内网版本不能使用,线上版本可以正常使用,这个是什么原因啊,是某些参数没有配置吗,还是说是一些参数改错了?
59 2
|
2月前
|
移动开发 运维 小程序
【4月开发者日回顾】小程序审核驳回增加页面截图;H5域名白名单的配置将实时生效……
【4月开发者日回顾】小程序审核驳回增加页面截图;H5域名白名单的配置将实时生效……
50 0
|
4月前
|
移动开发 小程序 前端开发
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
|
3月前
|
移动开发 小程序 JavaScript
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
|
19天前
|
移动开发 小程序 前端开发
H5和小程序有什么区别
H5和小程序有什么区别
|
1月前
|
移动开发 负载均衡 小程序
代驾app开发丨代驾系统开发玩法详情丨代驾系统开发网页版/H5/小程序及源码部署
**司机/代驾员端**:司机可以通过APP接收订单,查看订单详情、路线和导航,提供现场服务并进行确认。
|
2月前
|
数据采集 机器学习/深度学习 移动开发
uniapp+springboot医院智能导诊系统源码,自动兼容小程序与H5版本
技术架构:Uniapp+springboot+redis+mybatis plus+mysql+RocketMQ
74 0
|
2月前
|
移动开发 小程序 API
【产品上新】openURL接口开放,实现在小程序与H5之间“反复横跳”
【产品上新】openURL接口开放,实现在小程序与H5之间“反复横跳”
30 1