[mini-blog][v2.2.0]博客小程序积分功能实现

Bug生活2048

发布于 2020-04-21 16:28:06

1.4K3

发布于 2020-04-21 16:28:06

文章被收录于专栏：Bug生活2048

初版的积分功能上线了

积分功能花了点时间，对整体功能有一些侵入性，加上个人时间也比较少，有些地方还不是很完善。

效果

废话不多说，先来看看积分功能的效果。

截图1

基本上分三部分，头部显示个人的积分以及提供积分说明和积分明细的入口，另外两个部分其实模版主流小程序搞的一些营销手段，变相提高一些收入「当然还是流量为王，我这小程序基本没什么量的，主要给个demo供大家参考」

常规营销基本上就是做任务，然后邀请好友之类的，另外就是积分商城，可以兑换一些商品，或者还有一些积分抽奖之类的，这里没有都做，怕个人类的审核不过，有兴趣的可以自己搞搞，难度不大。

积分中心页面实现

首先积分中心的数据，依赖于之前做签到功能预留的两个集合mini_member「会员维度相关数据，主要存储一些汇总数据，如总的积分，总的签到数之类的」和mini_point_detail「积分明细，包括得到的和使用的，积分明细页面上的数据来自于它」,具体可以参考上一篇签到功能实现的文章。

截图2

然后是任务得积分模块，主要就是看视频得积分啦，在观看完视频完成后，去相应的增加积分。

loadInterstitialAd: function (excitationAdId) {
    let that = this;
    if (wx.createRewardedVideoAd) {
      rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: excitationAdId })
      rewardedVideoAd.onLoad(() => {
        console.log('onLoad event emit')
      })
      rewardedVideoAd.onError((err) => {
        console.log(err);
        wx.showToast({
          title: "视频广告出现问题啦",
          icon: "none",
          duration: 3000
        });
      })
      rewardedVideoAd.onClose((res) => {
        if (res && res.isEnded) {
          //新增积分
          wx.showLoading({
            title: '积分更新中...',
          })

          let info = {
            nickName: app.globalData.userInfo.nickName,
            avatarUrl: app.globalData.userInfo.avatarUrl,
          }

          api.addPoints("taskVideo", info).then((res) => {
            console.info(res)
            if (res.result) {
              that.setData({
                totalPoints: Number(that.data.totalPoints) + 50,
              })
              wx.showToast({
                title: "恭喜获得50积分",
                icon: "none",
                duration: 3000
              });
            }
            else {
              wx.showToast({
                title: "程序有些小异常",
                icon: "none",
                duration: 3000
              });
            }
            wx.hideLoading()
          })
        } else {
          wx.showToast({
            title: "完整看完视频才能获得积分哦",
            icon: "none",
            duration: 3000
          });
        }
      })
    }
  },

这里增加了一个成为会员的任务，其实就是只要打赏过作者的，你申请VIP我就会审核通过的。

截图3

在后台管理功能里就有审核的操作页面，一个比较简单的闭环流程，这样VIP会员可以不用看广告直接阅读文章啦。

截图4

最后是邀请好友得积分的功能，逻辑很简单，分享到个人或者群，有人登录了则获得相应的基本，这里新增了一个集合mini_share_detail用于记录分享记录信息。

分享的标题，跳转地址和图片可以自行定义，如果默认就是积分中心页面的截图，有点丑，这里简单搞了个图片，依旧有点丑「不会设计呀」，积分跳转地址把对应的openid带过去。

  /**
   * 分享邀请
   */
  onShareAppMessage: function () {
    return {
      title: '有内容的小程序',
      imageUrl: 'https://test-91f3af.tcb.qcloud.la/sharepic.jpg?sign=6a33faf314c17c7ed2e234911d312b93&t=1585835244',
      path: '/pages/index/index?openid=' + app.globalData.openid
    }
  },

截图5

这样的话，原本首页不需要授权登录，现在从分享链接登录的就需要授权了，不然无法获取相应的头像和昵称，所以在首页加载的时候做了个判断。

onLoad: async function (options) {
    let that=this
    //有openid跳授权计算积分
    if (options.openid) {
      let shareOpenId = options.openid
      app.checkUserInfo(function (userInfo, isLogin) {
        if (!isLogin) {
          that.setData({
            showLogin: true
          })
        } else {
          that.setData({
            userInfo: userInfo
          });
        }
      });

      if (that.data.userInfo) {
        let info = {
          shareOpenId: shareOpenId,
          nickName: app.globalData.userInfo.nickName,
          avatarUrl: app.globalData.userInfo.avatarUrl
        }
        await api.addShareDetail(info)
      }
    }
    await that.getPostsList('', 'createTime')
  },

文章详情页修改

文章详情页主要就是消费积分了，有两块内容，如果是会员则不需要加载广告直接加载文章就可以了。

如果非会员，则判断该用户的积分数量，如果积分数量满足抵扣则提示让用户选择。