1. 前言
- 微信云开发
- 万事开头难,第三篇接上.第二篇为 云开发-2上传-云函数-数据库 添加
- 下面主要就是详情页看添加的详情
- 首页列表
2. 跳转详情
- 为了调试方便可以直接新增个 添加界面的调试模式
- 简单回顾添加页面 添加成功跳到了详情页
wx.navigateTo({ url: '/pages/todoDetail/todoDetail?id=' + result._id, })
- 详情页效果
详情页.png- 详情页布局wxml
<view> <van-cell-group> <van-cell title="{{task.title}}" border="{{ false }}" value="{{task.status === 0 ? '羡慕中😭😭' : '已完成😄😄'}}"> <van-icon slot="right-icon" name="{{task.status === 0 ? 'cross' : 'success'}}" class="custom-icon" /> </van-cell> <van-cell wx:if="{{task.locationInfo}}" bind:click="showLocation" title="位置" icon="location-o" value="{{task.locationInfo.name}}" label="{{task.locationInfo.address}}"> </van-cell> </van-cell-group> <image wx:if="{{task.image}}" src="{{task.image}}"></image> </view>
- 主要就是 添加时候的字段展示
- 可以添加一些条件判断,某些不是必填项的不一定有这个字段,避免展示出问题
3. index首页 展示
- 直接编译就行
- 布局 wxml,点击跳转添加页面
<view class="plusBtn"> <navigator url="/pages/addTodo/addTodo"> <van-icon name="plus" size=" 100rpx" color="#FFF"/> </navigator> </view>
4. 首页 布局
- 首页效果
首页.png- 为了方便调试,
添加的数据最好在25条以上,因为后续有触底加载和上拉刷新,类似分页- 布局 wxml
<view class="plusBtn"> <navigator url="/pages/addTodo/addTodo"> <van-icon name="plus" size=" 100rpx" color="#FFF" /> </navigator> </view> <van-cell-group> <!-- block循环元素 不是界面元素 --> <block wx:for="{{tasks}}" wx:key="index"> <navigator url="/pages/todoDetail/todoDetail?id={{item._id}}"> <van-cell title="{{item.title}}"> <van-icon slot="right-icon" name="cross" data-id="{{item._id}}" catchtap="deleteTodo" /> </van-cell> </navigator> </block> </van-cell-group>
- 样式自己看着舒服写就行
- 养成习惯这个
block作为循环元素
5. 添加页面 查询数据库逻辑
5.1 查询封装
- 这个我不使用云函数来操作数据库
- 封装获取数据库数据方法
pageData: { isRefresh: true }, getData(callBack) { wx.showLoading({ title: '数据加载中', }) let offset = this.pageData.isRefresh ? 0: this.data.tasks.length todos.skip(offset).get().then(res => { console.log("查询-----res:", res); let tempData = [] if(this.pageData.isRefresh){ tempData = res.data }else{ tempData = [...this.data.tasks, ...res.data] } this.setData({ // this.data.tasks.concat() tasks: tempData }, res => { wx.hideLoading({ success: (res) => {}, }) callBack && callBack() }) }) },
- Collection.get():
获取集合数据，或获取根据查询条件筛选后的集合数据。
无参数
返回值:数组，数据的每个元素是一个 Object，代表一条记录- Collection.skip(offset):
指定查询返回结果时从指定序列后的结果开始返回，常用于分页
参数:offset:number 从第几条开始
返回值:Collection- todos.skip(offset).get() 结合使用
- json文件配置下拉刷新
"enablePullDownRefresh": true
5.2 下拉刷新逻辑
- isRefresh true 表示刷新/下拉刷新
- 上面的封装有个参数
callBack在这里使用的
onPullDownRefresh() { this.getData(res => { wx.stopPullDownRefresh() }) },
- 刷新每次重新获取数据,直接覆盖掉原来的数据
- 代码下边和触底的逻辑一起放出来
5.3 触底加载逻辑
- isRefresh false 表示是触底加载 进行数据的叠加操作
- 触底函数
onReachBottom() { this.getData() this.pageData.isRefresh = false },
- 触底加载是数据的叠加操作
- skip()请求后边的数据
- 目前的版本默认是请求20条数据,所以添加多点数据进行调试
- 单独的数据逻辑
let offset = this.pageData.isRefresh ? 0: this.data.tasks.length let tempData = [] if(this.pageData.isRefresh){ tempData = res.data }else{ tempData = [...this.data.tasks, ...res.data] } this.setData({ // arr.concat() tasks: tempData })
6. 删除
- 典型的列表删除场景,需要传参 通过
dataset传递id- 删除完成之后更列表,重置
isRefresh,逻辑闭环- Collection.doc(id: string):
获取集合中指定记录的引用。方法接受一个 id 参数，指定需引用的记录的 _id。
参数:id: string 唯一标识
返回值: Document 数据库记录引用- Collection.remove():
删除多条记录。注意只支持通过匹配 where 语句来删除，不支持 skip 和 limit
无参数
返回值:Promise.<Object>
其中removed字段表示成功删除的记录数量- API 调用成功不一定代表想要删除的记录已被删除，比如有可能指定的 where 筛选条件只能筛选出 0 条匹配的记录，所以会得到更新 API 调用成功但其实没有记录被删除的情况，这种情况可以通过
stats.removed看出来
deleteTodo(event) { let { id } = event.currentTarget.dataset todos.doc(id).remove({ success: (res) => { wx.showToast({ title: '删除成功', success: res => { this.pageData.isRefresh = true this.getData() } }) console.log(res.data) } }) },
7. 后记
- 就这把,有云函数的 调用,调试技巧,图片上传,本地操作数据库,云函数操作数据库,数据库的添加,删除,查询/分页查询
- 云开发的各种数据库操作 可以在云开发界面进行查看也非常方便
数据库调试.png- 更多功能自己玩吧
