微信公众号开发（四）微信分享

2020-12-23

引言

如果想要使用微信的分享功能，需要使用微信 JS-SDK 来完成，并且只能通过点击微信右上角的…进行分享，不能自定义按钮分享。

JSSDK 使用

1.绑定域名

1.1登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
1.2进入公众号-开发-基本配置- IP白名单，进行配置，只有在IP白名单内的IP来源，获取access_token接口才可调用成功

2.引入 js 文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。
备注：支持使用 AMD/CMD 标准模块加载方法加载。

3.通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。
这里需要后台支持，返回所需的时间戳，签名，随机串，appId 。

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

4.通过ready接口处理成功验证

1
2
3

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

5.通过error接口处理失败验证

1
2
3

wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

分享接口

直接上完整代码

getConfig () {
      const url = window.location.href.split('#')[0]
      this.log(url)
      const param = {
        url: url
      }
      this.$api.user.getConfigData(param).then(res => {
        console.log('config配置', res)
        const self = this
        if (res.data.code === 200) {
          // eslint-disable-next-line no-undef
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
            appId: process.env.appid, // 必填，公众号的唯一标识
            timestamp: res.data.item.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.item.nonceStr, // 必填，生成签名的随机串
            signature: res.data.item.signature, // 必填，签名
            jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
          })
          wx.ready(function () {
            // eslint-disable-next-line no-undef
            wx.onMenuShareAppMessage({
              title: '标题', // 分享标题
              desc: '分享描述', // 分享描述
              link: self.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致,2为锦囊
              imgUrl: 'https://share.png', // 分享图标
              type: '', // 分享类型,music、video或link，不填默认为link
              success: function (res) {
                // 用户点击了分享后执行的回调函数
              }
            })
            wx.onMenuShareTimeline({
              title: '分享标题', // 分享标题
              desc: '分享描述', // 分享描述
              link: self.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://share.png', // 分享图标
              type: '', // 分享类型,music、video或link，不填默认为link
              dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
              success: function (res) {
                // 用户点击了分享后执行的回调函数
              }
            })
          })
        }
      })
    }

这里需要注意的是：

wx.config 中需要配置的是 jsApiList ，需要使用的JS接口列表，都需要在这里注入
2.分享标题：14字以内
3.分享描述： 20字以内
4.分享图标：尺寸120*120，大小不超过10K，不支持 gif ，必须采用 https 协议（接口返回的数据或者是链接形式的）
5.分享链接：必须采用 https 协议

参考文章： JS-SDK 说明文档

展开全文 >>