微信小程序分享 WebView 内 H5 页面

小渣渣

需求：微信小程序内使用 WebView 嵌套了 H5 页面，需要点击分享给朋友或者朋友圈的时候，用户点击分享的卡片进入展示 H5 页面。

首先，先看下分享到聊天的效果图：



原理：H5 页面向小程序发送消息，小程序点击分享读取该消息，如下图：

bindmessage        eventhandler                否        网页向小程序 postMessage 时，会在以下特定时机触发并收到消息：小程序后退、组件销毁、分享、复制链接（2.31.1）。e.detail = { data }，data是多次 postMessage 的参数组成的数组。

wx.miniProgram.postMessage        向小程序发送消息，会在以下特定时机触发组件的message事件：小程序后退、组件销毁、分享、复制链接（2.31.1）

web-view：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

H5 页面

H5 页面使用 postMessage 向小程序发送消息，代码如下：

登录可见。

微信小程序

代码如下：

登录可见。

备注：分享出去的是还是小程序页面路径，只是要在路径上面带上 h5 页面的参数链接。

onShareAppMessage：用于分享给好友或群聊时的配置。
onShareTimeline：用于分享到朋友圈时的配置。

操作步骤

操作步骤如下图：

小渣渣

微信官方 js-sdk：https://res.wx.qq.com/open/js/jweixin-1.6.0.js