技本功丨收藏！斜杠青年与你共探微信小程序云开发（下篇）

2019年2月26日，人们为了一个杯子疯了一天。

星巴克猫爪杯，一场已经与猫无关了的“圣杯战争“。网上的倒卖价格，已炒至近千元！

求而不得，舍而不能，得而不惜。这是人最大的悲哀。。。

因此，请珍惜如下内容，知识才是人生最大的财富！

前情回顾

技本功丨收藏！斜杠青年与你共探微信小程序云开发（中篇）

在上一篇文章中咱们完成了首页的编写，目前基本的功能已经肯定了，本节咱们进行列表页的编写。列表页比较简单：将全部food列表展现出来，根据openid进行判断是否展现删除按钮便可。用户能够删除本身建立的记录。

开发步骤 

新建页面文件

编写页面wxml

编写js

编写样式

测试

下面咱们开始进行列表页的编写。

编写页面wxml
match

约定好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方法的用于递归的函数

1. 最后咱们编写供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...