雲開發經驗總結（展示兩種增刪改查的寫法）

開發工具

mpvue官方文檔

雲開發初始化

wx.cloud.init({
  env: 'wedding-10c111'
})

上面這段代碼配置在src目錄下的main.js文件中

數據庫API（不使用雲函數進行增刪改查）

以下說明均寫在對應代碼註釋裏，不清楚的請查看相關注釋

查（獲取數據）

// 獲取輪播圖列表
getBannerList () {
  // 獲取數據庫引用
  const db = wx.cloud.database()
  // 獲取名爲“banner”的集合引用
  const banner = db.collection('banner')
  // 獲取集合（Promise 風格）
  banner.get().then(res => {
    this.list = res.data[0].bannerList
  })
}

對應實例如下： 

注意：之所以數據庫只有一條數據，而把banner列表當成這條數據的一個字段存儲，其目的是爲了自己後續換圖操作的方便

增（添加數據）

// 添加用戶
addUser () {
  // 獲取數據庫引用
  const db = wx.cloud.database()
  // 獲取名爲“user”的集合引用
  const user = db.collection('user')
  // 向“user”集合中添加一條數據（Promise 風格）
  user.add({
    data: {
      user: that.userInfo,
      // 構造一個服務端時間的引用，我的項目中都是取自己轉化後的時間，
      // 取這個時間更加合理，可用於查詢條件、更新字段值或新增記錄時的字段值
      time: db.serverDate()
    }
  }).then(res => {
    // 添加成功後重新查詢列表
    that.getUserList()
  })
}

對應實例如下： 

注意： 可以看出_id和_openid是添加完自動生成的屬性

 改（修改數據）

// 改變某條留言的顯示隱藏
switchMessage (e) {
  // 獲取數據庫的引用
  const db = wx.cloud.database()
  // 獲取名爲“message”的集合的引用
  const message = db.collection('message')
  // 這裏的id是拿到當前操作項對應的id，
  // 這裏的show對應change事件傳遞過來的值
  message.doc(e.mp.target.dataset.id).update({
    data: {
      show: e.mp.detail.value
    }
  }).then(res => {
    console.log(res)
  })
}

對應實例如下：

 

注意：這個界面在你們使用的小程序中是看不到的，只有本人才有權限查看 

<switch class="switch" :data-id="item._id" :checked="item.show" @change="switchMessage"></switch>

 注意：上面我們之所以能得到e.mp.target.dataset.id是因爲在<switch>標籤上加了`:data-id="item._id"`，不然取不到對應id

刪（刪除數據）

正好對應的上圖有刪除操作

deleteItem (id) {
  // 記錄this指向
  const that = this
  // 這裏之所以使用wx.showModal是防止誤操作
  wx.showModal({
    title: '提示',
    content: '你確定要刪除這條留言？',
    success (res) {
      if (res.confirm) {
        // 獲取數據庫的引用
        const db = wx.cloud.database()
        // 獲取名爲“message”集合的引用
        const message = db.collection('message')
        // 刪除操作（Promise 風格）
        message.doc(id).remove().then(res => {
          // 刪除成功後再次請求列表，達到刷新數據的目的
          if (res.errMsg === 'document.remove:ok') {
            that.getList()
          }
        })
      }
    }
  })
}

使用雲函數進行增刪改查

查（獲取數據）

// 雲函數初始化
const cloud = require('wx-server-sdk')
// 由於文章開始已經講過初始化步驟，這裏init(options)的options可以省略
// options參數定義了雲開發的默認配置，該配置會作爲之後調用其他所有云 API 的默認配置
cloud.init()
// 獲取數據庫的引用
const db = cloud.database()
exports.main = async (event, context) => {
  // 將集合名定義成一個變量，方便後續調用
  const dbName = 'message'
  // filter爲指定的篩選條件，配合where()使用
  const filter = event.filter ? event.filter : null
  // pageNum如果小程序端未傳入則默認爲1
  const pageNum = event.pageNum ? event.pageNum : 1
  // pageSize如果小程序端未傳入則默認是10
  const pageSize = event.pageSize ? event.pageSize : 10
  // 數據庫滿足filter條件的數據總條數
  const countResult = await db.collection(dbName).where(filter).count()
  const total = countResult.total
  // 共多少頁
  const totalPage = Math.ceil(total / pageSize)
  // 是否有下一頁
  let hasMore
  if (pageNum >= totalPage) {
    hasMore = false
  } else {
    hasMore = true
  }
  // 等待所有，orderBy()通過創建時間排序，查詢單頁數據
  return db.collection(dbName).orderBy('time', 'desc').where(filter).skip((pageNum - 1) * pageSize).limit(pageSize).get().then(res => {
    // 返回結果中順帶注入hasMore和total方便小程序端判斷
    res.hasMore = hasMore
    res.total = total
    return res
  })
}

