什么是云開發(fā)？

云開發(fā)是可以幫助我們快速成為全棧的一種后端云服務(wù)，采用的是Serverless的架構(gòu)。開發(fā)者無須搭建服務(wù)器，可直接使用其中的云數(shù)據(jù)庫、云存儲、云函數(shù)等云服務(wù)基礎(chǔ)功能。

那么這個時候你可能會想，這和現(xiàn)在的傳統(tǒng)開發(fā)模式有什么區(qū)別呢？下面通過現(xiàn)實生活中蓋房子的過程來了解傳統(tǒng)開發(fā)模式與云開發(fā)模式的區(qū)別。

如果傳統(tǒng)方式來蓋房子需要6步：
1）將房子的地基打好，設(shè)計整理結(jié)構(gòu)。（后端云服務(wù)基礎(chǔ)架構(gòu)）
2）打地梁，地梁也是決定房子是否穩(wěn)固的關(guān)鍵。（搭建云數(shù)據(jù)庫）
3）主體的砌筑，將房子的基本結(jié)構(gòu)蓋好。（搭建云存儲）
4）在步屋內(nèi)填上土，砸夯，將地面砸實。（搭建云函數(shù)）
5）在屋頂鋪上水泥，封實。（提供靜態(tài)托管和擴展能力）
6）裝修成自己喜歡的風格。（編寫業(yè)務(wù)需求邏輯代碼）

而云開發(fā)模式只有一步，即裝修成自己喜歡的風格?？梢钥吹綀D1-1展示的是傳統(tǒng)開發(fā)需要管理的基礎(chǔ)資源與云開發(fā)需要管理的基礎(chǔ)資源的對比，可以幫助我們更清晰的了解兩者之間的差距。

圖1-1 傳統(tǒng)開發(fā)需要管理的基礎(chǔ)資源VS云開發(fā)需要管理的基礎(chǔ)資源

就這一步即可。云開發(fā)提供完整的后端云服務(wù)，提供數(shù)據(jù)庫、存儲、函數(shù)、靜態(tài)托管等基礎(chǔ)能力，以及擴展能力，無須管理基礎(chǔ)架構(gòu)。相比較傳統(tǒng)的開發(fā)模式，云開發(fā)至少可節(jié)省50%的人力成本、交付效率提升70%。

云開發(fā)模式調(diào)整

在此之前我們需要把原來碼仔備忘錄項目改成云開發(fā)項目，所以需要先把項目從項目管理中先刪除。（如果是直接新建的云開發(fā)項目可以忽略這一步）

首先，先進入小程序項目管理頁面：

然后點擊右上角「管理」按鈕進入該頁面的管理狀態(tài)。

然后選中你之前的單機版本勾選進行刪除即可。

接下來我們在導入項目界面對云開發(fā)進行勾選即可。

這個時候進入我們會發(fā)現(xiàn)小程序開發(fā)工具自動給我們生成了一套云開發(fā)Demo，我們先直接處理掉。

意思就是找不到小程序云開Demo代碼的里面的一些模塊，這個不用理會直接先把Demo代碼全部刪除。

刪除后我們就可以看到正常的頁面渲染了。

回到正常狀態(tài)下，我們接下來要改造的就是數(shù)據(jù)操作這塊的業(yè)務(wù)。

數(shù)據(jù)緩存改造云開發(fā)

在改造之前我們先要梳理思路。

1. 首先我們先通過之前學習過抽象方法。
2. 把所有和數(shù)據(jù)操作相關(guān)的方法都抽取到一個js類里面，這樣便于維護。
3. 將所有的方法替換成云數(shù)據(jù)庫的操作函數(shù)。

抽象數(shù)據(jù)操作API

我們在根目錄下面新增 api 的文件夾，然后在其文件夾下面新增一個 memo.js 用于存放所有備忘錄的操作API。

梳理下有哪些方法：

1. 獲取備忘錄列表
2. 獲取備忘錄詳情
3. 新增備忘錄信息
4. 刪除備忘錄信息
5. 修改備忘錄信息

先給相關(guān)的方法取好函數(shù)名稱，然后進行導出聲明。
memo.js 完整代碼

首先我們來實現(xiàn)獲取備忘錄列表，在列表頁面 onShow 函數(shù)中會被調(diào)用。

