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

在我们做微信小程序开发的过程中，分享功能是十分重要的一个功能点，分享大概主要有三类：普通分享（默认分享）区分好友和群的分享区分不同群的分享普通分享普通分享即默认分享，普通的分享功能很容易实现，我们可以直接在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 = e.encryptedData;                var iv = e.iv;              }            }          }        }     }    }  }在这里我们通过在分享的方法中，设置    wx.showShareMenu({      withShareTicket:true    })添加该方法后，即可在分享成功的回调中获取到分享群信息，通过wx.getShareInfo方法，即可获取到当前群的encryptedData和iv信息。到这里，分享到好友和群的区分就实现了。 到这里我们通过wx.getShareInfo方法获取到了一些群信息，能否通过这些信息区分不同的群呢，答案是不能的，接下来，我们开始介绍分享到不同群如何实现。区分不同群的分享上文中已经说明了，通过wx.getShareInfo方法可以获取转发详细信息，我们还是先来看一下该方法在官方文档中的说明： 通过官方文档的说明，我们可以知道，上文中我们通过wx.getShareInfo()方法返回的encryptedData就包含完整的转发信息，只不过它是加密的，我们解密后才可以获取当前群唯一ID：openGId。既然找到了问题，那我们就看下如何解密该数据。点击上文中的加密数据解密算法，进入如下界面： 这里微信官方为我们提供了几种解密方法，下载示例代码后，发现竟然没有JS实现的（JS实现的方式可以参考：使用CryptoJS解决微信小程序用户信息解密），这里我们先打开其中一个用例，看下请求方法和参数构成，打开Node示例代码中的demo.jsvar 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 = pc.decryptData(encryptedData , iv)，进而通过data获取相应解密信息。到这里，微信中涉及到的三种不同方式的分享方法就介绍完了，如有问题，欢迎留言。