getList () {
  // 記錄this指向
  const that = this
  // 每次調用getList時重新從第一頁開始
  that.pageNum = 1
  // 每次調用getList時，先將authorityList置空
  that.authorityList = []
  wx.cloud.callFunction({
    // 雲函數名
    name: 'authorityList',
    // 傳入雲函數的參數
    data: {
      // 查詢的默認篩選條件，這裏可以參考下面留言審覈對應的兩張圖來看，左上角有個switch開關
      // 當開關開啓時，filter:{show:false}生效
      filter: that.checkFlag ? {
        show: false
      } : null,
      // 查詢頁數
      pageNum: that.pageNum,
      // 每頁條數
      pageSize: that.pageSize
    }
  }).then(res => {
    // 配合下拉刷新使用，作用是停止刷新事件
    wx.stopPullDownRefresh()
    // 以下動作爲賦值操作
    const temp = res.result
    that.total = temp.total
    that.hasMore = temp.hasMore
    that.authorityList = temp.data
  })
}

 上面代碼對應實例如下：1.查詢未通過審覈的留言；2.查詢全部的留言

增（添加數據）

// 前面講解過的註釋之後的代碼將不重複說明
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
  const dbName = 'message'
  // 添加數據
  return db.collection(dbName).doc(event.id).add({
    data: {
      desc: event.desc,
      type: event.type,
      show: event.show,
      time: event.time,
      url: event.url,
      name: event.name
    }
  })
}

sendMessage () {
  const that = this
  if (that.desc) {
    wx.cloud.callFunction({
      // 雲函數名
      name: 'addMessage',
      data: {
        desc: that.desc,
        type: 'message',
        show: false,
        time: utils.getNowFormatDate(),
        url: that.userInfo.avatarUrl,
        name: that.userInfo.nickName
      }
    }).then(res => {
      // 關閉所有頁面，打開到應用內的某個頁面，跳轉到留言列表頁
      wx.reLaunch({
        url: '/pages/message/main'
      })
    })
  } else {
    tools.showToast('說點什麼吧~')
  }
}

 對應實例如下：

改（修改數據）

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
  const dbName = 'message'
  return db.collection(dbName).doc(event.id).update({
    data: {
      show: event.show
    }
  })
}

switchMessage (e) {
  const that = this
  wx.cloud.callFunction({
    name: 'switchMessage',
    data: {
      id: e.mp.target.dataset.id,
      show: e.mp.detail.value
    }
  }).then(res => {
    if (res.result.errMsg === 'document.update:ok') {
      that.getList()
    }
  })
}

 對應實例如下：（前面沒使用雲函數也實現了相同的功能，感興趣的可以對比查閱）

刪（刪除數據）

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
  const dbName = 'message'
  return db.collection(dbName).doc(event.id).remove()
}

  調用雲函數：

deleteItem (id) {
  // 記錄this指向
  const that = this
  // 這裏之所以使用wx.showModal是防止誤操作
  wx.showModal({
    title: '提示',
    content: '你確定要刪除這條留言？',
    success (res) {
      if (res.confirm) {
        wx.cloud.callFunction({
          name: 'deleteMessage',
          data: {
            id
          }
        }).then(res => {
          if (res.result.errMsg === 'document.remove:ok') {
            that.getList()
          }
        })
      }
    }
  })
}

對應實例如下：

總結

掌握上面兩種對應的增刪改查後，相信大家對雲開發會有一個更清晰的認識，也希望大家多多使用雲開發做出更多好玩的小程序作品

對應小程序 

歡迎大家體驗：

 小程序訂製

想要訂製小程序的可以加我微信：huangbin910419

可按給定設計圖訂製，100%還原設計圖