号外！号外！烹饪无忧上线了！！扫码下图体验，如果觉得满意，帮忙点击右上角三个点，然后点击头部烹饪无忧进入小程序资料页面点赞，谢谢先！
特性
- 可以根据当前时间段推荐食谱；
- 食谱分类能附加导航；
- 可以离线访问详情页面；
- 可以转发详情页面；
- 支持深色模式；
- 使用免费云服务（Serverless）；
- 界面整洁，无广告
烹饪无忧是我最近开发的食谱类个人小程序，麻雀虽小，五脏俱全，也自有它的价值。关键还是无广告的、免费的。
What？赤裸裸的打广告？No，No，别急~~，立马上干货。
首页
下图是首页。
导航栏默认是早餐、午餐等时间段，按常识做了推荐的，比如，用户上午 11 点至下午 3 点之间进入该小程序 ，会自动推荐午餐食谱。另外分类页选择的参数会轮换添加到导航栏最后，如果刚好是时间段参数，会直接选择该项。
代码如下实现如下：
let item = navs[4]
// 根据时间段推荐
const hour = new Date().getHours()
if (10 <= hour && hour < 15) {
item = navs[1]
} else if (15 <= hour && hour < 18) {
item = navs[2]
} else if (18 <= hour && hour < 20) {
item = navs[3]
} else if (6 <= hour && hour < 10) {
item = navs[0]
}首页分类列表主要使用 scroll-view，实现了向下滚动加载数据渲染。因为数据量不太大我就没怎么优化，性能肯定没长列表扩展组件 recycle-view 好，感兴趣的同学可以试一试。分类、搜索列表页面公用了 baselist 组件，大家在做项目的时候一定要注意组件的复用以及公有方法、逻辑的封装。
详情页
下图是详情页。
因为云服务在分类、搜索时已经返回了每个食谱的详情，因而就没有必要请求详情接口了。虽然列表加载是慢了，但请求少了，可以节约带宽。值得一提的是我还做了收藏页面，用到小程序的数据缓存，可以离线访问详情页面。
实际开发中，云服务返回的数据有些不合理。比如做法步骤描述绝大部分不会出现回车换行符号，也没有数字序号，但极小数部分又有返回。前后端数据不统一想必大家开发中也遇到过吧，原则是要协商再协商，尽量不要两边都改。此处只能前端处理了，可以用正则表达式来处理。但在接口返回列表后做循环处理，还是在绑定模板时用 wxs 函数做过滤处理呢？显然后者处理速度更快更合理。
实际上，朋友点击转发链接访问详情页面的同时也就添加了该小序，这种访问很直接，但无法获取其它页面传递的缓存数据，因此该场景下必须用接口返回的数据来渲染页面。
不知道大家有没有注意到，该页面内容较多，所以更好的排版和布局尤其重要，这就要看大家的 CSS 功底了。至于图片，本来打算做个懒加载的，没想到云服务速度太给力了，根本就用不着呀。京东云的同学有点“不讲武德”，这里给他们点个赞！！
分类页
下图是分类页面。
分类使用了附加导航方式，就是选项卡组件和选项卡内容容器可以双向操作。有点类似于 Android 的分组列表（section-list）。
这个功能实现还是有点技术难度的，我使用了官方的纵向选项卡扩展组件 vtabs。不过这个组件有些 Bug。比如说有时点击选项卡时，当前选项会错位。微信开放社区有同学反映过这个问题，不过我要求内容之间是没有间隔连续的，设置选项内容固定高度的方法就有点牵强了，对吧？
我跟了一下代码，选项卡组件的 bindtabclick 事件处理函数错误地触发了 handleContentScroll 事件处理函数。这不仅仅影响了性能，最不应该的是两个函数计算出来的当前选项 index 值还不一样。
还有一个问题就是初始设定 active-tab 的值不起作用。因为不影响我的需求就没有修改了。
获取云服务
后台使用的京东万象 > API > 生活服务 > 菜谱大全云服务，运行前需要去京东云申请一个账号。该云服务是免费的，每天 1000 次，有前面介绍的离线技术支持，已经够用了。当然每天 2000、3000 次也是有办法的，给我点赞我就私下告诉你，呵呵~~
提醒：该云服务已经停运。
参考源码
烹饪无忧业务比较简单，没有使用 WePY、mpvue 等小程序框架，也没有使用 UniApp、Taro 等多端工具生成。这些技术没太大难度，关键看你怎么选型。话又说回来，这个项目我既是产品又是开发，还搞运维，虽然辛苦但也收获不小。
想进一步了解本小程序代码的同学，可以参考我的 Github repo。Happy coding!
评论 (0)