场景描述：当在小程序中打开 h5 页面时，希望小程序的转发出去的标题，图片，跳转 link 可以通过 h5 通信实现自定义。
实现方式：通过 h5 给小程序通信，发送标题，图片，跳转 link 等信息，让小程序设置分享。
h5 发送给小程序通信代码
引用微信 js1.3.2 以上才支持，<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
判断 h5 是在小程序环境中打开代码：
//判断是否是小程序环境
function doMiniProgram(callback) {
try {
//小程序环境设置分享
var ua = window.navigator.userAgent.toLowerCase();
//判断是否是微信环境
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
//微信环境
wx.miniProgram.getEnv(function (res) {
if (res.miniprogram) {
callback();
}
})
}
}
catch (ex) {
console.log(ex);
}
}
给小程序发送数据设置小程序分享：
//设置小程序分享
function setMiniProgramShare(shareTitle, imageUrl, shareUrl) {
try {
doMiniProgram(function () {
// 小程序环境下逻辑
wx.miniProgram.postMessage({ data: { title: shareTitle, path: shareUrl, imageUrl: imageUrl } })
});
}
catch (ex) {
console.log(ex);
}
}
- 小程序接收 & 处理逻辑
h5 页面： <web-view src="{{url}}" bindmessage="message"/>
js 逻辑：Page({ data: {shareData:{}}, onShareAppMessage(options) { return this.shareData }, message (e) { var that = this console.log(e) that.shareData = e.detail.data[0] } })
发表评论 取消回复