柚子快報激活碼778899分享：微信小程序 - 云開發(fā)

http://yzkb.51969.com/

1、小程序云開發(fā)

1.1、云開發(fā)簡介

小程序·云開發(fā)是微信團(tuán)隊聯(lián)合騰訊云推出的專業(yè)的小程序開發(fā)服務(wù)。開發(fā)者可以使用云開發(fā)快速開發(fā)小程序、小游戲、公眾號網(wǎng)頁等，并且原生打通微信開放能力。開發(fā)者無需搭建服務(wù)器，可免鑒權(quán)直接使用平臺提供的API進(jìn)行業(yè)務(wù)開發(fā) 小程序云開發(fā)又簡稱tcb，是微信官方給我們提供的基于騰訊云的云服務(wù)器。目前云開發(fā)包含：云數(shù)據(jù)庫，云函數(shù)，云存儲，云調(diào)用。后面章節(jié)會具體給大家講解這幾個。

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

1.2、云開發(fā)和傳統(tǒng)服務(wù)器對比

云開發(fā)相對于傳統(tǒng)服務(wù)器的優(yōu)勢如下表

通過上面的對比，可以看出，如果想快速創(chuàng)建一個小程序的后臺，用云開發(fā)是不錯的選擇。

2、微信開發(fā)者工具的安裝與使用

工欲善其事必先利其器，我們在開發(fā)小程序之前，首先需要安裝小程序開發(fā)者工具。

2.1、進(jìn)入小程序官網(wǎng)，點(diǎn)擊工具，如下圖所示。

當(dāng)然了，也可以直接通過下面鏈接去下載 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.2、下載安裝包如下

不管你是window還是mac電腦，只需要雙擊安裝包實現(xiàn)安裝即可。 等待安裝即可 安裝完成

2.3、進(jìn)入開發(fā)者工具

第一次進(jìn)入時，如下 點(diǎn)擊上圖的加號，我們來創(chuàng)建一個新項目 完成上圖的配置后，點(diǎn)擊新建。即可創(chuàng)建項目。創(chuàng)建好以后的項目如下圖所示。 這樣我們就完成了小程序開發(fā)者工具的安裝了，后面我們就可以開始小程序的代碼編寫了。

3、注冊小程序

前面雖然可以用測試號創(chuàng)建小程序,但是測試號有很多功能會受限,比如我們接下來要講的云開發(fā),必須是注冊小程序后才可以使用,所以今天我們就來講講小程序的注冊.

其實官方給的注冊步驟很詳細(xì)了

官方注冊文檔:https://developers.weixin.qq.com/miniprogram/introduction/

微信小程序注冊地址：https://mp.weixin.qq.com/ 進(jìn)去以后點(diǎn)擊立即注冊

進(jìn)入注冊頁面時,跟著提示一步步來就可以了

注意點(diǎn):

如果只是學(xué)習(xí)的話,注冊個人小程序即可.如果想商用,想使用微信支付,取用戶手機(jī)號等復(fù)雜功能,可以注冊企業(yè)小程序,不過企業(yè)小程序必須有營業(yè)執(zhí)照才可以注冊一個郵箱只能注冊一個小程序一個身份證可以注冊5個，個人小程序一個企業(yè)的營業(yè)執(zhí)照可以注冊50個企業(yè)小程序

4、云開發(fā)環(huán)境的創(chuàng)建與初始化

今天我們就來正式的創(chuàng)建自己的第一個云開發(fā)項目,在創(chuàng)建云開發(fā)之前,有下面幾個注意事項

1,必須注冊小程序后才可以開通云開發(fā)2,一個小程序可以創(chuàng)建兩個云開發(fā)環(huán)境

4.1、創(chuàng)建一個初始項目

開通云開發(fā)服務(wù)，必須先要進(jìn)入小程序開發(fā)者工具才可以。 和創(chuàng)建普通小程序一樣,如上圖所示,需要注意的就是這里必須要填寫自己的appid,不可以用測試號. appid的獲取如下圖所示.

4.2、開通云開發(fā)

1,點(diǎn)擊下圖箭頭所示,如果你第一步創(chuàng)建項目時,沒有使用自己的appid,這里不會有下圖箭頭所示的云朵. 2,給云開發(fā)環(huán)境取名 等待創(chuàng)建 創(chuàng)建成功 3,獲取云開發(fā)環(huán)境id

