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
- 更多功能自己玩吧
参考资料
微信云开发
小程序开发调试技巧
云开发-1-基础配置
云开发-2上传-云函数-数据库 添加
初心
我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
网友评论