微信小程序webview内页面分享

因为项目原因，之前在微信小程序内部使用 webview 嵌套了 h5 页面，现在要添加一个新的功能，用户在哪个页面进行了分享，被分享的用户从链接进来就跳转到哪个分享页面。

先了解一下 web-view 组件的限制，web-view 是承载网页的容器，会自动铺满整个小程序页面。目前个人类型小程序不支持使用。

src 属性里放置 webview 要打开的网页链接，需要注意的是在管理后台配置要访问网页的域名，否则生产模式无法进行访问。开发版和体验版可以通过点击小程序右上角三个点打开调试来进行访问。

小程序页面转发分享需要自身定义了一个转发的相关事件 onShareAppMessage，这个事件在设置之后可以通过点击小程序右上角的三个点来触发，也可以通过为小程序页面添加 button 标签，设置 button 的属性 open-type=”share” 来触发。

webview 是内嵌的网页，内部页面无法直接调起小程序的转发。

这个需求实现的特殊之处在于要分享的页面为 webview 中的页面，而 webview 作为一个容器，它放在了小程序的一个页面中，我们所看到的页面跳转都是在这个容器中进行的，小程序无法直接获取容器的跳转路径。

所以为了实现 webview 中的页面分享，把 h5 页面地址作为参数传输，在接收的页面中取出并赋值到当前页面 webview 中的 src 中，即可进行展示。

如何拿到 webview 中当前的页面链接，以及一些动态参数如何传递给小程序？

动态参数包括要跳转的 h5 页面地址，分享链接展示的图片这些参数需要通过 h5 页面来进行获取，然后 h5 再传输给小程序，小程序分享的时候进行携带。

查阅开发文档 webview 看到 bindmessage 属性，网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data 是多次 postMessage 的参数组成的数组。

H5 网页需要引入 JSSDK 1.3.2 提供的接口 wx.miniProgram.postMessage 向小程序传输参数。

webview 通过 bindmessage 定义的方法接收 h5 传输的数据，需要注意的是，每次发送数据后数据都会添加到 e.detail.data 中的数组，并不会清除掉上一次传递的数据，所以我们取数组的最后一位元素。

由此，h5 页面引入 JSSDK 1.3.2，使用 wx.miniProgram.postMessage 发送参数，小程序页面使用 webview 的 bindmessage 属性接收参数即可完成动态参数的传递。