微信小程序嵌套iframe_H5嵌入微信小程序踩过的坑

关于背景

项目是一个涉及跨移动平台的前端项目，技术使用的是vue，因为项目不是很大，所以没有用到状态管理。

主要是用vue将h5项目编译成静态页面放到服务器的制定地址上，然后在小程序测使用，将服务器上的地址传给这个标签。

关于遇到的坑

值传输的坑

因为使用的是，根据我的理解，这个组件类似于html的,但又没有成熟，很多属性都无法使用，基本的比如宽高。下面是的属性。

属性名

类型

默认值

说明

src

String

webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。 类似iframe的src。

bindmessage

EventHandler

网页向小程序 postMessage 时，会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data }

bindload

EventHandler

网页加载成功时候触发此事件。e.detail = { src }

binderror

EventHandler

网页加载失败的时候触发此事件。e.detail = { src }

上面主要有两个属性可以传值：

src 通过url的属性值传值。

bindmessage 通过h5页面向小程序 postMessage 传值。

第一个属性遇到的坑：

总所周知，url的参数值里不能存在=、?等奇怪的符号，不然会出现很奇怪的参数。比如 axxx.