從 0 到 1 使用云開發(fā)開發(fā)一個(gè)小程序

先上我們最終使用云開發(fā)開發(fā)的小程序，小程序碼如下：

小程序名字為家物館，主要用來管理家中物品。涉及到用戶賬號(hào)系統(tǒng)，物品管理，分類及搜索等功能，使用了云開發(fā)的云函數(shù)，數(shù)據(jù)庫，存儲(chǔ)，CMS 內(nèi)容管理等能力。

一、快速開始

如果對(duì)云開發(fā)不熟悉的話，可以先按照官方文檔，快速新建一個(gè)云開發(fā)的小程序用于參考。文檔暫時(shí)不用看太多，小程序跑起來了就可以（說實(shí)話云開發(fā)的文檔太多了，如果剛?cè)腴T就想先把文檔讀一遍那絕對(duì)得懵圈，我們下面會(huì)對(duì)所涉及的內(nèi)容給出具體的文檔鏈接）。

由于我們要開發(fā)的小程序涉及到數(shù)據(jù)庫、云函數(shù)及云存儲(chǔ)，接下來將按照這幾個(gè)部分進(jìn)行介紹。

二、數(shù)據(jù)庫

2.1 內(nèi)容管理系統(tǒng)

手寫表結(jié)構(gòu)實(shí)在是有點(diǎn)慢，而且一不小心還有可能犯錯(cuò)，于是借助了內(nèi)容管理系統(tǒng)，這可以大大提高工作效率。不過這里有個(gè)巨坑：那就是小程序文檔里面的內(nèi)容管理部分的文檔根本不夠詳細(xì)，真正詳細(xì)的文檔請(qǐng)移步CloudBase CMS（小程序的文檔有些時(shí)候真想讓人摔電腦）。

使用上面的內(nèi)容管理系統(tǒng)，我們既可以方便管理內(nèi)容模型（注意內(nèi)容模型的名字不要隨便改，不然內(nèi)容那塊會(huì)出問題，所以起名字要慎重），還可以創(chuàng)建內(nèi)容，甚至使用 RESTful API 來獲取數(shù)據(jù)，初步一看簡(jiǎn)直是愛得不要不要的。

不過實(shí)際在小程序里面使用 RESTful API ，還有點(diǎn)坑，（相信在以后的版本中這些問題都不是問題）：

• RESTful API 中更新數(shù)據(jù) method 使用的 PATCH，小程序的 wx.request 里面不支持
• RESTful API 中 command 在小程序中會(huì)被自動(dòng)轉(zhuǎn)譯，如$eq命令：

所以最后我們放棄了 RESTful API 來獲取數(shù)據(jù)，還是老老實(shí)實(shí)寫云函數(shù)得了。

2.2 云開發(fā)面板之?dāng)?shù)據(jù)庫

除了上面的內(nèi)容管理系統(tǒng)，我們同樣還可以在云開發(fā)面板的數(shù)據(jù)庫中進(jìn)行管理。如下圖：

除此之外，高級(jí)操作還提供了一些數(shù)據(jù)庫操作實(shí)例，如下圖：

2.3 數(shù)據(jù)庫增刪改查

這里先記住操作數(shù)據(jù)庫三步走（具體的實(shí)例操作我們?cè)谠坪瘮?shù)中繼續(xù)）：

1、選擇哪個(gè)環(huán)境的數(shù)據(jù)庫

const DB = wx.cloud.database({
  env: 'test' // 哪個(gè)環(huán)境
});

2、選擇哪個(gè)集合

const users = DB.collection('users');

3、對(duì)集合進(jìn)行增刪改查操作

const user = users.doc('_id');

更詳情的文檔參考：數(shù)據(jù)庫增刪改查SDK

2.4 文檔 ID

在內(nèi)容管理系統(tǒng)中，文檔 ID 屬于系統(tǒng)字段，目前只能自動(dòng)生成不可自定義。但是有些情況下，我們還是想可以自定義文檔 ID 的，如統(tǒng)一分類的數(shù)據(jù)。

所幸還有一條路，云開發(fā)面板的數(shù)據(jù)庫中是支持自定義的，所以如果真需要自定義的文檔 ID，可以直接在云開發(fā)面板的數(shù)據(jù)庫中定義。不過云開發(fā)面板的數(shù)據(jù)庫自定義 ID 的那個(gè)字段輸入框，是有長(zhǎng)度限制的（不過自動(dòng)生成的文檔 ID 都超了，這就有點(diǎn)不明白了）。

文檔 ID 在查詢單個(gè)數(shù)據(jù)記錄時(shí)非常有用，如獲取某個(gè)用戶信息：

// 以openid 為自定義的文檔 ID
// 如果找到則返回該用戶信息
// 如果沒有找到該用戶信息，則表示該用戶沒有注冊(cè)。
users.doc('openid').get().then((res) => { console.log(res.data) }).catch((e) => { console.log('未注冊(cè)')}); 