4.3、初始化云開發(fā)環(huán)境(***重要)

在app.js里寫入環(huán)境id,注意這里要用你自己的云開發(fā)環(huán)境id

初始化云開發(fā)環(huán)境前，先去云開發(fā)控制臺，拿到云開發(fā)環(huán)境id，如下圖 這里的環(huán)境id建議直接復(fù)制，不要手寫，很容易寫錯。 拿到環(huán)境id以后，就去app.js里做云開發(fā)環(huán)境初始化，如下

用時候云開發(fā)創(chuàng)建好以后,初始化可能需要一點(diǎn)時間,所以如果這里初始化有報錯,記得關(guān)閉開發(fā)者工具,等幾分鐘再重新打開即可.

5、云數(shù)據(jù)庫

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html

5.1、在數(shù)據(jù)庫里新建集合(數(shù)據(jù)表)

直接在工具里建表

我們這里以新建一個商品列表為例

在內(nèi)容管理里建表

5.2、數(shù)據(jù)庫權(quán)限管理

要想讓用戶查詢到我們創(chuàng)建的商品數(shù)據(jù)，需要把權(quán)限改為所有用戶可讀

5.3、數(shù)據(jù)庫的增刪改查

5.3.1、查詢 get()

傳統(tǒng)寫法 ES6簡潔寫法 推薦第二種寫法

5.3.2、條件查詢 where()

5.3.3、查詢單條數(shù)據(jù)doc()

doc是用來查詢單條數(shù)據(jù)的。比如商品詳情頁。 doc里面用到的參數(shù)就是我們數(shù)據(jù)里的_id字段

5.3.4、添加數(shù)據(jù) add()

通過add可以實現(xiàn)數(shù)據(jù)的添加，

5.3.5、更新數(shù)據(jù)update()

修改數(shù)據(jù)庫里已存在的數(shù)據(jù)，結(jié)合doc進(jìn)行修改單條數(shù)據(jù)

5.3.6、刪除數(shù)據(jù)remove()

刪除數(shù)據(jù)，結(jié)合doc刪除單條數(shù)據(jù)

5.4、增刪改查綜合案例

1，能查看商品列表2，更動態(tài)添加商品3，能進(jìn)入商品詳情頁4，能刪除某個商品5，能修改某個商品的價格

5.4.1 列表跳詳情 data-

1，在wxml里定義data- 要綁定的數(shù)據(jù) 2， 在js頁面里的點(diǎn)擊方法里拿到綁定的數(shù)據(jù) 比如打印結(jié)果如下

5.4.2 列表跳詳情并攜帶商品id

1，列表跳頁到詳情頁 2，拿到列表跳頁時攜帶的id數(shù)據(jù)

5.4.3 查詢商品列表

5.4.4 添加商品并刷新商品列表

5.4.5 更新商品數(shù)據(jù)

用戶輸入新價格，調(diào)用update方法進(jìn)行更新數(shù)據(jù) 我們更新成功的時候，會有如下所示的日志打印。 只有stats里的updated是1的時候，才代表成功的更新了一條數(shù)據(jù)。 如果這條商品不是你創(chuàng)建的，當(dāng)你對這條商品做更新操作時，打印的updated就是0。 這個時候代表沒有更新成功。這是因為操作時的權(quán)限問題，要解決這個問題，就要借助云函數(shù)了，這里我們先放在這里，在后面云函數(shù)章節(jié)會做具體講解。

5.4.6 彈窗提示確認(rèn)是否刪除

用戶刪除數(shù)據(jù)是一個危險操作，所以操作之前最好給用戶一個友好提示。 官方彈窗文檔：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

5.4.7 刪除商品

5.4.8 更新和刪除時的權(quán)限問題

如果這條商品不是你創(chuàng)建的，當(dāng)你對這條商品做刪除或者更新操作時，雖然也會返回成功，但是可以看到我們更新或者刪除的條數(shù)是0。

