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

[mini-blog][v2.1.0]博客小程序签到功能实现

作者头像
Bug生活2048
发布2020-03-11 10:24:29
1.4K2
发布2020-03-11 10:24:29
举报
文章被收录于专栏:Bug生活2048

昨天抽空将mini-blog的签到功能基本上实现了,这里分享下。

很早之前就想实现签到功能,昨天终于花时间去变现了,先来看下效果图。

效果

个人中心的排版进行了一定的改造,将关于个人相关的信息整合,留些位置给到签到。

截图1

签到页还是常规的日历组件,为了保证一页填满,加了一个广告组件。

截图2

后端实现

页面样式定好之后,就看怎么设计了,首先是数据库,在云数据库中我又新增了三个集合。

首先是mini_member,用于记录会员相关的汇总数据,以openId作为唯一索引,其中也预留了一些属性,比如积分,未读消息等,用于后期的功能迭代中。

代码语言:javascript
复制
{
    "openId": "oyMiZ5aClPsDJ_2LqWNXWXMolyhs",
    "continueSignedCount": 1,//连续签到数量
    "lastSignedDate": "2020-03-05",//最近签到日
    "level": 1,//会员等级(预留)
    "totalPoints": 1,//总的积分(预留)
    "totalSignedCount": 1,//总的签到数
    "unreadMessgeCount": 0,//未读消息(预留)
    "modifyTime": 1583410585920
}

然后是两张明细表,mini_point_detailmini_sign_detail,用于记录用户的签到明细和积分明细。

基本上这三个集合可以基本满足签到+积分的一些简单功能了。

接着就是云函数的编写了,在这里我也新增了一个云函数memberService,用于处理会员维度相关的操作。

这次核心的方法就是签到,要操作的集合还是比较多的,除了要操作上面新增的三个集合之外,还要加一个mini_subcribute,用于接入签到提醒的订阅消息。核心代码如下:

代码语言:javascript
复制
async function addSign(event) {
  console.info("addSign")
  try {
    let memberInfos = await db.collection('mini_member').where({
      openId: event.info.openId
    }).get();

    const tasks = []
    let date = new Date().toFormat("YYYY-MM-DD")
    if (memberInfos.data.length === 0) {
      let task1 = db.collection('mini_member').add({
        data: {
          openId: event.info.openId,
          totalSignedCount: 1,//累计签到数
          continueSignedCount: 1,//持续签到
          totalPoints: 1,//积分
          lastSignedDate: date,//最后一次签到日期
          level: 1,//会员等级(预留)
          unreadMessgeCount: 0,//未读消息(预留)
          modifyTime: new Date().getTime()
        }
      })
      tasks.push(task1)
    }
    else {
      let continueSignedCount = 1
      let memberInfo = memberInfos.data[0]
      if (new Date().addDays(-1).toFormat("YYYY-MM-DD") == memberInfo.lastSignedDate) {
        continueSignedCount = memberInfo.continueSignedCount + 1
      }

      let task2 = db.collection('mini_member').doc(memberInfo._id).update({
        data: {
          totalSignedCount: _.inc(1),
          continueSignedCount: continueSignedCount,
          totalPoints: _.inc(1),
          lastSignedDate: date,
          modifyTime: new Date().getTime()
        }
      });
      tasks.push(task2)
    }

    //签到明细
    let date1 = new Date().toFormat("YYYY-M-D").split("-")
    let task3 = db.collection('mini_sign_detail').add({
      data: {
        openId: event.info.openId,
        year: date1[0],
        month: date1[1],
        day: date1[2],
        createTime: new Date().getTime()
      }
    })
    tasks.push(task3)

    //如果统一订阅签到通知
    if (event.info.accept == 'accept') {
      let task4 = await db.collection("mini_subcribute").add({
        data: {
          templateId: event.info.templateId,
          openId: event.info.openId,
          timestamp: new Date().getTime()
        }
      });
      tasks.push(task4)
    }

    //积分明细
    let task5 = db.collection('mini_point_detail').add({
      data: {
        openId: event.info.openId,
        operateType: 0,//0:获得 1:使用 2:过期
        count: 1,
        desc: "签到得积分",
        date: (new Date()).toFormat("YYYY-MM-DD HH:MI:SS"),
        createTime: new Date().getTime()
      }
    })
    tasks.push(task5)
    await Promise.all(tasks)
    return true
  }
  catch (e) {
    console.error(e)
    return false
  }
}

当然这里还是不够严谨的,理论上最好使用事务「云开发目前已经支持了,后面我优化下」,保证这几个集合的数据一致性。

其他用于界面展示的数据,可以绕过云函数,直接在小程序端查询云数据库即可,代码较简单,简单的查询。

交互实现

在前端交互上,本着不重复造轮子的目的,找了个开源日历组件「wx_calendar」,样式上基本能接受,功能也满足,所以直接拿来用了。详细的文档可以看下他的github,文档还是比较详细的。

主要在初始化日历组件之后,需要获取历史已经签到的明细,来渲染选中状态:

代码语言:javascript
复制
/**
   * 日历组件渲染之后
   */
  afterCalendarRender: async function (e) {

    let year=util.getYear(new Date())
    let month=util.getMonth(new Date())
    let res = await api.getSignedDetail(app.globalData.appid, year.toString(), month.toString())
    console.info(res)
    let toSet = [];
    res.result.forEach(function (item) {
      let set = {
        year: item.year,
        month: item.month,
        day: item.day
      }
      toSet.push(set)
    })

    this.calendar.setSelectedDays(toSet);
  }

另外就是在用户点击签到前,唤起下订阅消息授权,接受提醒则每天可以定时提醒用户签到。

代码语言:javascript
复制
/**
   * 签到
   */
  bindSignFn: function (e) {

    let that = this
    let tempalteId = 'J-MZ6Zrd08TobUgWPbjQcnJt9BHbc9M-nOOxirC8nWA'
    wx.requestSubscribeMessage({
      tmplIds: [tempalteId],
      success(res) {
        console.info(res)
        that.submitSign(res[tempalteId], tempalteId,that).then((res) => {
          console.info(res)
        })
      },
      fail(res) {
        console.info(res)
        wx.showToast({
          title: '程序有一点点小异常,操作失败啦',
          icon: 'none',
          duration: 1500
        })
      }
    })
  },

最后

签到功能已经发版上线拉,有兴趣的小伙伴可以体验下哦。

至于一些细节上交互和实现可以直接获取源码查看,有好的建议也欢迎留言。

下个迭代将完善积分模块,增加一些积分获取的渠道,同时想下有什么福利可以利用积分系统来分享给大家。

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档