三、云函數(shù)

3.1 實(shí)現(xiàn)第一個(gè)云函數(shù)

首先我們對(duì)著我的第一個(gè)云函數(shù)文檔，實(shí)現(xiàn)我們的第一個(gè)云函數(shù)。

這里面主要有一個(gè)庫和兩個(gè) API 需要注意：

• 一個(gè)庫文檔：wx-server-sdk 

• 兩個(gè) API 文檔：getWXContext （一定要注意不同的調(diào)用方式可能會(huì)返回不同的數(shù)據(jù)）、callFunction

接下來，我們可以按照云函數(shù)的文檔，一直看到本地調(diào)試。

看完這些之后，我們就可以正式開始云函數(shù)開發(fā)了。下面以獲取用戶云函數(shù)為例。

3.2 云函數(shù)實(shí)戰(zhàn)

1、我們首先新建一個(gè) user 云函數(shù)（在云函數(shù)根目錄上右鍵，在右鍵菜單中，選擇創(chuàng)建一個(gè)新的 Node.js 云函數(shù)，命名為 user）。

2、安裝依賴文件

右鍵 user 文件夾右鍵，選擇在內(nèi)建終端中打開，輸入 npm i 命令，安裝依賴文件。

3、開啟云函數(shù)本地調(diào)試

依賴文件安裝完成后，同樣右鍵 user 文件夾，選擇開啟云函數(shù)本地調(diào)試。

打開的云函數(shù)本地調(diào)試面板如下，注意右邊的那個(gè)勾選。

4、編寫云函數(shù)

整體代碼大概如下（可根據(jù) type 類型判斷要請(qǐng)求的數(shù)據(jù)）：

5、小程序端調(diào)用

先在 app.js 中完成云能力初始化，代碼如下：（文檔可參考：小程序端云能力初始化文檔）。

App({
  onLaunch() {
    if (!wx.cloud) {
      console.error('請(qǐng)使用 2.2.3 或以上的基礎(chǔ)庫以使用云能力');
    } else {
      wx.cloud.init({
        env: 'cloud1-xxx',
        traceUser: true,
      });
    }
  },
});

在需要的地方調(diào)用云函數(shù) user，代碼如下：

wx.cloud.callFunction({
  // 云函數(shù)名稱
  name: 'user',
  // 傳給云函數(shù)的參數(shù)
  data: {
    type: 'get'
  },
})
.then(res => {
  console.log(res.result)
})
.catch(console.error)

6、上傳并部署

調(diào)試開發(fā)完畢，就可以上傳部署了，如下圖：

3.3 云函數(shù)管理

我們所有的云函數(shù)都可以通過云開發(fā)面板中進(jìn)行管理，如下圖：

四、云存儲(chǔ)

其實(shí)在快速開始里面，默認(rèn)創(chuàng)建的小程序里面就有上傳圖片的一個(gè)云開發(fā)實(shí)例，對(duì)著里面的實(shí)例抄一遍，把一些信息打印出來看看就會(huì)用了。

具體文檔參考： 文件存儲(chǔ) 。

當(dāng)然對(duì)于用戶上傳的圖片來說，最好還得有個(gè)裁剪的功能，小程序裁剪圖片的組件網(wǎng)上也有很多，找個(gè)合適自己即可。

對(duì)于存儲(chǔ)的內(nèi)容，我們同樣可以通過云開發(fā)面板查看，如下圖：

五、開放數(shù)據(jù)

云開發(fā)還提供了一種新的方法去調(diào)用開放數(shù)據(jù)：開放數(shù)據(jù)校驗(yàn)與解密 。

下面我們以獲取電話號(hào)碼為例，具體實(shí)戰(zhàn)下：

1、使用 button 組件，open-type 為 getPhoneNumber

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

2、在 getPhoneNumber 中拿到 cloudID

3、編寫云函數(shù) user，調(diào)用 getOpenData API，主要代碼為：

const { type, cloudID } = event;
// 電話號(hào)碼授權(quán)
if (type === 'getPhone') {
  const res = await cloud.getOpenData({
    list: [cloudID],
  });

  const resPhone = res.list[0].data.phoneNumber;
  return resPhone;
}

3、小程序端調(diào)用云函數(shù)，這樣就拿到了電話號(hào)碼。

wx.cloud.callFunction({
  // 云函數(shù)名稱
  name: 'user',
  // 傳給云函數(shù)的參數(shù)
  data: {
    type: 'getPhone',
    cloudID, // 這個(gè)是上面獲取到的 cloudID
  },
})
.then(res => {
  console.log(res.result)
})
.catch(console.error)

六、總結(jié)

總體來說，小程序云開發(fā)圓了我們?nèi)珬５膲?mèng)，一個(gè)人一把梭是快樂的，但是摸索的過程其實(shí)也是痛苦的。盤子太大，又不斷的發(fā)展優(yōu)化，總有坑等著我們?nèi)ヌ?/span>