微信公众号h5的分享功能

最新推荐文章于 2025-03-26 16:16:46 发布

几蓝色

最新推荐文章于 2025-03-26 16:16:46 发布

阅读量2.3k

点赞数 1

文章标签：微信

本文链接：https://blog.youkuaiyun.com/qq_16189233/article/details/120844382

版权

该博客详细介绍了微信公众号中H5页面的分享功能配置步骤，包括关键的微信配置和在`wx.ready`中设定分享参数的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信公众号h5的分享功能配置如下：

微信配置

wx.config({
    debug,
    appId,
    timestamp,
    nonceStr,
    signature,
    jsApiList: [
      'onMenuShareAppMessage',
      'updateAppMessageShareData'
    ]
  });

配置成功后，在wx.ready里设置分享参数

  wx.ready(function () {
    setWxShareApi({
      title: 'xxxxxx', // 分享标题
      desc: window.location.href.replace(/\?(.*?)$/g, '#'), // 分享描述
      link: window.location.href.replace(/\?(.*?)$/g, '#'), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: '1', // 分享图标
    })
  });

/**
 * 设置微信分享给好友和朋友圈接口
 * @param {分享参数} opt 
 */
function setWxShareApi(opt) {
  // 安卓分享设置
  wx.onMenuShareAppMessage(Object.assign(opt, {
    success: function () {
      // 用户点击了分享后执行的回调函数
      console.log('分享设置成功', window.location.href.replace(/\?(.*?)#/g, '#'), '---------', window.location.href)
    }
  }))
  // ios设置分享
  wx.updateAppMessageShareData(Object.assign(opt, {
    success: function () {
      // 用户点击了分享后执行的回调函数
      console.log('分享设置成功', window.location.href.replace(/\?(.*?)#/g, '#'), '---------', window.location.href)
    }
  }))
}```