
前言
这里更多的是特定开发中遇到的特定问题与处理特定数据(比如前文提到使用爬虫抓取放在 LeanCloud 上的数据)的记录,没有普适的参考价值;而且在整理的过程中发现其实还有优化 refactor 的余地。
第二部分内容中的日历的实现,把花了最长时间处理的部分拿出来记了一笔。实在是不觉得对任何人有任何意义,所以把日历页单独拿出来做了个 demo 放在了 Github,希望多少会有参考价值。
关于日历 demo
其中数据部分从远程获取拆成了本地获取:目录中的 ./store/data.js
中的内容就是个小程序从 LeanCloud 获取内容的第一步,所有「有精选的日子」的日期以及它们详情的获取 key,之后就是对这些数据进行过滤,组合,最后输出一个日历视图。
demo 的使用
clone 上面那个 repo,使用小程序开发者工具打开即可。微信小程序的生命周期导致的流程控制问题
问题由来,完全没有小程序开发经验的话需要参考官方文档的《逻辑层-注册程序》, onLaunch
,onLoad
,onShow
等是小程序本身留给开发者在不同生命周期的 hook,遇到的问题出现在的 App.onLaunch()
和 Page.onShow()
两个 hook 之间,问题大致重现步骤:
- 小程序启动的时候,即
App.onLaunch()
请求数据; - 将获取到的
data
保存到本地Store
; - 具体到用户所打开的页面,比如打开默认的是「今天」这个视图(还有可能打开的是被分享出去的 Calendar 或者 Detail 视图),那么在「今天」页面的
Page.onLoad()
触发时将Store
中对应的「今天」的数据拿出来,请求「今天」的详情; - 获取成功后显示在页面上的同时也保存至
Store
中。
问题是:第 1 步中 onLaunch()
发出的请求,在第 3 步的 onLoad()
还没返回,导致页面无数据。(遇到问题后当时网上搜了一番,和这个问题如出一辙,但最后不是通过它提供的解决方式处理)
解决办法
将 Store
声明为小程序 App.globalData
的属性对象,在 App.onLaunch()
时声明,同时改写 Store
对象中所有 get 取值类的方法–一律返回 Promise。
所以在当外部的列表、详情页面试图通过 Store
获取内容的时候,得到是是一个 Promise,从而自动获取 pending、resolve 或者 reject 状态,从而在外部根据不同返回做分别处理,比如等返回成功后才调用 Page.setData()
方法。
例子
比如说在状态详情页获取相关数据的是通过 Store.getStatus()
方法,如果 Store.store
中本地缓存了数据,那么直接就从本地的直接取出,返回给详情页;如果没有,请求获取数据,保存,再返回给详情页。
在详情页的具体调用: 小程序中不同页面之间的传值其实也是根据 URL 中 query 部分,不过没有暴露在外。这里的 statusid 和 entry 就是用来在页面间传值的参数值。
日历页面的实现

整个日历的实现,大概可以分为以下几个步骤:
- 获取数据,类似
["2015-10-05.daily", ""2015-10-04.daily", [...]]
这样一个数组,包含所有「那一天有饭否精选」的日子的日期; - 将第 1 步获得的日期数组,打包成按照年月日分组的格式:
{ year: 2015, month: {..., 10: [..., 2015-10-04, 2015-10-05], ...}}
; - 在第 2 步的打包中,年和月需要逆时间时间,最新的在前,而日期,每月的 1 ~ 31,需要正序;
- 将上两步的数据月份的格式输出到页面。
具体的还是参考 demo 中的具体实现,这里贴一下 sort()
和 groupDate()
方法,应该会有更优的解决方案,这里希望有抛砖引玉的参考价值。
技术发展迭代很快,所以这些笔记内容也有类似新闻的时效性,不免有过时、或者错误的地方,欢迎指正 ^_^。
BEST
Lien(A.K.A 胡椒)