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

前言

微信小程序在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的代碼中 也有相關在雲函數中操做的功能，有興趣的能夠看看。