共计 1724 个字符，预计需要花费 5 分钟才能阅读完成。
没想到 2018 年“活下去”这个词，会因为万科的一场发布会而成为无数企业主发自内心的呐喊，于是“开源节流”成了众多公司 2019 主旋律~
我们改变不了大环境，但可以改变自己。如果现状不能使自己满意，至少知识可以改变生活。
前情回顾
技本功丨收藏！斜杠青年与你共探微信小程序云开发（上篇）
在上文中我们一起体验了一下最基本的小程序数据库操作，编写了我们“吃什么”小程序的第一个页面：增加页面。
上篇讲了小程序的基本信息以及基本的添加操作，本篇文章将进一步完成“吃什么”小程序：添加首页和列表页面。
开发步骤：
新建页面文件
编写页面 wxml
编写 js
编写样式
测试
下面进行首页的编写。
首页
首页功能: 在所有菜单里床随机抽取一个进行展示。
首先我们需要获取所有的菜单，云开发的限制每次请求最多只能获取表里的 20 条数据：
因此我们要先获取表里记录的数量计算出页数，再根据页数进行递归获取到所有数据，最后使用 random 方法随机获取一条展示出来就 OK 了。
首先看一下官方 api 文档提供的 api 接口。获取记录数量的是 count 函数：
获取到数量后就可以计算出页数然后根据页数进行递归了，获取数据的仍然是试用 collection.get 方法，详细的方法定义可查阅官方文档。
我们在 until 文件夹下的 ajax 文件里编写获取一张表里所有记录的方法。
首先获取要表里记录的数量：
再编写一个根据 where 条件、页码、每页记录数量获取表数据的方法方便进行递归：
然后编写递归方法：
最后编写首页需要用到的获取所有菜单的方法 getAllFood：
通过上面的三个方法就可以获取到菜单表的所有数据了，实际测试下访问速度还是蛮快的。下面在首页调用这个方法就可以展示出来所有菜单了，同时给一个选择的按钮，用户点击之后我们就随机挑选一个菜名呈现出来即可。
在首页我们一共需要三个按键：添加、所有菜品列表（可删除自己创建的菜品）和一个选择按键。我们首先定义一些颜色用于随机挑选待会滚动显示的菜品名称颜色，具体的页面需要用到的变量如下图：
首先我们获取所有菜品记录，根据 ajax 文件里编写的 getAllFood 方法调用即可通过循环获取到表里的所有数据：（数据库 api 获取到的数据在 network 面板里没有记录，建议使用其它方式验证获取的数据是否正确）
processList 方法主要用于为每个菜名添加上动画效果，首页的菜名需要有自己的滚动效果 keyframe 延迟时间、字体颜色、动画持续时间、位置偏移数据（top、left）。主要用到随机数生成方法 rd：
rd 方法生成一个介于 n 和 m 之间的随机整数，我们菜名的展示的一些特性都依靠这个方法，下面是 processList 方法的实现：
编写完成后我们在 onShow 函数里调用 getDataProcess 方法进行数据渲染：
方法执行完之后我们的 itemList 就有了数据，下面编写 wxml 文件进行显示。wxml 比较简单，使用 wx:for 循环显示出 itemList 里面的数据，添加三个 button:
添加和列表按钮导航到各自的页面，“吃什么”按钮绑定了 choose 方法，choose 方法即是从所有菜品集合 itemList 里随机挑选出一个展示：
编写完之后我们的首页变成了这样：
没有样式的首页
下面我们加上样式文件，滚动效果我们使用 CSS 的 keyframe 实现即可：
其他样式比较简单，index.wxss 文件整体内容如下供参考：
整个完成后我们的首页就编写完成了，运行起来的效果如图：
首页效果
挑选
结 语
至此我们已经完成了首页和添加页面的编写，其实一个个添加数据还是很麻烦的，对于云开发的数据库我们可以使用开发者工具直接进行 json 导入，只是 json 导入对 jso 格式有一定的要求，读者可以按照下面这样的格式进行扩展：
这种 json 文件的格式跟标准的 json 格式又一定区别的，比如没有, 号。我们在微信开发者工具的云开发面板里导入：
在云开发面板导入 json 文件
导入数据之后数据库里就有一些初始数据了，导入的数据会自动追加上唯一标识符 _id 字段，通过数据库 api 添加的记录不仅会记录下 _id 字段，还会加上添加用户的 _openid，下一节我们编写列表页将会使用到 openid 来区分是否有删除数据权限。
- 本期完 -
敬请期待下篇
