共计 1857 个字符，预计需要花费 5 分钟才能阅读完成。
2019 年 2 月 26 日，人们为了一个杯子疯了一天。
星巴克猫爪杯，一场已经与猫无关了的“圣杯战争“。网上的倒卖价格，已炒至近千元！
求而不得，舍而不能，得而不惜。这是人最大的悲哀。。。
所以，请珍惜以下内容，知识才是人生最大的财富！
前情回顾
技本功丨收藏！斜杠青年与你共探微信小程序云开发（中篇）
在上一篇文章中我们完成了首页的编写，目前基本的功能已经确定了，本节我们进行列表页的编写。列表页比较简单：将所有 food 列表展示出来，根据 openid 进行判断是否展示删除按钮即可。用户可以删除自己创建的记录。
开发步骤
新建页面文件
编写页面 wxml
编写 js
编写样式
测试
下面我们开始进行列表页的编写。
编写页面 wxmlmatch
约定好 js 中的数据为 foodlist，我们对 foodlist 字段进行循环输出即可：
另外有一个删除按钮根据条件渲染，即当前 item 的 openid 跟我们正在使用小程序的用户 openid 是否一致，一致的话我们展示删除按钮供用户操作即可。之所以这样做是因为目前小程序不支持写他人数据，关于小程序用户权限值可以参考下图：
可以看到管理端拥有绝对的读写权限，但是不支持用户操作另一用户的数据，数据库的操作可以在小程序开发者工具中的云开发工具中进行设置：
编写 js
写完页面的模版之后我们就可以进行 js 的编写，js 主要逻辑是：加载完成时调用云开发 api 获取所有 food，提供删除方法调用云开发 api 进行删除。涉及到的云开发 api 有 getCount 获取数据数量、get 获取数据、remove 删除记录。
通过官方文档我们可以看到 remove 函数的参数：
我们需要记录的引用来调用删除函数，获取某条记录的引用我们可以通过 doc 函数获取：
我们可以传入记录的 id 就能获取这条记录的引用，下面我们实现具体的删除方法 delItem。删除方法我们只需要记录的 id 即可进行删除：
编写好删除方法后我们编写获取所有数据记录的方法，这里仅仅用作演示获取所有记录，实际环境中还是建议使用分页特性分批次获取数据。
使用 get 方法获取数据默认最多获取的是 20 条数据，因此要获取所有数据我们要结合 count 函数和 skip 函数进行递归来获取集合所有数据：
1、首先我们写一个根据相应参数获取数据的方法
然后编写一个调用 findfood 方法的用于递归的函数
最后我们编写供 js 直接使用的 getAllFood 函数
在这个函数里我们使用 getCount 函数获取集合数量，然后计算页数，再根据页数进行循环调用 flag_pop 函数即可。
编写获取所有数据方法后我们就回到页面的 js 编写上，值得注意的是有一个云函数需要调用，我们有一个 getUserInfo 的方法来获取用户的 openid，云函数是微信服务端进行的私有鉴权，因此我们部署上去后就可以使用，获取用户 openid 的函数体是：
创建云函数在根目录下的 cloudFunc|(环境名称) 右键然后点击“新建 nodeJS 云函数”即可创建云函数模版，部署云函数在云函数的文件夹下右键然后选择“创建并部署”即可。使用云函数可以通过 wx.cloud.callFunction() 调用，该函数在官方文档中描述为：
云函数的具体使用可以参考官方示例文档：
https://dwz.cn/C95gkLVv
接下来我们在页面的 js 文件里编写一个出初始方法用于获取所有数据，并在 onShow 的时候调用它。我们首先使用 getUserInfo 云函数获取当前用户的 openid，然后再去获取所有的数据。详细代码如下：
openid 的作用主要是页面上用于判断是否显示删除按钮，数据库中的所有记录都会有一个_openid 字段，值是这条记录的创建者的 openid，当前小程序的使用用户的 openid 跟记录中的__openid 字段相同才可以进行删除。
下面我们在页面的 js 中定义好删除事件 deletefood，删除事件有模版传过来一个记录值的 id，我们使用 deleteFood 方法把参数也就是 id 传给 until 中的 delItem 即可。deletefood 方法实现如下：
全部完成后我们就能在列表页查看所有 food 了：
给这个页面加上简单的 css 之后就变成这样的：
可以看到我创建的“不加醋的糖醋里脊“可以被删除。
结 语
至此我们的“吃什么”小程序就开发完啦，首页长这样子：
集成了云开发的添加，删除特性，使用了一个简单的云函数，虽然简单但是对于新手上手云开发还是很有帮助的，小程序源码开放在 Github 中，需要源码的可以自行下载：
https://github.com/topiniu/ea…
