微信小程序不同分享效果的实现

发表时间：2021-1-5

发布人：葵宇科技

浏览次数：40

在我们做微信小程序开发的过程中，分享功能是十分重要的一个功能点，分享大概主要有三类：

普通分享（默认分享）
区分好友和群的分享
区分不同群的分享

普通分享

普通分享即默认分享，普通的分享功能很容易实现，我们可以直接在JS文件中实现分享的方法即可，如下：

    /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '测试小程序',//分享内容
      path: '/pages/index/index',//分享地址
      imageUrl: '/images/img_share.png',//分享图片
    }
  }

通过上述代码（return中参数也可不填，默认分享当前页），即可实现简单的分享功能。
但是在正式的项目中，这种分享往往不能满足我们的需求，比如我们需要根据分享的不同方式，给予不同形式的奖励，分享到好友加10个奖励，分享到群加30个奖励等。如何区分用户是分享到好友还是分享到群呢，这就涉及到了我们所说的第二种分享：区分好友和群的分享。

区分好友和群的分享

关于区分好友和群分享，我们先看下官方的文档

根据官方文档中的说明，我们知道可以通过调用 wx.showShareMenu和 wx.getShareInfo() 接口获取到相应的转发信息。
根据此文档，修改我们的小程序JS文件中的分享方法：

/**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    wx.showShareMenu({
      withShareTicket:true
    })

    return {
      title: '测试小程序',//分享内容
      path: '/pages/index/index',//分享地址
      imageUrl: '/images/img_share.png',//分享图片
      success:function(res) {
        if (res.errMsg =='shareAppMessage:ok') {//判断分享是否成功
          if (res.shareTickets == undefined) {//判断分享结果是否有群信息
            //分享到好友操作...
          } else {
            //分享到群操作...
            var shareTicket = res.shareTickets[0];
            wx.getShareInfo({
              shareTicket: shareTicket,
              success:function(e) {
                //当前群相关信息
                var encryptedData = http://www.wxapp-union.com/e.encryptedData;
                var iv = e.iv;
              }
            }
          }
        }
     }
    }
  }

在这里我们通过在分享的方法中，设置

    wx.showShareMenu({
      withShareTicket:true
    })

添加该方法后，即可在分享成功的回调中获取到分享群信息，通过wx.getShareInfo方法，即可获取到当前群的encryptedData和iv信息。到这里，分享到好友和群的区分就实现了。
到这里我们通过wx.getShareInfo方法获取到了一些群信息，能否通过这些信息区分不同的群呢，答案是不能的，接下来，我们开始介绍分享到不同群如何实现。

区分不同群的分享

上文中已经说明了，通过wx.getShareInfo方法可以获取转发详细信息，我们还是先来看一下该方法在官方文档中的说明：

通过官方文档的说明，我们可以知道，上文中我们通过wx.getShareInfo()方法返回的encryptedData就包含完整的转发信息，只不过它是加密的，我们解密后才可以获取当前群唯一ID：openGId。既然找到了问题，那我们就看下如何解密该数据。

这里微信官方为我们提供了几种解密方法，下载示例代码后，发现竟然没有JS实现的，这里我们先打开其中一个用例，看下请求方法和参数构成，打开Node示例代码中的demo.js

var WXBizDataCrypt = require('./WXBizDataCrypt')

var appId = 'wx4f4bc4dec97d474b'
var sessionKey = 'tiihtNczf5v6AKRyjwEUhQ=='
var encryptedData = 
    'CiyLU1Aw2KjvrjMdj8YKliAjtP4gsMZM'+
    'QmRzooG2xrDcvSnxIMXFufNstNGTyaGS'+
    '9uT5geRa0W4oTOb1WT7fJlAC+oNPdbB+'+
    '3hVbJSRgv+4lGOETKUQz6OYStslQ142d'+
    'NCuabNPGBzlooOmB231qMM85d2/fV6Ch'+
    'evvXvQP8Hkue1poOFtnEtpyxVLW1zAo6'+
    '/1Xx1COxFvrc2d7UL/lmHInNlxuacJXw'+
    'u0fjpXfz/YqYzBIBzD6WUfTIF9GRHpOn'+
    '/Hz7saL8xz+W//FRAUid1OksQaQx4CMs'+
    '8LOddcQhULW4ucetDf96JcR3g0gfRK4P'+
    'C7E/r7Z6xNrXd2UIeorGj5Ef7b1pJAYB'+
    '6Y5anaHqZ9J6nKEBvB4DnNLIVWSgARns'+
    '/8wR2SiRS7MNACwTyrGvt9ts8p12PKFd'+
    'lqYTopNHR1Vf7XjfhQlVsAJdNiKdYmYV'+
    'oKlaRv85IfVunYzO0IKXsyl7JCUjCpoG'+
    '20f0a04COwfneQAGGwd5oa+T8yO5hzuy'+
    'Db/XcxxmK01EpqOyuxINew=='
var iv = 'r7BXXKkLb8qrSNn05n0qiA=='

var pc = new WXBizDataCrypt(appId, sessionKey)

var data = pc.decryptData(encryptedData , iv)

console.log('解密后 data: ', data)

可以看出，我们想要解密，需要传递如下参数：appId、sessionKey、encryptedData和iv，其中appId就是我们当前小程序的appId，encryptedData和iv是我们通过wx.getShareInfo()方法获取到的，还有一个参数sessionKey是未知的，那么这个参数要如何获取呢？
我们接着看加密数据解密算法的文档：

通过该文档，我们知道sessionKey是通过wx.login()获取的，进入登录凭证校验接口，我们可以发现该方法的调用流程：

通过该图，我们知道我们想要获取sessionKey，需要首先调用wx.login()方法，将返回的code作为参数传递给服务器的一个接口，用以获取sessionKey，服务器接口如何封装呢，这里也给出了说明：

注：如果没有封装服务器获取sessionKey，可以先使用这个官方地址做测试，需要注意的是这里我们获取的code值只能使用一次。
到这里，sessionKey就可以成功获取了。

介绍完这些，内容有点多，我们再重新梳理一遍：

我们在界面初始化的时候，调用wx.login()方法，将该方法返回的code作为参数传递给服务器即可（没有封装服务器接口，可暂时使用微信提供的接口做测试，不推荐），用来获取sessionKey，并将获取到的sessionKey的值保存到data中。
在微信的分享方法onShareAppMessage中，我们依次调用wx.showShareMenu()和wx.getShareInfo()方法，获取分享到群返回的encryptedData和iv。
从data中取出sessionKey，将其和encryptedData、iv、appId作为参数传递给解密方法var pc = new WXBizDataCrypt(appId, sessionKey)和var data = http://www.wxapp-union.com/pc.decryptData(encryptedData , iv)，进而通过data获取相应解密信息。

到这里，微信中涉及到的三种不同方式的分享方法就介绍完了，如有问题，欢迎留言。