笔记：「饭否精选」微信小程序（三）- 微信小程序开发中遇到的问题

前言

这里更多的是特定开发中遇到的特定问题与处理特定数据（比如前文提到使用爬虫抓取放在 LeanCloud 上的数据）的记录，没有普适的参考价值；而且在整理的过程中发现其实还有优化 refactor 的余地。

第二部分内容中的日历的实现，把花了最长时间处理的部分拿出来记了一笔。实在是不觉得对任何人有任何意义，所以把日历页单独拿出来做了个 demo 放在了 Github，希望多少会有参考价值。

关于日历 demo

其中数据部分从远程获取拆成了本地获取：目录中的 ./store/data.js 中的内容就是个小程序从 LeanCloud 获取内容的第一步，所有「有精选的日子」的日期以及它们详情的获取 key，之后就是对这些数据进行过滤，组合，最后输出一个日历视图。

demo 的使用

微信小程序的生命周期导致的流程控制问题

问题由来，完全没有小程序开发经验的话需要参考官方文档的《逻辑层-注册程序》， onLaunch，onLoad，onShow 等是小程序本身留给开发者在不同生命周期的 hook，遇到的问题出现在的 App.onLaunch() 和 Page.onShow() 两个 hook 之间，问题大致重现步骤：

1. 小程序启动的时候，即 App.onLaunch() 请求数据；
2. 将获取到的 data 保存到本地 Store；
3. 具体到用户所打开的页面，比如打开默认的是「今天」这个视图（还有可能打开的是被分享出去的 Calendar 或者 Detail 视图），那么在「今天」页面的 Page.onLoad() 触发时将 Store 中对应的「今天」的数据拿出来，请求「今天」的详情;
4. 获取成功后显示在页面上的同时也保存至 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 就是用来在页面间传值的参数值。

日历页面的实现

整个日历的实现，大概可以分为以下几个步骤：

1. 获取数据，类似 ["2015-10-05.daily", ""2015-10-04.daily", [...]] 这样一个数组，包含所有「那一天有饭否精选」的日子的日期；
2. 将第 1 步获得的日期数组，打包成按照年月日分组的格式：{ year: 2015, month: {..., 10: [..., 2015-10-04, 2015-10-05], ...}};
3. 在第 2 步的打包中，年和月需要逆时间时间，最新的在前，而日期，每月的 1 ~ 31，需要正序；
4. 将上两步的数据月份的格式输出到页面。

具体的还是参考 demo 中的具体实现，这里贴一下 sort() 和 groupDate() 方法，应该会有更优的解决方案，这里希望有抛砖引玉的参考价值。