微信小程序云开发


微信小程序云开发

云开发主要负责小程序的后端部分,一部分可以直接参照官方文档,这里只是做一个简单的整理,内容不多。

使用云数据库

为方便观察数据变化,将控制台中云数据库的数据权限更改为 “所有用户可读,仅创建者可读写”。并且,注意将 app.js 中的 env 改为当前云环境的环境 ID。

查询

getData() {
  // 获取数据库引用
  const db = wx.cloud.database()

  // 获取数据库集合
  const list = db.collection('demo-list')
  // 获取数据
  list.get({
    success: (res) => {
      console.log(res)
    }
  })
}

查询一个记录的数据

getData() {
  // 获取数据库引用
  const db = wx.cloud.database()

  // 获取数据库集合
  const list = db.collection('demo-list')
  // 获取单条数据(根据id查询)
  list.doc('fd474e57668404ff002244180de27d0b').get({
    success: (res) => {
      console.log(res.data)
    }
  })
}

查询指定数据

使用 where 函数在调用 get 之前可以指定条件进行查询:

getData() {
  // 获取数据库引用
  const db = wx.cloud.database()

  // 获取数据库集合
  const list = db.collection('demo-list')
  // 条件查询
  list.where({
    title: '新闻标题1',
    author: 'huihui'
  }).get().then(res => {
    this.setData({
      // 返回的是一个数组
      query: res.data[0]
    })
  })
}

插入

addData() {
  // 展示加载框
  wx.showLoading({
    title: '数据添加...',
    mask: true  // 防止短时间内多次点击
  })
  const db = wx.cloud.database()

  db.collection('demo-list').add({
    data: {
      author: 'hnuxcc21',
      content: '新闻文本3',
      tabs: ['标签1', '标签2', '标签3'],
      title: '新闻标题3'
    }
  }).then(res => {
    wx.hideLoading()
  })
}

提交表单的插入

表单的 wxml:

<form bindsubmit="addFormData">
  <input name='title' placeholder="请输入标题"></input>
  <input name='author' placeholder="请输入作者"></input>
  <textarea name='content' placeholder="请输入内容"></textarea>
  <button type="primary" form-type="submit">提交</button>
  <button type="primary" form-type="reset">重置</button>
</form>
addFormData(res) {	// res表示添加的数据
  // console.log(res.detail.value)

  wx.showLoading({
    title: '提交...',
    mask:true
  })
  const db = wx.cloud.database()

  db.collection('demo-list').add({
    data: res.detail.value
  }).then(res => {
    wx.hideLoading()
  })
}

更新

updateData() {
  wx.showLoading({
    title: '更新中...',
    mask: true
  })
  const db = wx.cloud.database()

  // 更新特定值
  db.collection('demo-list').doc('fd474e57668544f0003629e74e2bc9ab').update({
    data: {
      author: 'xcchnu21'
    }
  }).then(res => {
    wx.hideLoading()
  })
}

更新特定值的另一种写法:

// 更新特定值
db.collection('demo-list').where({	// 使用where子句进行筛选
  title: '新闻标题4'
}).update({
  data: {
    author: 'xcc'
  }
}).then(res => {
  wx.hideLoading()
})

还可以使用 set 方法更新新的对象:

// 更新特定值
db.collection('demo-list').doc('fd474e57668544f0003629e74e2bc9ab').set({
  data: {
    username: 'zhangsan',
    password: '123'
  }
}).then(res => {
  wx.hideLoading()
})

删除

deleteData() {
  wx.showLoading({
    title: '删除中...',
    mask:true
  })

  const db = wx.cloud.database()

  db.collection('demo-list').doc('fd474e57668544f0003629e74e2bc9ab').remove().then(res => {
    wx.hideLoading()
  })
}

count 个数与 watch 数据监听

countData() {
  const db = wx.cloud.database()

  // 打印个数
  db.collection('demo-list').count().then(res => {
    console.log(res.total)
  })
}

onLoad(options) {
  const db = wx.cloud.database()
  
  // 可以依赖watch及时更新数据
  db.collection('demo-list').watch({
    onChange: function(res) {
      console.log('res: ' + res)
    },
    onError: function(err) {
      console.log('err: ' + err)
    }
  })
}

构建查询条件

