前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[mini-blog][v2.2.0]博客小程序积分功能实现

[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

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

代码语言:javascript
复制
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带过去。

代码语言:javascript
复制
  /**
   * 分享邀请
   */
  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

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

代码语言:javascript
复制
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')
  },

文章详情页修改

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

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

截图6

代码就不贴了,比较散,详细的代码实现可以直接查看源码。主要是一些交互上的细节需要注意,另外详情页的东西确实比较多,在修改的时候注意其他的逻辑,避免影响原来的功能。

不足之处

积分功能在实现上其实自己不是很满意,后面有时间尽量再优化一版。

首先是积分没有配置化,好多地方直接写死的,包括计算积分,文案展示等,后期想改分值比较麻烦,不够灵活「主要没有什么流量,如果自行实现还是需要考虑下积分的配置」

另外是积分的用途上,比如获取积分,可以有很多种,常规的评论,阅读,点赞其实都可以获得积分,这里没有实现,一方面会复杂点涉及每天上限,改动点也比较多,另外是性能,要操作的集合太多,本身也会影响用户体验。

还有就是订阅消息,比如积分变动、申请VIP等地方,最好接入订阅消息,提高用户体验。

如果有打算做积分功能的,可以借鉴下。

总结

积分功能算勉强实现了,后面继续优化迭代吧,后面会把消息中心和订阅消息模块化给搞下。

我si程序员

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Bug生活2048 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档