在這個時候setData是頁面操作函數(shù)，所以我們要抽象的部分是：

接下來我們就把這段代碼放在memo.js里面去。

memo.js 關(guān)于 getMemoList 的代碼片段

然后替換成列表頁面的調(diào)用，先引入memo的獲取 getMemoList 函數(shù)。
list.js 頭部引入代碼片段

引入后在 onShow 函數(shù)中使用
在 onShow 所有代碼片段

采取同樣的方式，我們可以把之前的獲取詳情、刪除、修改都抽象到 memo.js 中：
memo.js 所有代碼

在相應業(yè)務(wù)場景進行調(diào)用，調(diào)用之前都要先引入方法才行。由于引入代碼相對重復，下面就不貼引入代碼了，只貼使用代碼。

刪除代碼方法調(diào)用：
list.js 中 del 函數(shù)所有代碼

查看備忘錄詳情調(diào)用：
edit.js 中 onLoad 函數(shù)所有代碼

新增和刪除方法調(diào)用：
edit.js 中 save 函數(shù)中的關(guān)于保存和修改的代碼片段

到這里我們就完成了第一步，先抽取數(shù)據(jù)操作對象，然后我們要進行云數(shù)據(jù)庫到操作了。

操作云數(shù)據(jù)庫

初始化數(shù)據(jù)庫

首先我們先進入云開發(fā)控制臺。

然后選中「數(shù)據(jù)庫」。

云開發(fā)提供了一個 JSON 數(shù)據(jù)庫，顧名思義，數(shù)據(jù)庫中的每條記錄都是一個 JSON 格式的對象。一個數(shù)據(jù)庫可以有多個集合（相當于關(guān)系型數(shù)據(jù)中的表），集合可看做一個 JSON 數(shù)組，數(shù)組中的每個對象就是一條記錄，記錄的格式是 JSON 對象。

我們會發(fā)現(xiàn)沒有可用的集合，再次新建一個集合 memo，用于存放備忘錄數(shù)據(jù)。

新增一條數(shù)據(jù)

我們先手動新增一條測試數(shù)據(jù)看看，點擊「添加記錄」。

我們用以上測試數(shù)據(jù)添加進去

除此之外我們可以看到可以添加多種不同類型的數(shù)據(jù)，云開發(fā)數(shù)據(jù)庫提供以下幾種數(shù)據(jù)類型：

• String：字符串
• Number：數(shù)字
• Object：對象
• Array：數(shù)組
• Bool：布爾值
• Date：時間
• Geo：多種地理位置類型
• Null

我們先默認都用 string 類型的數(shù)據(jù)，新增完成之后就可以做memo集合中看到一條數(shù)據(jù)了。

數(shù)據(jù)表已經(jīng)有數(shù)據(jù)了，那么我們怎么獲?。?/p>

獲取數(shù)據(jù)庫數(shù)據(jù)

我們回到小程序編輯臺，對我們的獲取數(shù)據(jù)方法進行下改造。

這個是獲取本地的數(shù)據(jù)方法，下面是獲取數(shù)據(jù)庫方法

當我們?nèi)チ斜眄撁孢M行調(diào)用的時候發(fā)現(xiàn)報錯：

原來是在此之前還需要進行云API的初始化。
那么現(xiàn)在問題來了，我們后續(xù)會遇到大量的調(diào)用云API，那么都需要一開始初始化，并且這個初始化只需要一次，這個時候初始化我們應該在哪里進行調(diào)用呢？
當一個函數(shù)應用一開始就需要調(diào)用的時候并且只需要調(diào)用一次，我們可以在app.js的 onLaunch 生命周期中調(diào)用。
app.js 的 onLaunch 函數(shù)代碼片段

接下來在看調(diào)用看看，在這里告訴大家一個調(diào)試技巧，使用調(diào)試器中的Network面板，然后選中Cloud標簽進行過濾，在這里我們就可以剛才調(diào)用API請求。

先看看請求狀態(tài)，從狀態(tài)來看是成功的請求。

然后我們再來看看返回的數(shù)據(jù)：

