【微信小程序雲開發】從陌生到熟悉

前言

微信小程序在9月10號正式上線了雲開發的功能，弱化后端和運維概念，以前開發一個小程序需要申請一個小程序，准備一個https的域名，開發需要一個前端一個服務端，有了雲開發只有申請一個小程序，一個前端就能搞定，真的是零成本。

雲開發三大基礎能力

• 雲函數：運行在微信服務器上的函數，處理微信相關操作有天然優勢，如獲得用戶信息異常方便（以前服務端解析很麻煩）
• 數據庫：一個小程序可以直接操作的JSON數據庫，可以直接操作數據庫，不在需要服務端了。
• 存儲：用來存儲文件和圖片

閱讀本文之前最好對微信小程序有基本的了解，這個能夠更加方便理解，如果能有一點點數據庫知識那就更好了，如果沒有數據庫知識也不用擔心，因為真的很簡單

相關的代碼地址 https://github.com/AmosXu/library-mini-program

第一個雲開發小程序

新建小程序，勾選雲開發快速啟動模板，注意無游客模式，也不能用測試號

創建成功后，我們看到的目錄如下圖，project.config.json 中增加了字段 cloudfunctionRoot 用於指定存放雲函數的目錄，如圖中的cloudfunctions

右鍵點擊“創建並部署”，跟着提示一步步操作，把函數部署到微信的服務器上去，這時候快速啟動項目就可以啟動運行了，跟着項目一步一步可以體驗一下小程序雲開發的功能，這里就不詳細介紹了。

 

正式學習操作數據庫 

1.初始化

在小程序端開始使用雲能力前，需先調用 wx.cloud.init 方法完成雲能力初始化，如果要使用雲能力，通常我們在小程序初始化時即調用這個方法。

//app.js
App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
    } else {
      wx.cloud.init({
        traceUser: true,
      })
    }
  }
})

wx.cloud.init詳情文檔請點擊

2.在數據庫中新建book表

打開“雲開發控制台” -> “數據庫” -> “添加集合”， 輸入表名“book”就行

3.增加書籍

增加一本名為“JavaScript高級程序設計（第3版）”書 

const db = wx.cloud.database()
db.collection('book').add({
  data: { 
    author: "[美] Nicholas C. Zakas",
    pubdate: "2012-3-29",
    image: "https://img3.doubanio.com/view/subject/m/public/s8958650.jpg",
    publisher: "人民郵電出版社",
    title: "JavaScript高級程序設計（第3版）",
    summary: "本書是JavaScript 超級暢銷書的最新版。ECMAScript 5 和HTML5 在標准之爭中雙雙勝出，使大量專有實現和客戶端擴展正式進入規范，同時也為JavaScript..."
    price: "99.00元"  
  }
}).then(() => {
  wx.showToast({
    title: "添加成功"
  })
})

直接調用add方法，在add方法中的data參數中填寫我們的參數即可，在數據中新增一條數據，其中_id為數據自動分配的id，_openid為操作者的openId

4.查詢數據

 獲得_id為“W6G5GDPMTZMHGaOG”的書籍詳情

const db = wx.cloud.database()
db.collection('book').doc('W6G5GDPMTZMHGaOG').get().then(res => {
  console.log(res.data)
})

當已知_Id的情況下，直接用doc() + get()就能獲得到書籍詳情

獲得書名為“JavaScript高級程序設計（第3版）”的書籍詳情

const db = wx.cloud.database()
db.collection('book').where({
  "title": "JavaScript高級程序設計（第3版）"
}).get().then(res => {
  console.log(res.data)
})

_id以為的查詢都用where() + get()進行查詢，和其他的數據庫非常像，返回的是一個數組

分頁獲得書籍列表，這應該是前端比較常見的一個需求

db.collection('book')
  .skip(10) // 跳過結果集中的前 10 條，從第 11 條開始返回
  .limit(10) // 限制返回數量為 10 條
  .get()
  .then(res => {
    console.log(res.data)
  })

skip()指定序列后的結果開始返回，limit()指定查詢結果集數量上限，如果沒有指定 skip，則默認從第 0 條記錄開始取，如果沒有指定 limit，則默認最多取 20 條記錄

5.更新數據

將_id為“W6G5GDPMTZMHGaOG”的書價格改為“88.00元”

db.collection('book').doc('W6G5GDPMTZMHGaOG').update({
  // data 傳入需要局部更新的數據
  data: {
    // 表示將價格 字段置為 88
    price: "88.00元"
  }
}).then(res => {
  console.log(res)
})

doc()傳入_id update()更新單條數據，也可以用where() + update()更新多條數據

接下來介紹set()方法，指定_id，當存在時就更新數據，不存在就增加數據

const db = wx.cloud.database()
db.collection('book').doc('W6G5GDPMTZMHGaOG').set({
  data: {
    author: "[美] Nicholas C. Zakas",
    pubdate: "2012-3-29",
    image: "https://img3.doubanio.com/view/subject/m/public/s8958650.jpg",
    publisher: "人民郵電出版社",
    title: "JavaScript高級程序設計（第3版）",
    summary: "本書是JavaScript 超級暢銷書的最新版。ECMAScript 5 和HTML5 在標准之爭中雙雙勝出，使大量專有實現和客戶端擴展正式進入規范，同時也為JavaScript...",
    price: "99.00元"
  }
}).then(res => {
  console.log(res)
})

6.刪除數據

刪除_id為“W6G5GDPMTZMHGaOG”的書

 

db.collection('book').doc('W6G5GDPMTZMHGaOG').remove().then(console.log)

 

在小程序暫時只支持一次刪除一條數據，所以用doc + remove來刪除，如果需要一次刪除多條數據，請在雲函數端操作即可

總結

暫時只介紹了在小程序端的操作，都是簡單易懂的，其實在雲函數端和小程序端非常相似，只是在雲函數端能夠很方便的獲得到用戶的信息，有些操作只支持雲函數，比如批量刪除，但是雲函數調試麻煩，操作麻煩，且雲函數有調用的限制，所以我建議能在小程序完成的盡量在小程序端完成。下次我可以介紹下雲函數。在我 GitHub的代碼中 也有相關在雲函數中操作的功能，有興趣的可以看看。