a:link, a:visited, a:hover, a:active { color: rgba(51, 153, 0, 1); text-decoration: none }
#oneTitle { background-color: rgba(51, 153, 0, 1); color: rgba(255, 255, 255, 1); font-size: 25px; padding-left: 4px }
#twoTitle { background-color: rgba(34, 123, 194, 1); color: rgba(255, 255, 255, 1); font-size: 20px; padding-left: 5px }
#threeTitle { font-size: 16px; margin-bottom: 0; padding-top: 0; padding-left: 5px; background-color: rgba(223, 238, 223, 1); color: rgba(0, 0, 0, 1) }
#q { font-family: “Courier New”, 微软雅黑, Consolas, Arial, 宋体; font-size: 13px; text-decoration: none; color: rgba(0, 0, 0, 1) }
#rightArrow { position: fixed; top: 0; right: 0; z-index: 999 }

Fork me on GitHub

1.介绍

目标:打造一款不同于市场上的公开打卡app的产品

理念:通过监督和鼓励,和相同圈子的人一起互相鼓励、分享及监督,共同进步。

优点:

模板消息通知,网上基本通过小程序中逻辑层JS完成推送的请求,小打卡在通知方面采用服务器端异步任务推送,使用了高性能分布式内存队列系统BEANSTALKD,来实现模板消息的异步定时推送。

数据库方面,因为要实现每月、每周或者指定时间段的打卡排名系统这个功能,目前数据库单张数据表已经超过几十万条数据记录,通过数据库查询排名统计不可行。这里需要用到Redis高性能数据库来缓存数据,并采用Rediszset有序集合来进行不同方面的排序和查询


 

2.功能模块:


 

3.前端设计:

3.1首页交互设计

  1. 点击头像 会toast登陆成功
  2. 创建一个新的打卡按钮跳转至新建打卡页
  3. 点击我管理的打卡的回收箱在打卡旁边生成删除、取消按钮并隐藏打卡/已打卡按钮,点击取消按钮隐藏删除、取消按钮并恢复打卡、已打卡按钮,再次点击回收箱隐藏删除、取消按钮并恢复打卡/已打卡按钮
  4. 点击我管理的打卡列表/我参加的打卡/打卡按钮 跳转至 打卡详情页
  5. 打卡按钮打卡成功后变成“已打卡”并灰化

3.2新建打卡页交互设计

  1. 可以输入活动标题
  2. 开始结束时间为两个选项,点指定开始结束日期时会在下面显示 出开始日期:日期选择器&结束日期:日期选择器
  3. 点击开始报名费,弹窗提示“付费打卡”功能面向优质社群开放!请关注公众号“小打卡”,回复“付费打卡”申请使用资格 点“确定”返回
  4. 下一步按钮 跳转 编辑打卡详情页

3.3编辑打卡详情页交互设计

  1. 点击修改头像可以更换头像
  2. 群主简介可输入emoji表情
  3. 点击下一步按钮跳转打卡详情

3.4打卡详情页面交互设计

  1. 点击邀请好友进入邀请好友页
  2. 点击编辑详情跳转编辑打卡详情页
  3. 修改昵称跳转打卡设置
  4. 点击打卡按钮跳转发表日记页
  5. 点击发布主题打卡跳转打卡主题
  6. 点击添加一个新的打卡契约跳转创新的打卡契约页(加入活动必须支付佣金、每日的契约金、打卡目标)
  7. 日记、详情、成员(日记、详情后来的放在前面、成员新来的放后面)

3.5发表日记页交互设计

  1. 可以输入、上传照片、语音、录视频
  2. 点击所在位置可以显示目前位置
  3. 谁可看可设置为私密
  4. 点击发表日记生成成就卡

3.6发现页交互设计

  1. 点击各个模块可以切换对应的列表
  2. 点击每个列表中内容跳转打卡详情可以点击立即参加按钮

 

3.7我的页面交互设计

  1. 点击修改个人资料进入编辑资料
  2. 点击我的评论看到我的评论列表
  3. 我的赞看到赞的列表
  4. 我的打卡日记可以点击详情、评论、赞


 

4.模板消息:

  提示语:打卡参与成功
  活动名称 [用嘴读书 第一季]
  打卡时间 00:01:00~23:59:00
  备注:记得坚持打呦~
  进入小程序查看 >

  提示语:有人喊你回来打卡啦~
  活动名称 [用嘴读书 第一季]
  备注:7019人在打卡,就差你了!
  立即打卡>>
  进入小程序查看 >

  提示语:打卡创建成功
  活动名称 [哈哈一起来读书吧]
  打卡时间 00:01:00~23:59:00
  备注:你可以邀请小伙伴一起来打卡呦~
  立即邀请>>
  进入小程序查看 >

 

以上只作为个人学习练习使用

 

版权声明:本文为moster原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/moster/p/8393689.html