微信小程序不同分享效果的实现 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间: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就可以成功获取了。

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

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

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

相关案例查看更多