其實這個時候也意味著沒有更新或者刪除成功，這里是因為操作權(quán)限的問題，因為這條數(shù)據(jù)不是你創(chuàng)建的。所以你只能對這條數(shù)據(jù)做查詢操作，而不能做修改和刪除操作。要想解決這個問題，就要借助云函數(shù)了。后面云函數(shù)講解的部分，我會做具體講解的。

我們還是先接著學(xué)習(xí)數(shù)據(jù)庫操作的高級操作

5.6、常用快捷鍵

我們在開發(fā)時為了提高代碼編寫效率，通常會使用一些快捷鍵。我們小程序開發(fā)工具里常用的快捷鍵如下。 設(shè)置—》快捷鍵設(shè)置 然后點(diǎn)擊如下快捷鍵即可查看所有的快捷鍵 如果感覺默認(rèn)的快捷鍵不喜歡，可以自己重新設(shè)置快捷鍵。由于自帶的快捷比較多，我這里不一一列舉了，我把一些常用的快捷鍵拿出來給大家大致講一講，我這里以window電腦為例，如果你mac電腦，可以自己去看下開發(fā)者工具默認(rèn)的快捷鍵。多看幾遍把常用的記住就行了。

快捷鍵組合描述Ctrl+a全選Ctrl+c復(fù)制選中內(nèi)容Ctrl+v粘貼復(fù)制的內(nèi)容Ctrl+z撤銷當(dāng)前編輯Ctrl+s保存并編譯項目Ctrl+b重新編譯項目Ctrl+x截切選中的內(nèi)容Ctrl+/添加注釋Ctrl+Shift+k刪除當(dāng)前行Ctrl+Shift+f全局搜索Ctrl+f當(dāng)前頁面內(nèi)搜索Ctrl+Shift+h全局搜索并替換文本Ctrl+h當(dāng)前頁面內(nèi)搜索并替換文本Shift+Alt+F格式化代碼Shift+Alt+?向上復(fù)制當(dāng)前行Shift+Alt+?向下復(fù)制當(dāng)前行Alt+?把當(dāng)前行向上移動一行Alt+?把當(dāng)前行向下移動一行

有的電腦上快捷鍵可能會有細(xì)微差距，以開發(fā)者工具默認(rèn)自帶的快捷鍵為準(zhǔn)。

5.7、數(shù)據(jù)庫排序orderBy

orderBy方法在做排序的時候，接受兩個參數(shù)

1，根據(jù)那個字段排序2，排序規(guī)則（升序或者降序）。升序用asc，降序用desc

如我們根據(jù)商品價格從低到高升序排列 如我們根據(jù)商品價格從高到低降序排列

5.8、返回指定條數(shù)的數(shù)據(jù)limit

limit用來指定查詢結(jié)果集數(shù)量上限，比如我們有100條數(shù)據(jù)，只想返回前20條，我們可以通過limit(20)來指定只返回20條數(shù)據(jù)。

例如，只返回3條數(shù)據(jù)的寫法如下

注意：limit 在小程序端默認(rèn)及最大上限為 20，在云函數(shù)端默認(rèn)及最大上限為 1000

5.9、分頁方法skip

skip指定查詢返回結(jié)果時從指定序列后的結(jié)果開始返回，常用于分頁。比如我們有100條數(shù)據(jù)，想從第10條開始返回數(shù)據(jù)，可以通過skip(10)來實現(xiàn)

skip結(jié)合我們上面學(xué)的limit方法可以實現(xiàn)分頁效果

比如我們有100條數(shù)據(jù)，每次返回20條數(shù)據(jù)。那么就可以分5頁返回。

第1頁 limit(20).skip(0)第2頁 limit(20).skip(20)第3頁 limit(20).skip(40)第4頁 limit(20).skip(60)第5頁 limit(20).skip(80)

5.10、Command數(shù)據(jù)庫操作符

我門上面學(xué)完了數(shù)據(jù)庫的增刪改查，但是這些都是最基礎(chǔ)最簡單的操作，如果我們想實現(xiàn)復(fù)雜的數(shù)據(jù)查詢操作，該怎么辦呢 比如

查詢價格大于100的商品？查詢年齡小于18歲的學(xué)生？如何同時修改多條數(shù)據(jù)？如何同時刪除多條數(shù)據(jù)？

