前言
我們對(duì)《微信小程序云開(kāi)發(fā)快速入門（1/4）》的知識(shí)進(jìn)行回顧一下。在上章節(jié)我們知道了云開(kāi)發(fā)的優(yōu)勢(shì)以及能力，并且我們還完成了碼仔備忘錄的本地版到網(wǎng)絡(luò)版的改造，主要學(xué)習(xí)了云數(shù)據(jù)庫(kù)同時(shí)還通過(guò)在小程序使用云API直接操作了云數(shù)據(jù)庫(kù)：
- 使用 get() 進(jìn)行了數(shù)據(jù)庫(kù)的查詢
- 使用 add() 進(jìn)行了數(shù)據(jù)添加
- 使用 update() 進(jìn)行了數(shù)據(jù)修改
- 使用 remove() 進(jìn)行了數(shù)據(jù)刪除
本章節(jié)給大家?guī)?lái)「排序」「精準(zhǔn)」「模糊」「分頁(yè)」這四種查詢方式在實(shí)際業(yè)務(wù)種也是經(jīng)常用到的。
列表排序
默認(rèn)情況下小程序查詢出來(lái)的列表是按時(shí)間來(lái)排序的，最新添加的數(shù)據(jù)在最后面。但是實(shí)際需求是需要最新添加的在最前面，那么這個(gè)時(shí)候我們就需要用排序函數(shù) orderBy 來(lái)改變它的排序規(guī)則。
在 orderBy 具體使用方法（通過(guò)數(shù)據(jù)庫(kù)對(duì)象直接鏈?zhǔn)秸{(diào)用的方法，在使用 get 方法之前使用）：
文檔示例代碼：按進(jìn)度排升序取待辦事項(xiàng)
db.collection('todos').orderBy('progress', 'asc')
.get()
.then(console.log)
.catch(console.error)
參數(shù)分別：
- 需要排序的字段名
- 排序具體的規(guī)則
- asc：升序，從小到大
- desc：降序，從大到小
同時(shí)支持多個(gè)字段組合排序，優(yōu)先級(jí)根據(jù)調(diào)用順序來(lái)決定
當(dāng)我們學(xué)習(xí)到這個(gè)API到時(shí)候，再來(lái)思考下如何實(shí)現(xiàn)具體需求，實(shí)現(xiàn)這個(gè)需求一共有兩種方式：
新增時(shí)間字段排序
這個(gè)時(shí)候我們可以在新增/修改的時(shí)候去設(shè)置時(shí)間戳字段 createTime ，然后通過(guò)時(shí)間戳字段進(jìn)行排序。
添加 createTime 屬性代碼寫在編輯頁(yè)面的 save 保存方法中
時(shí)間戳獲取的4種方式
let createTime1 = Date.parse(new Date()); // 精確到秒
let createTime2 = new Date().getTime(); // 精確到毫秒
let createTime3 = new Date().valueOf(); // 精確到毫秒
let createTime4 = Date.now(); // 精確到毫秒，實(shí)際上是new Date().getTime()
排序代碼：
db.collection('memo').orderBy('createTime', 'desc').get()
組合時(shí)間字段排序
除此之外還有同學(xué)在沒(méi)有新增字段的情況下也完成了同樣的效果，使用了多個(gè)字段組合排序。
db.collection('memo').orderBy('date','desc').orderBy('time','desc').get()
先對(duì)日期進(jìn)行了排序，然后再對(duì)時(shí)間進(jìn)行排序。在這里要注意有的同學(xué)只對(duì)時(shí)間進(jìn)行了排序，這種情況下如果是同一天的數(shù)據(jù)排序正常，但是是多天的情況下順序就會(huì)亂掉。
根據(jù)內(nèi)容查詢
為了更高效的找到備忘錄，那么搜索是必不可少的，接下來(lái)我們會(huì)使用 where 函數(shù)來(lái)實(shí)現(xiàn)搜索功能。首先我們需要來(lái)一個(gè)搜索框，在這里再告訴大家一個(gè)小技巧一些常用的組件我們可以通過(guò)引用的成熟UI組件庫(kù)來(lái)進(jìn)行快速實(shí)現(xiàn)，上次我們學(xué)習(xí)了用npm應(yīng)用時(shí)間工具包，接下來(lái)我們擴(kuò)展庫(kù)引入WeUI組件。
使用UI組件庫(kù)
- 在app.json中配置：
{
"useExtendedLib": {
"weui": true
}
}
相當(dāng)于引入了對(duì)應(yīng)擴(kuò)展庫(kù)相關(guān)的最新版本的 npm 包，同時(shí)也不占用小程序的包體積。
2. 在使用的頁(yè)面json配置搜索組件
{
"usingComponents": {
"mp-searchbar": "weui-miniprogram/searchbar/searchbar"
}
}
- 在頁(yè)面需要的位置添加布局代碼，插入到列表之上，頭部之下的位置
<view>
<!-- 頭部布局 -->
<view class="page__bd">
<mp-searchbar bindinput="searchTitle" ></mp-searchbar>
</view>
<!-- 列表布局 -->
</view>
顯示效果：
4. 監(jiān)聽(tīng)輸入框數(shù)據(jù)
searchTitle: function (event) {
console.log('search',event.detail.value)
}
到這里，我相信大家一定有對(duì)UI組件庫(kù)相見(jiàn)恨晚對(duì)感覺(jué)，寫樣式實(shí)在是太痛苦了！但是話說(shuō)回來(lái)，組件庫(kù)只是覆蓋了我們常用組件，如果組件庫(kù)沒(méi)有的組件我們還是要老老實(shí)實(shí)自己寫，所以在樣式的編寫能力還是非常重要的，在學(xué)習(xí)的過(guò)程中一定要多加練習(xí)。
精準(zhǔn)查詢
當(dāng)我們拿到數(shù)據(jù)后就開(kāi)始去查詢，在這里我們需要改造下我們的 getMemoList 函數(shù)。
// 獲取備忘錄列表，支持搜索標(biāo)題
function getMemoList(value) {
// 1. 獲取數(shù)據(jù)庫(kù)引用
const db = wx.cloud.database()
// 2. 找到集合獲取數(shù)據(jù)
let memo = db.collection('memo')
// 3. 判斷是否有查詢數(shù)據(jù)
if (value) {
memo = memo.where({
title: value
})
}
// 4. 判斷查詢返回?cái)?shù)據(jù)
return memo.orderBy('createTime', 'desc').get()
}
然后在監(jiān)聽(tīng)的時(shí)候調(diào)用
searchTitle: function (event) {
let value = event.detail.value
getMemoList(value).then(res=>{
console.log(res.data)
this.udpateList(res.data)
})
}
實(shí)現(xiàn)效果：
但是實(shí)際場(chǎng)景下，很多時(shí)候我們都是通過(guò)模糊匹配，因?yàn)橛锌赡軅渫浀臉?biāo)題過(guò)長(zhǎng)了，不便于用戶記住。
模糊查詢
在這里主要是查詢條件用正則匹配，使用 RegExp 構(gòu)造器構(gòu)造正則對(duì)象。
memo.where({
title: db.RegExp({
regexp: value, //從搜索欄中獲取的value作為規(guī)則進(jìn)行匹配。
options: 'i', //大小寫不區(qū)分
})
實(shí)現(xiàn)效果：
分頁(yè)查詢
當(dāng)備忘錄使用的時(shí)間越來(lái)越長(zhǎng)的時(shí)候，那么數(shù)據(jù)也會(huì)隨著變多，這個(gè)時(shí)候?qū)嶋H需求也不需要一次性全部加載出來(lái)，那么分頁(yè)的需求就隨之而來(lái)。小程序端操作云數(shù)據(jù)庫(kù)的 get() 獲取數(shù)據(jù)API，一次性最多拉取20條。
那么如何進(jìn)行數(shù)據(jù)分頁(yè)？官方給出了案例：
db.collection('todos')
.where({
_openid: 'xxx', // 填入當(dāng)前用戶 openid
})
.skip(10) // 跳過(guò)結(jié)果集中的前 10 條，從第 11 條開(kāi)始返回
.limit(10) // 限制返回?cái)?shù)量為 10 條
.get()
.then(res => {
console.log(res.data)
})
.catch(err => {
console.error(err)
})
主要是通過(guò) skip 和 limit 。
skip：從第多少條開(kāi)始取
limit：一次性取多少條數(shù)據(jù)
我們來(lái)根據(jù)實(shí)際業(yè)務(wù)來(lái)實(shí)現(xiàn)下
- 定義頁(yè)數(shù)和每頁(yè)數(shù)量
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
pageNo:0, // 默認(rèn)第一頁(yè)
pageSize:5, // 一頁(yè)5條數(shù)據(jù)
},
- 改造列表數(shù)據(jù)查詢函數(shù)
function getMemoList(pageNo, pageSize) {
const db = wx.cloud.database()
return db.collection('memo')
.skip(pageNo * pageSize)
.limit(pageSize)
.orderBy('createTime', 'desc')
.get()
}
- 首次調(diào)用方式傳入?yún)?shù)
onShow() {
getMemoList(this.data.pageNo,this.data.pageSize).then(res => {
this.udpateList(res.data)
})
}
- 監(jiān)聽(tīng)頁(yè)面上拉回調(diào)事件
// 上拉加載
onReachBottom (){
this.loadList()
}
- 實(shí)現(xiàn)具體數(shù)據(jù)加載邏輯
async loadList(){
// 1. 獲取總條數(shù)
let {total} = await getListTotal()
// 2. 判斷是否全部已經(jīng)加載完畢
if(this.data.list.length<total){
// 如果沒(méi)有加載完
// 提示數(shù)據(jù)加載中
wx.showLoading({
title: '數(shù)據(jù)加載中...',
})
// 當(dāng)前頁(yè)+1
this.data.pageNo ++
// 獲取下一頁(yè)數(shù)據(jù)
let {data} = await getMemoList(this.data.pageNo,this.data.pageSize)
this.setData({
// 拼接數(shù)據(jù)，頁(yè)面展示
list:this.data.list.concat(data)
})
// 關(guān)閉加載提示
wx.hideLoading()
}else{
// 加載完成提示：“無(wú)更多數(shù)據(jù)”
wx.showToast({
icon:'error',
title: '無(wú)更多數(shù)據(jù)',
})
}
},
注意：
- 以上邏輯中使用async/await來(lái)減少了回調(diào)讓代碼可讀寫更強(qiáng)。
- 以上邏輯中使用到獲取列表總數(shù)的 getListTotal 使用了 count 函數(shù)。
function getListTotal() {
const db = wx.cloud.database()
return db.collection('memo').count()
}
指定返回
在實(shí)際業(yè)務(wù)中通常列表子項(xiàng)詳情很多，但是列表只需要展示部分關(guān)鍵信息，那么這個(gè)時(shí)候我們就只需要查列表需要展示的字段，指定返回結(jié)果，沒(méi)有必要的字段就不需要返回，使用 field 進(jìn)行實(shí)現(xiàn)。
如：當(dāng)前列表只需要顯示標(biāo)題字段數(shù)據(jù)。
// 獲取備忘錄列表
function getMemoList(pageNo, pageSize) {
const db = wx.cloud.database()
return db.collection('memo')
.field({
title: true,
})
.get()
}數(shù)據(jù)返回
在實(shí)際業(yè)務(wù)場(chǎng)景也是列表通常不會(huì)查詢出所有數(shù)據(jù)，點(diǎn)擊詳情才會(huì)把所有數(shù)據(jù)通過(guò)id查詢出來(lái)，所以在列表頁(yè)面到詳情頁(yè)面參數(shù)也是最佳做法是傳遞id字段，而不是把列表點(diǎn)擊對(duì)象傳遞到詳情頁(yè)面。
總結(jié)
今日學(xué)習(xí)：
- 數(shù)據(jù)庫(kù) orderBy 排序條件
- 使用擴(kuò)展庫(kù)WeUI組件庫(kù)
- 數(shù)據(jù)庫(kù) where 查詢條件
- 數(shù)據(jù)庫(kù) skip、limit、count 組合實(shí)現(xiàn)分頁(yè)查詢
- 數(shù)據(jù)庫(kù) field 指定返回字段
