微信小程序云开发快速入门（2/4）

前言

我们对《微信小程序云开发快速入门（1/4）》的知识进行回顾一下。在上章节我们知道了云开发的优势以及能力，并且我们还完成了码仔备忘录的本地版到网络版的改造，主要学习了云数据库同时还通过在小程序使用云API直接操作了云数据库：

  • 使用 get() 进行了数据库的查询
  • 使用 add() 进行了数据添加
  • 使用 update() 进行了数据修改
  • 使用 remove() 进行了数据删除

本章节给大家带来「排序」「精准」「模糊」「分页」这四种查询方式在实际业务种也是经常用到的。

列表排序

默认情况下小程序查询出来的列表是按时间来排序的，最新添加的数据在最后面。但是实际需求是需要最新添加的在最前面，那么这个时候我们就需要用排序函数 orderBy 来改变它的排序规则。

在 orderBy 具体使用方法（通过数据库对象直接链式调用的方法，在使用 get 方法之前使用）：
文档示例代码：按进度排升序取待办事项

db.collection('todos').orderBy('progress', 'asc').get().then(console.log).catch(console.error)

参数分别：

  1. 需要排序的字段名
  2. 排序具体的规则
  • asc：升序，从小到大
  • desc：降序，从大到小

同时支持多个字段组合排序，优先级根据调用顺序来决定
当我们学习到这个API到时候，再来思考下如何实现具体需求，实现这个需求一共有两种方式：

新增时间字段排序

这个时候我们可以在新增/修改的时候去设置时间戳字段 createTime ，然后通过时间戳字段进行排序。
添加 createTime 属性代码写在编辑页面的 save 保存方法中
时间戳获取的4种方式

let createTime1 = Date.parse(new Date()); // 精确到秒
let createTime2 = new Date().getTime(); // 精确到毫秒
let createTime3 = new Date().valueOf(); // 精确到毫秒
let createTime4 = Date.now(); // 精确到毫秒，实际上是new Date().getTime()

排序代码：

db.collection('memo').orderBy('createTime', 'desc').get()

组合时间字段排序

除此之外还有同学在没有新增字段的情况下也完成了同样的效果，使用了多个字段组合排序。

db.collection('memo').orderBy('date','desc').orderBy('time','desc').get()

先对日期进行了排序，然后再对时间进行排序。在这里要注意有的同学只对时间进行了排序，这种情况下如果是同一天的数据排序正常，但是是多天的情况下顺序就会乱掉。

根据内容查询

为了更高效的找到备忘录，那么搜索是必不可少的，接下来我们会使用 where 函数来实现搜索功能。首先我们需要来一个搜索框，在这里再告诉大家一个小技巧一些常用的组件我们可以通过引用的成熟UI组件库来进行快速实现，上次我们学习了用npm应用时间工具包，接下来我们扩展库引入WeUI组件。

使用UI组件库

  1. 在app.json中配置：
{"useExtendedLib": {"weui": true}
}

相当于引入了对应扩展库相关的最新版本的 npm 包，同时也不占用小程序的包体积。
2. 在使用的页面json配置搜索组件

{"usingComponents": {"mp-searchbar": "weui-miniprogram/searchbar/searchbar"}
}

  1. 在页面需要的位置添加布局代码，插入到列表之上，头部之下的位置
<view><!-- 头部布局 --><view class="page__bd"><mp-searchbar bindinput="searchTitle" ></mp-searchbar></view><!-- 列表布局 -->
</view>

显示效果：

6fec9202308041703293100.png

4. 监听输入框数据

searchTitle: function (event) {console.log('search',event.detail.value)}

到这里，我相信大家一定有对UI组件库相见恨晚对感觉，写样式实在是太痛苦了！但是话说回来，组件库只是覆盖了我们常用组件，如果组件库没有的组件我们还是要老老实实自己写，所以在样式的编写能力还是非常重要的，在学习的过程中一定要多加练习。

精准查询

当我们拿到数据后就开始去查询，在这里我们需要改造下我们的 getMemoList 函数。

// 获取备忘录列表，支持搜索标题
function getMemoList(value) {// 1. 获取数据库引用const db = wx.cloud.database()// 2. 找到集合获取数据let memo = db.collection('memo')// 3. 判断是否有查询数据if (value) {memo = memo.where({title: value})}// 4. 判断查询返回数据return memo.orderBy('createTime', 'desc').get()
}

然后在监听的时候调用