我們?nèi)绻雽崿F(xiàn)上面這些復(fù)雜的操作，就需要用到數(shù)據(jù)庫里的 Command數(shù)據(jù)庫操作符，就是下面這位 官方文檔：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Command.html

5.10.1、gt查詢大于指定值的數(shù)據(jù)

比如查詢價格大于5的所有商品

5.10.2、gte查詢大于等于指定值的數(shù)據(jù)

比如查詢大于等于5元的商品

5.10.3、lt查詢小于指定數(shù)值的數(shù)據(jù)

比如查詢價格小于5的所有商品

5.10.4、lte查詢小于等于指定數(shù)值的數(shù)據(jù)

比如查詢價格小于等于5元的所有商品

5.10.5、and同時滿足多個條件的查詢

比如查詢價格大于5小于10元的所有商品

6、云函數(shù)

6.1、認(rèn)識云函數(shù)

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions.html

我們先來看下官方給出的云函數(shù)簡介 其實通俗來講，云函數(shù)也是運(yùn)行在服務(wù)器上的，只不過和我們傳統(tǒng)開發(fā)語言相比。微信官方為我們提供的傻瓜式的一鍵部署。也就是說你只需要把心思花在業(yè)務(wù)邏輯代碼的編寫上即可。無需關(guān)心寫好如何部署，無需關(guān)心安全問題，無需關(guān)心鑒權(quán)問題。

我們下面以獲取openid為例，來看看云函數(shù)，php，Java的實現(xiàn)對比

php獲取用戶openid 如果用php來獲取openid必須經(jīng)歷下面幾步1，去小程序后臺拿到appid和appSecret2，請求微信的對應(yīng)接口3，獲取數(shù)據(jù)后進(jìn)行解碼4，購買服務(wù)器，配置服務(wù)器5，購買域名，域名備案，配置https6，部署php代碼到服務(wù)器7，小程序端調(diào)用php接口

Java獲取openid和上面的php步驟一樣，也是需要上面7步。而我們用云函數(shù)獲取openid呢，就只需要簡單的3步就行了，代碼量也能顯著減少

6.1.1、云函數(shù)獲取openid

用云函數(shù)的話，只需要3步

1，編寫云函數(shù)2，一鍵部署云函數(shù)3，調(diào)用云函數(shù)

來看下云函數(shù)代碼，只需要10行代碼，即可輕松搞定

6.2、云函數(shù)的優(yōu)勢

我們用云函數(shù)和上一章的云數(shù)據(jù)庫進(jìn)行下對比

操作云函數(shù)云數(shù)據(jù)庫返回數(shù)據(jù)上限100條20條更新數(shù)據(jù)都可以更新只有自己創(chuàng)建的才可以更新刪除數(shù)據(jù)都可以刪除只有自己創(chuàng)建的才可以刪除運(yùn)行環(huán)境運(yùn)行在云端Node.js環(huán)境運(yùn)行在小程序本地實現(xiàn)功能豐富度非常豐富只能實現(xiàn)數(shù)據(jù)庫增刪改查

來看下官方文檔是如何描述云函數(shù)的 云函數(shù)屬于管理端，在云函數(shù)中運(yùn)行的代碼擁有不受限的數(shù)據(jù)庫讀寫權(quán)限和云文件讀寫權(quán)限。需特別注意，云函數(shù)運(yùn)行環(huán)境即是管理端，與云函數(shù)中的傳入的 openId 對應(yīng)的微信用戶是否是小程序的管理員 / 開發(fā)者無關(guān)。

6.3、云函數(shù)調(diào)用演示

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/functions/Cloud.callFunction.html

6.3.1、初始化云函數(shù)的環(huán)境

1，創(chuàng)建一個文件夾cloud和pages平行 2，在project.config.json里面配置云函數(shù)所在目錄為cloud 在project.config.json里面添加如下配置 然后點(diǎn)擊保存，我們的cloud文件夾前面就有一個云朵 就代表我們云函數(shù)初始化成功啦。新一個云函數(shù) 如果只創(chuàng)建一個云函數(shù)的時候，會出現(xiàn)下面的問題。 解決方案：只需要在cloud文件夾下新建一個空白文件即可。

6.3.1、云函數(shù)獲取openid

