雲開發經驗總結

時間 2019-11-06

原文原文鏈接

開發工具

mpvue官方文檔javascript

雲開發初始化

wx.cloud.init({
  env: 'wedding-10c111'
})複製代碼

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

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

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

查（獲取數據）

// 獲取輪播圖列表
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)
  })
}複製代碼

對應實例以下：bash

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

<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.查詢所有的留言async

增（添加數據）

// 前面講解過的註釋以後的代碼將不重複說明
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()
          }
        })
      }
    }
  })
}複製代碼

對應實例以下：