getData() {
  const db = wx.cloud.database()

  // 使用limit限制返回条数
  db.collection('demo-list')
  .limit(1)
  .get()
  .then(res => {
    console.log(res.data)
  })

  // 使用orderBy对结果集进行排序
  db.collection('demo-list')
  .orderBy('time', 'desc')
  .get()
  .then(res => {
    console.log(res.data)
  })

  // 使用skip跳过指定数量的结果
  db.collection('demo-list')
  .skip(1)
  // 可以配合limit进行分页  .limit(2)
  .get()
  .then(res => {
    console.log(res.data)
  })

  // 使用field筛选要展示的字段
  db.collection('demo-list')
  .field({
    title: true
  })
  .get()
  .then(res => {
    console.log(res.data)
  })
}

Command

Command 是数据库操作符,是云数据库更高级的查询操作。

比较操作符:

操作符 描述
eq 查询筛选条件,表示字段等于某个值。eq 指令接受一个字面量,可以是 number, boolean, string, object, array, Date
neq 查询筛选条件,表示字段不等于某个值。eq 指令接受一个字面量,可以是 number, boolean, string, object, array, Date
lt 查询筛选操作符,表示需小于指定值。可以传入 Date 对象用于进行日期比较。
lte 查询筛选操作符,表示需小于或等于指定值。可以传入 Date 对象用于进行日期比较。
gt 查询筛选操作符,表示需大于指定值。可以传入 Date 对象用于进行日期比较。
gte 查询筛选操作符,表示需大于或等于指定值。可以传入 Date 对象用于进行日期比较。
in 查询筛选操作符,表示要求值在给定的数组内
nin 查询筛选操作符,表示要求值不在给定的数组内

用法如下:

getData() {
  wx.showLoading({
    title: '获取中...',
    mask: true
  })
  // 获取数据库对象
  const db = wx.cloud.database()
  // 获取数据库操作符
  const _ = db.command
  db.collection('demo-list')
  .where({
    title: _.eq('新闻标题1')	// 利用操作符进行条件筛选
  })
  .get()
  .then(res => {
    // console.log(res)
    wx.hideLoading()
  })
}

逻辑操作符:

操作符 描述
and 查询操作符,用于表示逻辑 “与” 的关系,表示需同时满足多个查询筛选条件。
or 查询操作符,用于表示逻辑 “或” 的关系,表示需同时满足多个查询筛选条件。或指令有两种用法,一是可以进行字段值的 “或” 操作,二是也可以进行跨字段的 “或” 操作。
not 查询操作符,用于表示逻辑 “非” 的关系,表示需不满足指定的条件。
nor 查询操作符,用于表示逻辑 “都不” 的关系,表示需不满足指定的所有条件。如果记录中没有对应的字段,则默认满足条件。

更多操作符请参照官方文档

使用云函数

云函数是一段运行在云端的代码,其用途也是用来操作数据库的。

云函数模板如下:

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

云函数的传入参数有两个,一个是 event 对象,一个是 context 对象。event 指的是触发云函数的事件,当小程序端调用云函数时,event 就是小程序端调用云函数时传入的参数,外加后端自动注入的小程序用户的 openid 和小程序的 appid。context 对象包含了此处调用的调用信息和运行状态,可以用它来了解服务运行的情况。

使用云函数获取数据库资源:

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境

// 获取数据库对象,因为是云函数,所以直接用cloud调用,无需使用wx
const db = cloud.database()

// 使用await等待返回结果
exports.main = async (event, context) => {
  return await db.collection('demo-list').get()
}

页面 .js 文件调用云函数:

// 使用callFunction调用云函数
wx.cloud.callFunction({
  // 调用的云函数名称
  name: 'getData',
  // 传入云函数的参数
  data: {}
})
.then(res => {
  console.log(res)
})

注意:在调用前需要把云函数先上传到云端才可以成功调用。

使用云存储

使用云存储上传图片:

upload() {
  // 先从手机中获取图片
  wx.chooseMedia({
    count: 9,
    mediaType: ['image'],
    sourceType: ['album', 'camera'],
    maxDuration: 30,
    camera: 'back'
  }).then(res => {
    // console.log(res.tempFiles[0].tempFilePath)   // 临时路径
    // console.log(res.tempFiles[0].size)           // 文件大小
    // 上传多张图片
    for(var i = 0; i < res.tempFiles.length; ++i) {
      this.uploadCloudFile(res.tempFiles[i].tempFilePath)
    }
    wx.showToast({
      title: '上传成功',
      icon: 'success'
    })
  })
},

uploadCloudFile(path) {
  wx.cloud.uploadFile({
    cloudPath: Date.now() + '.jpg',  // 云存储路径,利用时间戳保证路径的唯一性
    filePath: path    // 本地文件路径
  })
},

文章作者: 热心市民灰灰
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 热心市民灰灰 !
  目录