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

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

  }

})

巴特西

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

最新文章

热门文章