searchTitle: function (event) {let value = event.detail.valuegetMemoList(value).then(res=>{console.log(res.data)this.udpateList(res.data)})}

实现效果：

598bc202308041703525165.png

但是实际场景下，很多时候我们都是通过模糊匹配，因为有可能备忘录的标题过长了，不便于用户记住。

模糊查询

在这里主要是查询条件用正则匹配，使用 RegExp 构造器构造正则对象。

memo.where({title: db.RegExp({regexp: value, //从搜索栏中获取的value作为规则进行匹配。options: 'i', //大小写不区分})

实现效果：

34724202308041704078885.png

分页查询

当备忘录使用的时间越来越长的时候，那么数据也会随着变多，这个时候实际需求也不需要一次性全部加载出来，那么分页的需求就随之而来。小程序端操作云数据库的 get() 获取数据API，一次性最多拉取20条。

那么如何进行数据分页？官方给出了案例：

db.collection('todos').where({_openid: 'xxx', // 填入当前用户 openid}).skip(10) // 跳过结果集中的前 10 条，从第 11 条开始返回.limit(10) // 限制返回数量为 10 条.get().then(res => {console.log(res.data)}).catch(err => {console.error(err)})

主要是通过 skip 和 limit 。
skip：从第多少条开始取
limit：一次性取多少条数据

我们来根据实际业务来实现下

  1. 定义页数和每页数量
 /*** 页面的初始数据*/data: {pageNo:0, // 默认第一页pageSize:5, // 一页5条数据},

  1. 改造列表数据查询函数
function getMemoList(pageNo, pageSize) {const db = wx.cloud.database()return db.collection('memo').skip(pageNo * pageSize).limit(pageSize).orderBy('createTime', 'desc').get()
}

  1. 首次调用方式传入参数
onShow() {getMemoList(this.data.pageNo,this.data.pageSize).then(res => {this.udpateList(res.data)})}

  1. 监听页面上拉回调事件
// 上拉加载onReachBottom (){this.loadList()}

  1. 实现具体数据加载逻辑
async loadList(){// 1. 获取总条数let {total} = await getListTotal()// 2. 判断是否全部已经加载完毕if(this.data.list.length<total){// 如果没有加载完// 提示数据加载中wx.showLoading({title: '数据加载中...',})// 当前页+1this.data.pageNo ++// 获取下一页数据let {data} = await getMemoList(this.data.pageNo,this.data.pageSize)this.setData({// 拼接数据，页面展示list:this.data.list.concat(data)})// 关闭加载提示wx.hideLoading()}else{// 加载完成提示：“无更多数据”wx.showToast({icon:'error',title: '无更多数据',})}},

注意：

  • 以上逻辑中使用async/await来减少了回调让代码可读写更强。
  • 以上逻辑中使用到获取列表总数的 getListTotal 使用了 count 函数。
function getListTotal() {const db = wx.cloud.database()return db.collection('memo').count()
}

指定返回

在实际业务中通常列表子项详情很多，但是列表只需要展示部分关键信息，那么这个时候我们就只需要查列表需要展示的字段，指定返回结果，没有必要的字段就不需要返回，使用 field 进行实现。
如：当前列表只需要显示标题字段数据。

// 获取备忘录列表
function getMemoList(pageNo, pageSize) {const db = wx.cloud.database()return db.collection('memo').field({title: true,}).get()
}

数据返回

26ad5202308041705045924.png

在实际业务场景也是列表通常不会查询出所有数据，点击详情才会把所有数据通过id查询出来，所以在列表页面到详情页面参数也是最佳做法是传递id字段，而不是把列表点击对象传递到详情页面。

总结

今日学习：

  1. 数据库 orderBy 排序条件
  2. 使用扩展库WeUI组件库
  3. 数据库 where 查询条件
  4. 数据库 skip、limit、count 组合实现分页查询
  5. 数据库 field 指定返回字段

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/37655.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SciencePub学术| 智能计量类重点SCIE征稿中

SciencePub学术| 智能计量类重点SCIE征稿中

SciencePub学术 刊源推荐: 智能计量类重点SCIE征稿中&#xff01;信息如下&#xff0c;录满为止&#xff1a; 一、期刊概况&#xff1a; 智能计量类重点SCIE 【期刊简介】IF&#xff1a;2.0-2.5&#xff0c;JCR3区&#xff0c;中科院4区&#xff1b; 【版面类型】正刊&#…
阅读更多...
new BigDecimal(double val)注意事项 / JWT解析BigDecimal类型数据

new BigDecimal(double val)注意事项 / JWT解析BigDecimal类型数据

前言&#xff1a; 公司项目中有一个板块需要解析JWT令牌获取载荷里面封装的数据&#xff0c;遇到要解析一个BigDecimal类型的数据 问题发现过程&#xff1a; 正常来说&#xff0c;我们解析一个JWT令牌的步骤如下&#xff1a; public static Claims getDataFromToken(String tok…
阅读更多...
极狐GitLab 企业级 CI/CD 规模化落地实践指南（一）

极狐GitLab 企业级 CI/CD 规模化落地实践指南（一）

目录 template 引用&#xff0c;减少代码冗余&#xff0c;增强 CI/CD 构建扩展性 问题 1&#xff1a;代码冗余&#xff0c;低效实践 问题 2&#xff1a;维护性难&#xff0c;工作量大 ➤ local ➤ file ➤ remote ➤ template 收益 1&#xff1a;一处修改&#xff0c;多…
阅读更多...
TIOBE2023年8月榜单发布，Python超越老将C/C++蝉联冠军

TIOBE2023年8月榜单发布，Python超越老将C/C++蝉联冠军

TIOBE 编程社区指数是一个衡量编程语言受欢迎程度的指标&#xff0c;评判的依据来自世界范围内的工程师、课程、供应商及搜索引擎&#xff0c;TIOBE 官网近日公布了 2023 年 8 月的编程语言排行榜。 此次的榜单中&#xff0c;Python依旧稳居第一&#xff0c;占比达到了13.33%。…
阅读更多...
jpg图片太大怎么压缩？这样做轻松压缩图片

jpg图片太大怎么压缩？这样做轻松压缩图片

图片太大会给存储、分享带来麻烦&#xff0c;但其实现在压缩图片大小也不是什么难事&#xff0c;下面就给大家分享几个一直用的图片压缩方法&#xff0c;包含批量压缩、在线压缩、免费压缩等多种方式&#xff0c;大家按需自取哈~ 方法一&#xff1a;嗨格式压缩大师 这是一个可…
阅读更多...
Kotlin Executors线程池newSingleThreadExecutor单线程

Kotlin Executors线程池newSingleThreadExecutor单线程

Kotlin Executors线程池newSingleThreadExecutor单线程 import java.util.concurrent.Executorsfun main() {val mExecutorService Executors.newSingleThreadExecutor()for (i in 1..5) {mExecutorService.execute {println("seq-$i tid:${Thread.currentThread().threa…
阅读更多...
typeScript 之 基础

typeScript 之 基础

工具: PlayGround 源码&#xff1a; GitHub TypeScript 变量声明 typeScript中变量声明注意&#xff1a; 开头不能以数字开头变量名称可以包含数字和字母除了下划线_和美元$符号外&#xff0c;不能包含其他任意特殊字符 声明的结构&#xff1a; let 变量名&#xff1a; 类型…
阅读更多...
面试经典150题——罗马数字转整数

面试经典150题——罗马数字转整数

罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如&#x…
阅读更多...
docker 学习-- 01 基础知识

docker 学习-- 01 基础知识

docker 学习-- 01 基础知识 文章目录 docker 学习-- 01 基础知识1.前言1.1 docker 是什么1.2 docker优点1.2.1 统一开发和生产环境:1.2.2 高性能:1.2.3 更轻松的维护和拓展&#xff1a;1.2.4 更轻松的迁移&#xff1a; 1.3 docker缺点1.3.1 运行环境受限1.3.2 文件管理和网络端…
阅读更多...
item_sku-获取sku详细信息

item_sku-获取sku详细信息

一、接口参数说明&#xff1a; item_sku-获取sku详细信息&#xff0c;点击更多API调试&#xff0c;请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_sku 名称类型必须描述keyString是调用key&#xff08;点击获取测试…
阅读更多...
安全中间件的设计思路和简单实践

安全中间件的设计思路和简单实践

rasp 的侵入式特性和拦截特性导致开发和运维普通不太愿意配合&#xff0c;当生产环境出现问题时往往第一时间先把责任推给 rasp&#xff0c;逐渐的安全部门普遍只能把 rasp 设置为告警模式&#xff0c;而且越是大的集群拦截开的就越少&#xff0c;所以字节的 elkeid 和某外卖大…
阅读更多...
P13-CNN学习1.3-ResNet(神之一手~)

P13-CNN学习1.3-ResNet(神之一手~)

论文地址:CVPR 2016 Open Access Repository https://arxiv.org/pdf/1512.03385.pdf Abstract 翻译 深层的神经网络越来越难以训练。我们提供了一个残差学习框架用来训练那些非常深的神经网络。我们重新定义了网络的学习方式&#xff0c;让网络可以直接学习输入信息与输出信息…
阅读更多...
Python-OpenCV中的图像处理-图像直方图

Python-OpenCV中的图像处理-图像直方图

Python-OpenCV中的图像处理-图像直方图 图像直方图统计直方图绘制直方图Matplotlib绘制灰度直方图Matplotlib绘制RGB直方图 使用掩膜统计直方图直方图均衡化Numpy图像直方图均衡化OpenCV中的直方图均衡化CLAHE 有限对比适应性直方图均衡化 2D直方图OpenCV中的2D直方图Numpy中2D…
阅读更多...
代码随想录算法训练营20期|第七天|哈希表part02|454.四数相加II ● 383. 赎金信 ● 15. 三数之和 ● 18. 四数之和 ● 总结

代码随想录算法训练营20期|第七天|哈希表part02|454.四数相加II ● 383. 赎金信 ● 15. 三数之和 ● 18. 四数之和 ● 总结

454.四数相加II 比较巧思的解法&#xff0c;先把nums1 和nums2的数两两相加&#xff0c;并存储sum和次数 再在nums3和nums4里找对应和sum和为0的数值i,j Time: N^2 Space:N^2, 最坏情况下A和B的值各不相同&#xff0c;相加产生的数字个数为 n^2 class Solution {public int fo…
阅读更多...
Spring AOP实践：如何通过aop记录日志？

Spring AOP实践：如何通过aop记录日志？

目录 一、依赖 二、自定义注解 三、切面 一、依赖 以SpringBoot工程为例&#xff0c;导入aop的依赖。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency> 二…
阅读更多...
为什么要自动化Web测试？

为什么要自动化Web测试？

Web自动化是更快地实现所需结果的较佳方式。自动化测试在市场上引起了巨大的轰动。此软件测试过程可以让您使用正确的自动化测试工具和技术集自动执行测试过程。我们执行它是为了检查软件应用程序是否具有完全按照我们希望它执行的方式执行的勇气。 比以往更快地获得反馈 自动化…
阅读更多...
基于Promise.resolve实现Koa请求队列中间件

基于Promise.resolve实现Koa请求队列中间件

本文作者为360奇舞团前端工程师 前言 最近在做一个 AIGC 项目&#xff0c;后端基于 Koa2 实现。其中有一个需求就是调用兄弟业务线服务端 AIGC 能力生成图片。但由于目前兄弟业务线的 AIGC 项目也是处于测试阶段&#xff0c;能够提供的服务器资源有限&#xff0c;当并发请求资源…
阅读更多...
kafka和rabbitmq之间的区别以及适用场景

kafka和rabbitmq之间的区别以及适用场景

Kafka 和 RabbitMQ 都是流行的消息传递系统&#xff0c;用于实现分布式系统中的消息传递、事件处理和数据流。它们在设计和适用场景上有一些不同&#xff0c;下面详细介绍它们之间的区别和适用场景。 Kafka 特点和优势&#xff1a; 高吞吐量&#xff1a; Kafka 的设计目标是实…
阅读更多...
【Java】数据交换 Json 和 异步请求 Ajax

【Java】数据交换 Json 和 异步请求 Ajax

&#x1f384;欢迎来到边境矢梦的csdn博文&#xff0c;本文主要讲解Java 中 数据交换和异步请求 Json&Ajax 的相关知识&#x1f384; &#x1f308;我是边境矢梦&#xff0c;一个正在为秋招和算法竞赛做准备的学生&#x1f308; &#x1f386;喜欢的朋友可以关注一下&#…
阅读更多...
go mod 添加私有库GOPRIVATE

go mod 添加私有库GOPRIVATE

私有地址 形式仓库域名/组织名形式仓库域名形式*仓库域名 示例私有地址&#xff1a; gitee.com/takujo_admin 或者igitlab.com 多个私有地址,分割&#xff0c;示例&#xff1a; gitee.com,igitlab.com 修改env go env -w GOPRIVATE"私有地址" go env -w …
阅读更多...
最新文章

Copyright @ 2022~2023