笔记:「饭否精选」微信小程序(三)- 微信小程序开发中遇到的问题


 拍摄于 2017-06-24,豆瓣收藏夹。
拍摄于 2017-06-24,豆瓣收藏夹。
饭否精选小程序截图-全
设计参考了很多 Day One 的设计,配色方案也几乎一致。整个「饭否每日精选·日历」的灵感就是有天看到 Day One 的日历页获得的。

前言

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

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

关于日历 demo

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

demo 的使用

clone 上面那个 repo,使用小程序开发者工具打开即可。

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

问题由来,完全没有小程序开发经验的话需要参考官方文档的《逻辑层-注册程序》, onLaunchonLoadonShow 等是小程序本身留给开发者在不同生命周期的 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() 方法,应该会有更优的解决方案,这里希望有抛砖引玉的参考价值。

感谢阅读

你们好, 2018 年初把小站从 Jekyll 迁移到 Hugo 的过程中,删除了评论区放的 Disqus 插件,考虑有二:首先无论评论、还是对笔记内容的进一步讨论,读者们更喜欢通过邮件、或者 Twitter 私信的方式来沟通;其次一年多以来 Disqus 后台能看到几乎都是垃圾留言(spam),所以这里直接贴一下邮件、以及 Twitter 账户 地址。

技术发展迭代很快,所以这些笔记内容也有类似新闻的时效性,不免有过时、或者错误的地方,欢迎指正 ^_^。

BEST
Lien(A.K.A 胡椒)
本站总访问量 本站总访客量 本文总阅读量