一、新旧版对比图（左旧右新）
计时页面整合到打卡页，新板块设置为信息流。
图片截图版本只展示了最近热门番剧的信息，后继版本会加入更多精简的信息。
早起签到页精简页面，赛季逻辑精简。
后继还会继续完善早起赛季逻辑。
原打卡页比较简陋，新版打卡页整合了倒计时、时钟等功能。
后继会继续完善打卡逻辑。
二、开发历程
项目在12-17开始，截止目前最后一次提交代码是12-23，本次重构历时约六天。
重构的设计文档↓↓↓
三、开发实践
3.1 前后端分离更清晰
写第一个版本还是个程序小白，没有太多前后端的概念。
编程的时候觉得在前端写还方便调试，所以大部分数据处理、逻辑判断等都留在了前端。
这就导致前端代码臃肿，不能更好的专注页面内容展示。
这次重构，前端基本上通过接口和后端交互，大部分逻辑处理交给后端&云函数。
前端拿到数据只需要少量的操作即可进行渲染。
比如日期的处理，由前端确定。
3.2 更严格的数据模型
JavaScript最好的地方就是你随意编写代码，也很难报错。
JavaScript最坏的地方也是过于随意…
这次重构数据库的字段会提前设计，在model里写好（类似TypeScript的定义）
前后端交互数据的时候根据model里面的定义。
这使得你的思维和代码逻辑更加清晰。
3.3 合理使用轮子
项目使用了↓↓↓
一个UI库：ColorUI
一个组件库：Vant
一个时间处理库：dayjs
对于一个选择困难症和强迫症患者（夸张语气）来说。
ColorUI至少能省一半的时间来调试界面显示
// 文字大小单位
xs sm df lg xl xxl sl xsl
10 12 14 16 18 22 40 60
// 布局大小单位
xs sm df lg xl</pre>
使用 ColorUI 的一些体会：
-
页面样式更加统一
-
元素添加样式更加方便（记住常用class名后）
-
wxss代码量大幅减少，不用wxml和wxss两个文件来回跳跃
Vant组件库目前只使用了少量组件，这个组件库的样式修改还是比较麻烦的。
因为是打卡小程序，对时间特别敏感，dayjs这个库给的帮助也是特别大。
手撸时间工具包或者直接在代码里运算，一个是花费时间不值得而且不完备，一个是自己写会让代码比较长，比较难看…
能在六天内基本重构完毕，这些轮子可谓是立下了汗马功劳！
四、开发过程的问题
最主要的就是页面闪烁的问题，因为数据几乎都要和云端交互。
数据没来之前，布局是坍缩的。
渲染数据的时候，就会出现了页面元素的跳动，看着很难受。
采用的方案有：
-
设置默认数据
-
设置页面缓存
-
触底加载更多
-
判断数据存在再开始渲染页面
还有一些请求，html渲染等等的问题。
有些已经解决，有些还在解决的路上…
最后，欢迎成为新的打卡人！
6636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
