云开发经验总结

开发工具

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()
          }
        })
      }
    }
  })
}

对应实例如下：

总结

掌握上面两种对应的增删改查后，相信大家对云开发会有一个更清晰的认识，也希望大家多多使用云开发做出更多好玩的小程序作品

对应小程序 

欢迎大家体验：