小程序重构第二期丨不能说和原版毫无关系，只能说......

一、新旧版对比图（左旧右新）

计时页面整合到打卡页，新板块设置为信息流。

图片截图版本只展示了最近热门番剧的信息，后继版本会加入更多精简的信息。

信息流

早起签到页精简页面，赛季逻辑精简。

后继还会继续完善早起赛季逻辑。

早安

原打卡页比较简陋，新版打卡页整合了倒计时、时钟等功能。

后继会继续完善打卡逻辑。

打卡

二、开发历程

项目在12-17开始，截止目前最后一次提交代码是12-23，本次重构历时约六天。

git日志

重构的设计文档↓↓↓

产品文档

三、开发实践

3.1 前后端分离更清晰

写第一个版本还是个程序小白，没有太多前后端的概念。

编程的时候觉得在前端写还方便调试，所以大部分数据处理、逻辑判断等都留在了前端。

这就导致前端代码臃肿，不能更好的专注页面内容展示。

这次重构，前端基本上通过接口和后端交互，大部分逻辑处理交给后端&云函数。

前端拿到数据只需要少量的操作即可进行渲染。

比如日期的处理，由前端确定。

3.2 更严格的数据模型

JavaScript最好的地方就是你随意编写代码，也很难报错。

JavaScript最坏的地方也是过于随意......

这次重构数据库的字段会提前设计，在model里写好（类似TypeScript的定义）

前后端交互数据的时候根据model里面的定义。

这使得你的思维和代码逻辑更加清晰。

image

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

使用 ColorUI 的一些体会：

• 页面样式更加统一

• 元素添加样式更加方便（记住常用class名后）

• wxss代码量大幅减少，不用wxml和wxss两个文件来回跳跃

Vant组件库目前只使用了少量组件，这个组件库的样式修改还是比较麻烦的。

因为是打卡小程序，对时间特别敏感，dayjs这个库给的帮助也是特别大。

手撸时间工具包或者直接在代码里运算，一个是花费时间不值得而且不完备，一个是自己写会让代码比较长，比较难看......

能在六天内基本重构完毕，这些轮子可谓是立下了汗马功劳！

四、开发过程的问题

最主要的就是页面闪烁的问题，因为数据几乎都要和云端交互。

数据没来之前，布局是坍缩的。

渲染数据的时候，就会出现了页面元素的跳动，看着很难受。

采用的方案有：

• 设置默认数据

• 设置页面缓存

• 触底加载更多

• 判断数据存在再开始渲染页面

还有一些请求，html渲染等等的问题。

有些已经解决，有些还在解决的路上......

最后，欢迎成为新的打卡人！

点击成为打卡人！