調(diào)用云函數(shù)有兩種寫法

1，傳統(tǒng)的success和fail 2，用promise寫法then和catch

6.3.3、數(shù)據(jù)的導(dǎo)入和導(dǎo)出

數(shù)據(jù)導(dǎo)出，做數(shù)據(jù)備份 比如導(dǎo)入為json數(shù)據(jù)如下 導(dǎo)入到數(shù)據(jù)庫如下

6.3.4、云函數(shù)獲取數(shù)據(jù)

注意：云函數(shù)只要有變動，就要重新部署，否則云函數(shù)不生效。

遇到了一個問題，如下 出現(xiàn)原因：如果你有兩個云開發(fā)環(huán)境，偶爾會出現(xiàn)上圖所示的問題。 解決問題：有兩種

1，在云函數(shù)里指定你要使用那個云開發(fā)環(huán)境 2，使用DYNAMIC_CURRENT_ENV常量 （提倡使用這個） 我們這里會和小程序里直接調(diào)用數(shù)據(jù)庫的查詢進(jìn)行下對比

6.3.5、云函數(shù)修改數(shù)據(jù)

本地小程序直接調(diào)用數(shù)據(jù)庫修改會有問題

只能修改自己創(chuàng)建的數(shù)據(jù)，別人創(chuàng)建的數(shù)據(jù)，就沒有辦法修改了。 如何解決呢？ 用云函數(shù)來修改就可以解決這個問題啦。 1，先創(chuàng)建云函數(shù)update0129 2,調(diào)用云函數(shù)就行修改

6.3.6、云函數(shù)刪除數(shù)據(jù)

1,創(chuàng)建一個刪除商品的云函數(shù)remove0129 2,調(diào)用這個云函數(shù)進(jìn)行刪除操作

6.3.7、提交數(shù)據(jù)到云函數(shù)

1，創(chuàng)建云函數(shù)，并部署 2，調(diào)用云函數(shù)

6.5、使用云函數(shù)常見問題

6.4.1、云函數(shù)里面沒有初始化環(huán)境變量

解決方案如下： 使用DYNAMIC_CURRENT_ENV 代碼片段

cloud.init({

env: cloud.DYNAMIC_CURRENT_ENV

})

7、云開發(fā)~云存儲

首先來看下官方對云存儲的介紹： 官方文檔：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html 說白了，云存儲就是可以用來存儲視頻，音頻，圖片，文件的一個云存儲空間。如果你的小程序需要用到視頻播放，音頻播放，圖片展示，文件上傳與下載功能，就可以用到我們的云存儲了。

使用云存儲來存儲文件時，文件名的命名有一些規(guī)則，建議看一下。

7.1、云開發(fā)控制臺管理文件

控制臺也可以很方便的管理文件。

7.2、上傳圖片到云存儲

我們上傳圖片之前需要先選擇圖片，所以這里用到一個圖片選擇的功能 對應(yīng)的官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html 然后調(diào)用文件上傳的api接口即可 官方文檔：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html

7.3、圖片上傳與顯示

云開發(fā)官方文檔：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

