小程序webview打开小程序原生页面_微信小程序与webview中h5页面通讯demo

在微信小程序里，webviewH5向miniProgram通讯只能通过postMessage函数

然而这个函数却很鸡肋，小程序官方文档是这样描述的：向小程序发送消息，会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件

而且小程序官方文档里没有提到miniProgram如何向webviewH5通讯

在这个demo中, 展示了我是如何让webviewH5和miniProgram互相通讯

其实原理很简单:

webviewH5 --> miniProgram

通过js调用微信JSSDK的wx.miniProgram.navigateTo方法跳转到小程序的指定页面并且把参数当做query带给小程序原生页面

miniProgram --> webviewH5

webview组件存在一个src属性, 用于展示指定的h5页面,

webview组件上的src属性如果只是改变了hash值, 当前组件上的页面是不会刷新的. 所以我们可以利用这个特性在miniProgram页面把想要传递给webviewH5的信息带到当前webview组件的src上. 当然, 是操作当前src的hash值

运行使用

小程序开发者工具导入微信小程序demo源码, 在/pages/index/index.js中修改webview组件访问地址指向webview.html的http地址

效果预览

文件目录

.

├── README.md

├── webview // 微信小程序demo源码

│ ├── app.js

│ ├── app.json

│ ├── app.wxss

│ ├── miniprogram_npm

│ │ └── qs

│ │ ├── index.js