场景描述：当在小程序中打开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] }})
