微信h5分享

最新推荐文章于 2024-07-06 11:07:54 发布

熊抱包

最新推荐文章于 2024-07-06 11:07:54 发布

阅读量331

点赞数

CC 4.0 BY-SA版权

分类专栏：微信文章标签：微信

原文链接：https://blog.youkuaiyun.com/qq_34707272/article/details/119134496

微信专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在微信中实现H5页面的分享，包括引入微信JS-SDK文件，调用微信接口获取分享权限，以及详细步骤来触发和自定义分享内容。

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

1引入js文件

 <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2.调用接口获取权限

this.$axios.get('接口地址', {
    params: {
      url: '参数',
    },
  })
  .then(function (res) {
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.data.appid, // 必填，公众号的唯一标识
      timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
      signature: res.data.signature, // 必填，签名
      jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表
    })
  })
  .catch(function (error) {
    console.log(error)
  })
},

3.调用分享

wx.ready(function () {
  //需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({
    title: '我是标题', // 分享标题
    desc: '描述内容', // 分享描述
    link: 'https://xxxx.xxx.xxxx', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: 'https://xxxx.xxx.xxxx.png', // 分享图标
    success: function () {
      // 设置成功
    },
  })
  wx.updateTimelineShareData({
    title: '我是标题', // 分享标题
    desc: '描述内容', // 分享描述
    link: 'https://xxx.xxx.xx.xxx', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: 'https://xxxx.xxx.xxxx.png', // 分享图标
    success: function () {
      // 设置成功
    },
  })
})