明明有一條數(shù)據(jù)，為什么獲取不到呢？
因為云開發(fā)數(shù)據(jù)庫集合讀取權(quán)限問題。默認我們新建的集合讀取權(quán)限是僅創(chuàng)建則可以讀寫，第一條測試數(shù)據(jù)是我們手動錄入的，所以沒有創(chuàng)建者，默認權(quán)限于是就讀取不到。
我們可以來到云開發(fā)控制面板，然后找到 數(shù)據(jù)庫=> 數(shù)據(jù)權(quán)限。

我們把權(quán)限從「僅創(chuàng)建者可讀寫」修改為「所有用戶可讀，僅創(chuàng)建者可讀寫」試試看。修改完成之后再次調(diào)用獲取方法，看到返回結(jié)果中出現(xiàn)了這條測試數(shù)據(jù)。

雖然數(shù)據(jù)出來了，但是我們會發(fā)現(xiàn)還有一個錯誤日志。

具體代碼塊：

原因：在沒有使用云API之前我們使用的緩存操作API是同步操作返回了具體數(shù)據(jù)，而修改后的獲取數(shù)據(jù)方法是異步函數(shù)，沒有給到數(shù)據(jù)到列表頁面進行使用。最終導致list數(shù)據(jù)對象為空，list的length自然就出現(xiàn)了undefined的錯誤提示。

從數(shù)據(jù)庫獲取數(shù)據(jù)除了可以用以上的實現(xiàn) success 方法，同樣還支持可以用 Promise 風格調(diào)用：
可以簡單理解成將包裹的回調(diào)函數(shù)調(diào)用方式改成了鏈式調(diào)用的回調(diào)函數(shù)

基于 Promise 風格調(diào)用，我們可以將函數(shù)拆解成兩部分。接下來再改造一下，傳遞數(shù)據(jù)的部分代碼：

1.將查詢代碼在 getMemoList 完成

2.將查詢結(jié)果在列表頁面進行列表渲染

這樣我們就成功的將數(shù)據(jù)庫的數(shù)據(jù)顯示出來了

接下來，我們就來把所有方法進行云API的實現(xiàn)。

查看數(shù)據(jù)詳情

在這里我們就不能用index下標來，通常與后端交互我們都會采用ID來進行查詢，每條數(shù)據(jù)都會生成一個ID字段，字段名稱為_id。

獲取id進行頁面?zhèn)鬟f

查詢方法改造，由于通過id查詢是非常常用的方法，所以云API直接有個doc方法傳入id即可查詢：
memo.js 中 getMemoInfo 函數(shù)代碼

查詢方法調(diào)用：
edit.js 中 onLoad 函數(shù)代碼

新增備忘錄數(shù)據(jù)

新增方法改造：
memo.js 中 addMemoInfo 函數(shù)

調(diào)用方法：
edit.js 中 save 函數(shù)新增邏輯代碼片段

新增成功后會返回新增數(shù)據(jù)的id信息。

然后在數(shù)據(jù)庫當中就可以看到新增的數(shù)據(jù)了。

然后在看下列表返回的數(shù)據(jù)，只有自己新增的那條數(shù)據(jù)了。

修改備忘錄數(shù)據(jù)

修改方法改造：
memo.js 中 updateMemoInfo 函數(shù)。

之前修改的邏輯是采用的刪除之后再新增做的“假”修改，這次我們直接采用修改方法。
edit.js 中 save 函數(shù)修改邏輯代碼片段

返回結(jié)果中的 updated 是代表修改成功數(shù)據(jù)的數(shù)量

刪除備忘錄數(shù)據(jù)

刪除方法改造：
memo.js 中 deleteMemoInfo 函數(shù)

調(diào)用方法：
list.js 中 del 函數(shù)

在這里要注意的是刪除之后還需要調(diào)用查詢所有數(shù)據(jù)方法對列表更新。

返回值 removed 為刪除數(shù)量。

總結(jié)

在本小節(jié)我們使用云API在小程序端操作了云數(shù)據(jù)庫，學習了以下函數(shù)：

• 使用 get() 進行了數(shù)據(jù)庫的查詢
• 使用 add() 進行了數(shù)據(jù)添加
• 使用 update() 進行了數(shù)據(jù)修改
• 使用 remove() 進行了數(shù)據(jù)刪除

在這里我們就已經(jīng)完成了使用云數(shù)據(jù)庫來存儲備忘錄數(shù)據(jù)。