云开发经验总结

时间 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()
          }
        })
      }
    }
  })
}复制代码

对应实例以下：

总结

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

对应小程序

欢迎你们体验：