小程序中嵌套的h5页面设置分享转发

场景描述：当在小程序中打开h5页面时，希望小程序的转发出去的标题，图片，跳转link可以通过h5通信实现自定义。

实现方式：通过h5给小程序通信，发送标题，图片，跳转link等信息，让小程序设置分享。

1. 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);
          }
       }

2. 小程序接收&处理逻辑
   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]
     }
   })

    

小程序中嵌套的h5页面设置分享转发

原文：https://www.cnblogs.com/codeon/p/11510345.html