小程序中嵌套的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. 小程序接收&处理逻辑
    小程序页面: <web-view src="{{url}}" bindmessage="message"/>
    小程序js定义message函数:
    复制代码
    Page({
      data: {shareData:{}},
      onShareAppMessage(options) {
        return this.shareData
      },
      message (e) {
        var that = this
        console.log(e)
        that.shareData = e.detail.data[0]
      }
    })
    复制代码

     

posted @   简简人事  阅读(3798)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示