小程序和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月前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
2月前
|
移动开发 小程序 API
【小程序质量提优解决方案】(三)内嵌H5页面访问受限
【小程序质量提优解决方案】(三)内嵌H5页面访问受限
177 0
|
2月前
|
移动开发 小程序 JavaScript
【小程序质量提优解决方案】(二)内嵌H5加载异常(404)
【小程序质量提优解决方案】(二)内嵌H5加载异常(404)
70 0
|
2月前
|
Web App开发 移动开发 小程序
"项目中mpaas升级到10.2.3 适配Android 14之后 app中的H5以及小程序都访问不了,
"项目中mpaas升级到10.2.3 适配Android 14之后 app中的H5以及小程序都访问不了,显示“网络不给力,请稍后再试”,预发内网版本不能使用,线上版本可以正常使用,这个是什么原因啊,是某些参数没有配置吗,还是说是一些参数改错了?
77 2
|
2月前
|
移动开发 运维 小程序
【4月开发者日回顾】小程序审核驳回增加页面截图;H5域名白名单的配置将实时生效……
【4月开发者日回顾】小程序审核驳回增加页面截图;H5域名白名单的配置将实时生效……
79 11
|
2月前
|
移动开发 小程序 JavaScript
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
216 0
|
2天前
|
移动开发 小程序 前端开发
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
4 0
|
2月前
|
移动开发 监控 供应链
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
一开始接触MES系统,很多人会和博主一样,对MES细节的应用不了解,这样很正常,因为MES系统相对于其他系统来讲应用比较多!
60 1
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
|
15天前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
2月前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
119 1