“天天打卡鸭”小程序分为六层技术架构，下面将详细描述每层结构。
（1）小程序端
小程序端即客户端，也就是用户直接操作的界面。微信web开发者工具为开发者提供了十分方便的操作界面。每个页面包含四个文件，分别是.wxml、.wxss、.js和.json。
（2）展示层
展示层可谓是连接小程序端和后端的重要部分，它负责与后端的交互并且将得到的结果展示在小程序端。
（3）业务层
业务层主要负责业务逻辑的处理，该小程序的业务分为四部分：用户登录、系统自带/自定义打卡、生成/查看/分享报告和排行榜。
用户登录：我们在每个用户登录时根据时间为其生成唯一ID，并将ID与该用户的openId建立一一映射的关系，保存至redis数据库以备查询。
系统自带/自定义打卡：该小程序的核心业务，可以细分为用户打卡系统自带项目、用户添加自定义打卡项目、用户删除自定义打卡项目、用户打卡自定义打卡项目、用户查询历史打卡天数等功能。只要用户在某日期打卡任意一个项目，就认为用户在该日期已经打卡。用户的打卡信息均记录在mysql中以备查询。
生成/查看/分享报告：报告是根据用户每天的打卡具体情况生成的，是对用户当日打卡情况的总结，用户可以查看生成的报告，也可以将报告分享至发现页面，并对他人的报告进行点赞和评论，与他人共享打卡的乐趣。用户的报告以图片的形式存储在服务器，并在nginx中配置以允许使用url形式访问报告。
排行榜：系统统计每个用户每日的打卡情况，在系统自带打卡和用户自定义打卡得分权重4:1的情况下计算每个用户每日打卡得分，将得分排名展示在排行榜页面。用户还可以为其他用户点赞。
（4）数据层和数据库
我们选用mysql和redis数据库以满足不同情况下数据的存储。一般情况下，我们将需要持久化并且比较复杂的数据存储到mysql，如用户每日的打卡、用户自定义打卡、分享的报告以及对报告的评论等；将经常需要变更或者结构仅为“key-value”类型的数据存储到redis，如分享报告的点赞情况、排行榜以及排行榜的点赞、用户报告等。
（5）运行环境
我们将项目以jar的形式部署在阿里云服务器上，并使用nginx实现反向代理。
4.2前端开发技术
4.2.1小程序代码组成
JSON配置：在小程序中扮演静态配置的角色；
WXML模板：由标签、属性等等构成，描述页面结构；
WXSS样式：提供全局样式和局部样式；
JS逻辑交互：和用户做交互，响应用户的点击、获取用户的位置等操作。
4.2.2小程序运行环境
小程序运行环境主要分为渲染层和逻辑层，WXML模板和WXSS样式工作在渲染层，JS脚本工作在逻辑层，渲染层使用多个webview线程进行渲染，逻辑层使用JsCore线程运行JS脚本，这两个线程通过小程序客户端中转站，逻辑层向服务器发送http请求，并获取返回的数据。具体通信模型如下图14所示：
图14 运行环境
4.2.3实现小程序登录授权
（1）微信小程序前端获取code并发送到服务器
通过微信小程序提供的接口wx.login()获取code，code具有单次性和时效性，将code传到服务器。
（2） 服务器接收code并获取用户的openid
服务器调用微信接口服务提供的登录凭证接口，使用获取到的code以及小程序的appid、appsecret三个参数，成功后返回唯一标识用户的openid和session_key。服务器为每个用户生成自定义登录态skey返回小程序前端，将自定义登录态skey存到小程序storage中，每次向服务器发出请求都携带自定义登录态，服务器根据自定义登录态判断用户当前登录状态，返回相应的数据。
4.2.4原生组件的使用
swiper组件：首页模块使用该组件实现轮播图的切换，同时在发现页面也用此插件实现热门动态与实时动态页面的切换。
scroll-view组件：发现模块使用该组件实现可滚动视图容器，向上滑动展示更多的动态。
progress组件：首页通过该组件展示每个打卡项目的分数
button组件：我的页面通过设置该组件的属性open-type为share，来实现小程序的分享功能。
表单组件：整个小程序使用了form、input、label、textarea组件实现内容的输入。
canvas画布：通过该组件实现报告的绘制。
4.2.5原生API的使用
路由：switchTab实现tabbar页面之间的跳转,并关闭其他所有非tabBar页面；navigateTo保留当前页面，跳转到应用内的某个页面。
网络请求：wx.request发起HTTPS网络请求。
数据缓存：wx.setStorageSync存储用户信息userinfo和skey；wx.getStorageSync获取本地存储的数据。
微信步数：通过wx.getWeRunData获取用户30天微信运动步数。
交互：wx.showToast显示打卡成功提示；wx.showModal显示模态框，使用模态框记录用户当天的喝水总量和睡眠时间。
4.3后台开发技术
“天天打卡鸭”小程序的后端使用java语言开发，主要使用springboot框架。由于springboot框架发展已经十分成熟，它嵌入了tomcat，无需手动部署，并且配置简单易于上手，管理方便，所以选用springboot框架开发该小程序。选用mysql和redis数据库存储数据以满足不同的数据需求。
“天天打卡鸭”主要分为五大模块：用户登录、主页、发现、排行榜和我的。数据架构如图15所示。
图15 “天天打卡鸭”数据架构图
下面详细说明每个模块与数据库的交互情况：
（1）用户登录
通过判断用户的登录状态，决定用户重新登录还是直接可以进入小程序。用户登录时，将用户的基本信息保存到mysql，以便后续使用。
（2）主页
主页为用户提供了打卡和查看报告两大功能，用户的打卡情况将记录到mysql，报告记录到redis。
（3）发现
发现页面为用户提供了分享动态的功能，用户在该页面可以实现对动态的点赞和评论。用户的动态和评论将记录到mysql，对动态的点赞情况记录到redis。
（4）排行榜
排行榜的计算借助定时任务完成，每日22:00，系统自动计算出用户得分，并生成排行榜，存入redis以备查询使用。此外，排行榜的点赞情况也将被记录至redis。
（5）我的
我的页面主要提供的功能是查看用户的历史报告和历史打卡天数。用户的历史报告从redis获取，打卡天数从mysql获取。
实际开发时，我们使用了springboot提供的数据访问接口CrudRepository访问mysql数据库，使用redis的Java连接开发工具Jedis访问redis数据库。
