场景描述:当在小程序中打开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);
       }
    }
 
  1. 小程序接收&处理逻辑
    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]
      }
    })

点赞(0) 打赏

Comment list 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部