微信小程序不同分享效果的实现
发表时间:2021-1-5
发布人:葵宇科技
浏览次数:50
在我们做微信小程序开发的过程中,分享功能是十分重要的一个功能点,分享大概主要有三类:
- 普通分享(默认分享)
- 区分好友和群的分享
- 区分不同群的分享
普通分享
普通分享即默认分享,普通的分享功能很容易实现,我们可以直接在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获取相应解密信息。
到这里,微信中涉及到的三种不同方式的分享方法就介绍完了,如有问题,欢迎留言。