小程序列表渲染文檔：[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html?search-key=

1.效果圖

2.實現(xiàn)

背景顏色色值：#2db7f5 卡片布局：

上傳人：{{item.name}}

上傳時間：{{item.time}}

卡片列表樣式：

page {

background: #2db7f5;

}

/* 卡片 */

.item-container {

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

transition: 0.3s;

width: 92%;

margin: 4%;

display: flex;

flex-direction: column;

background: white;

padding-top: 5pt;

padding-bottom: 5pt;

border-radius: 5px;

}

/* 上傳人 */

.item-name {

font-size: 12px;

margin-left: 15px;

}

/* 圖片 */

.img {

width: 100px;

height: 100px;

margin-top: 10px;

margin-left: 20px;

}

獲取當(dāng)前時間的方法：

//獲取當(dāng)前時間,返回時間格式：2018-09-16 15:43:36

getNowFormatDate: function() {

var date = new Date();

var seperator1 = "-";

var seperator2 = ":";

var month = date.getMonth() + 1;

var strDate = date.getDate();

if (month >= 1 && month <= 9) {

month = "0" + month;

}

if (strDate >= 0 && strDate <= 9) {

strDate = "0" + strDate;

}

var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +

" " + date.getHours() + seperator2 + date.getMinutes() +

seperator2 + date.getSeconds();

return currentdate;

},

7.4、上傳視頻到云存儲

上傳視頻之前同樣需要先選擇視頻，選擇視頻的代碼如下 對應(yīng)的官方文檔如下：https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html 選擇好視頻以后，同樣是調(diào)用文件上傳api，因為視頻也是一個文件。

7.5、上傳word，excel文件到云存儲

7.5.1、上傳之前先選擇文件

選擇文件的時候記得把type設(shè)置為file 對應(yīng)的官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html

這里有一點(diǎn)需要注意 在電腦模擬器上是選擇電腦上的文件，在手機(jī)上運(yùn)行小程序進(jìn)行選擇文件時是選擇你聊天記錄里的文件。

7.5.2、上傳文件

在上面選擇好文件以后，我們還是要調(diào)用uploadFile進(jìn)行文件上傳

7.6、下載文件

使用wx.cloud.downloadFile下載文件 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/storage/downloadFile.html

7.7、下載并打開word，excel，pdf

使用wx.openDocument打開文件 https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

8、列表的下拉刷新

8.1、開啟頁面下拉刷新

我們需要在app.json獲取頁面對應(yīng)的json里設(shè)置enablePullDownRefresh屬性為true來開啟下拉刷新。

由于我們的刷新動畫默認(rèn)是白色圓點(diǎn)，所以還要在json里設(shè)置頁面背景色才可以看到動畫。

8.2、在Page的onPullDownRefresh里監(jiān)聽刷新

在page里的onPullDownRefresh方法里監(jiān)聽下拉刷新

8.3、用戶下拉刷新時請求最新數(shù)據(jù)

8.4、數(shù)據(jù)請求成功后停止刷新

我們在下拉刷新時，刷新動畫一般很久才結(jié)束，正常情況下應(yīng)該是數(shù)據(jù)請求成功后就結(jié)束刷新動畫。所以我們通過wx.stopPullDownRefresh()方法來結(jié)束刷新動畫。 官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.startPullDownRefresh.html 代碼示例如下

9、列表的分頁加載

9.1、小程序數(shù)據(jù)庫每次最多20條

小程序數(shù)據(jù)庫api和云函數(shù)調(diào)用數(shù)據(jù)的限制 小程序端直接調(diào)用云數(shù)據(jù)庫時，每次最多可以獲取20條，云函數(shù)里調(diào)用云數(shù)據(jù)庫時每次最多獲取100條。所以我們數(shù)據(jù)多的時候要做分頁加載。

9.2、分頁加載的核心方法

我們做分頁加載時，主要用到了skip和limit方法，對應(yīng)的官方文檔如下

skip：每頁加載多少條 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.skip.htmllimit: 加載第幾頁的數(shù)據(jù)https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.limit.html

其實這個skip和limit我在數(shù)據(jù)庫的那一節(jié)有做初步講解，這一節(jié)我們就借助具體分頁加載的案例來做綜合講解

9.3、導(dǎo)入108條數(shù)據(jù)

9.3.1、導(dǎo)入到數(shù)據(jù)表

我這里導(dǎo)入到num數(shù)據(jù)表，導(dǎo)入成功如下：

9.3.2、別忘記修改表權(quán)限

把數(shù)據(jù)表(集合)的權(quán)限改為所有用戶可讀，僅創(chuàng)建者可讀寫。

9.4、上拉加載更多監(jiān)聽

我們的列表滑動到最后一個數(shù)據(jù)時，會執(zhí)行下面的方法 所以我們的分頁加載要在onReachBottom里做。

9.5、數(shù)據(jù)庫分頁加載代碼實現(xiàn)

直接調(diào)用數(shù)據(jù)庫每次最多只能加載20條數(shù)據(jù) wxml里只做簡單的列表數(shù)據(jù)顯示就行了 wxss做個簡單的樣式 對應(yīng)的效果如下

9.5.1、沒有更多數(shù)據(jù)時的友好提示

9.5.2、加載中和加載完成的友好提示

加載中

wx.showLoading({

title: '加載中...',

})

隱藏加載中

wx.hideLoading()

9.6、通過云函數(shù)實現(xiàn)分頁加載

通過云函數(shù)調(diào)用數(shù)據(jù)庫，每次最多可以加載100條數(shù)據(jù).

如果每頁20條以內(nèi)，不建議用云函數(shù)如果分頁的時候，每頁大于20條，就用云函數(shù)。

10、搜索功能

今天來給大家講講小程序的搜索功能。我這里后臺數(shù)據(jù)庫用的是小程序云開發(fā)的云數(shù)據(jù)庫。所以我們搜索的時候就要借助云開發(fā)來實現(xiàn)。

10.1、需求

比如我這里有如下的一些數(shù)據(jù)

我們想實現(xiàn)如下搜索需求

1，搜索標(biāo)題(title)包含‘小石頭’的數(shù)據(jù)2，搜索標(biāo)題(title)或者描述(desc)包含‘小石頭’的數(shù)據(jù)3，搜索標(biāo)題(title)描述(desc)都包含‘小石頭’的數(shù)據(jù)

我們知道數(shù)據(jù)庫查詢的時候有個where語句，但是where語句是查詢某個字段全部包含你輸入的內(nèi)容時才可以，所以單純用where語句來做搜索的話，結(jié)果太單一。所以我們今天就來學(xué)習(xí)下模糊搜索功能的實現(xiàn)。我們以上面三個需求為例，來一個個講解。

10.2、實現(xiàn)原理

我們做模糊搜索的時候，其實就是查詢某個字段里是否包含我們的搜索詞。而模糊搜索需要借助RegExp，來看看RegExp是什么。 官方文檔：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html

再來看看官方示例 可能看官方示例會有點(diǎn)糊涂，那么我們接下來就結(jié)合具體代碼來給大家做下講解。

10.3、模糊搜索的代碼實現(xiàn)

10.3.1、模糊搜索單個字段

需求：搜索標(biāo)題(title)包含‘小石頭’的數(shù)據(jù)

代碼如下 查詢結(jié)果如下： 可以看到我們成功的查詢到了標(biāo)題里包含‘小石頭的數(shù)據(jù)’

10.3.2、模糊搜索多個字段（滿足一個即可）

需求：搜索標(biāo)題(title)或者描述(desc)包含‘小石頭’的數(shù)據(jù)

由于我們要查詢多個字段，所以我們這里用到了command高級操作符里的or 代碼如下： 查詢結(jié)果： 我們來分析下這兩條數(shù)據(jù)

1，標(biāo)題和描述都包含‘小石頭’，符合2，雖然標(biāo)題里沒有‘小石頭’，但是描述里有，所以也符合。3，title和desc里都沒有‘小石頭’，所以不符合。

10.3.3、模糊搜索多個字段（要同時滿足）

需求：搜索標(biāo)題(title)描述(desc)都包含‘小石頭’的數(shù)據(jù)

由于我們要查詢多個字段，所以我們這里用到了command高級操作符里的and

代碼如下：

查詢結(jié)果： 我們來分析下這兩條數(shù)據(jù)

1，標(biāo)題和描述都包含‘小石頭’，符合2，雖然desc里沒有‘小石頭’，但是title里沒有，所以也不符合。3，title和desc里都沒有‘小石頭’，所以也不符合。

10.4、源碼

為例方便大家使用，我把完整的代碼貼到這里，后面大家使用時，直接復(fù)制這里的代碼，略微改造下就可以了。

//我這里簡單起見就把搜索詞寫死，正常應(yīng)該用戶輸入的

let searchKey = '小石頭'

let db = wx.cloud.database()

let _ = db.command

db.collection('news')

.where(_.or([

{//標(biāo)題

title: db.RegExp({ //使用正則查詢，實現(xiàn)對搜索的模糊查詢

regexp: searchKey,

options: 'i', //大小寫不區(qū)分

}),

},

{//描述

desc: db.RegExp({

regexp: searchKey,

options: 'i',

}),

}

])).get()

.then(res => {

console.log('查詢成功', res)

})

.catch(res => {

console.log('查詢失敗', res)

})

10.5、獲取用戶輸入的搜索詞進(jìn)行搜索

11、登錄注冊

1.注冊頁

? 注冊主要用到了input組件獲取用戶輸入，button組件實現(xiàn)注冊功能，注冊主要是把賬號名和密碼添加到云開發(fā)數(shù)據(jù)庫。

2.登錄頁

登錄主要是獲取用戶輸入的賬號和密碼，然后從數(shù)據(jù)庫里讀取相應(yīng)的數(shù)據(jù)，做賬號和密碼的比對，如果賬號和密碼都一樣，就可以直接登陸成功

3.登錄成功跳轉(zhuǎn)到首頁

登錄成功以后，會調(diào)整到首頁

4.保存登錄狀態(tài)

5.退出登錄

12、點(diǎn)贊與收藏與評論

1，常用圖標(biāo)獲取網(wǎng)站

這里用了一個阿里巴巴矢量圖庫：https://www.iconfont.cn

2，云函數(shù)里初始化云開發(fā)環(huán)境

cloud.init({

env: cloud.DYNAMIC_CURRENT_ENV

})

13、CMS網(wǎng)頁版管理后臺

13.1、開通cms的準(zhǔn)備工作

如下圖所示，直接點(diǎn)擊開通內(nèi)容管理(CMS)即可 開通cms需要你云開發(fā)里使用按量付費(fèi)，如果你是第一次開通云開發(fā)，記得做如下選擇。

如果你已經(jīng)開通過云開發(fā)，記得把付費(fèi)模式改為按量付費(fèi)。如果你一開始云開發(fā)不是按量付費(fèi)的模式。

點(diǎn)擊完開通以后，會有如下彈窗，直接點(diǎn)擊確定即可。不要被付費(fèi)嚇著，官方每月會送我們一定的免費(fèi)額度的。學(xué)習(xí)得話基本上夠用了。

上面點(diǎn)完確定后，我們只是開啟了按量付費(fèi)功能，因為cms得使用必須要開通按量付費(fèi)才可以得。所以還要再點(diǎn)一次開通。如下圖

點(diǎn)完開通后，會有如下彈窗，直接點(diǎn)擊下一步即可。 然后我們需要設(shè)置登錄內(nèi)容管理后臺得賬號和密碼，然后點(diǎn)擊確定即可

然后我們就等待內(nèi)容管理功能得開通了，需要等幾分鐘。

開通成功以后，我們就可以通過下面這個地址進(jìn)入管理后臺了。

后面我們統(tǒng)一稱內(nèi)容管理為cms

13.2、注意事項

一個云開發(fā)環(huán)境對應(yīng)一個內(nèi)容管理(cms)cms開通會存在開通失敗的情況，如果開通失敗了，就用新的云開發(fā)環(huán)境去開通，如果新的云開發(fā)環(huán)境還是不行的話，那就只能重新去注冊一個新的小程序了。一個小程序是可以開通兩個云開發(fā)環(huán)境的。

13.3、登錄Cms可視化管理后臺

上面開通好以后，就可以通過后臺地址登錄管理后臺了。如下

13.4、在cms里創(chuàng)建后臺項目

13.5、內(nèi)容模型

13.6、數(shù)據(jù)類型

往內(nèi)容模型里添加數(shù)據(jù)類型的時候可以選擇如下一些類型

單行字符串、多行字符串、數(shù)字、布爾值、枚舉、日期、日期與時間、文件、圖片、多媒體、郵箱地址、電話號碼、網(wǎng)址、富文本、Markdown、關(guān)聯(lián)、數(shù)組、JSON對象

13.7 數(shù)據(jù)表(集合)管理

可以對上面創(chuàng)建好的內(nèi)容模型(集合)進(jìn)行可視化的管理，這也是cms的優(yōu)點(diǎn)，可以讓我們對數(shù)據(jù)庫進(jìn)行可視化的管理。

13.8、綜合案例

結(jié)合cms和云開發(fā)數(shù)據(jù)庫，實現(xiàn)一個簡單的新聞小程序，有如下功能點(diǎn)

新聞列表新聞詳情圖文混排富文本編輯rich-text的學(xué)習(xí) rich-text官方文檔： https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

柚子快報激活碼778899分享：微信小程序 - 云開發(fā)

http://yzkb.51969.com/

參考閱讀