微信小程序开发之云数据库操作_微信开发者工具的云数据库怎么实现的

环境

• 微信开发者工具 Stable 1.06.2303220
• 云开发控制台 v1.5.47

准备

首先在微信云开发控制台，创建集合 table0508 。

注：创建一个空集合就行。若不创建集合，接下来在插入或者删除记录时，会报错说集合不存在（查询不报错）。

注：最好把集合的“数据权限”设置为“所有用户可读，仅创建者可读写”，否则一个用户看不到其它用户的数据。

在微信开发者工具中，创建一个新项目 miniprogram-8 ，输入AppID，并选择“微信云开发”。

查询记录

打开“miniprogram -> pages -> index -> index.wxml”，把内容全部清空，并添加如下内容：

<button type="primary" bindtap="getData">查询</button>

<text user-select="true" wx:for="{{dataObj}}">{{item.name}}, {{item.sex}}, {{item.age}}, {{item.kongfu}}, {{item._id}} </text>
1
2
3

打开“miniprogram -> pages -> index -> index.js”，把内容全部清空，并添加如下内容：

const db = wx.cloud.database()

Page({

  data: {   
    dataObj: "" 
  },

  getData() {
    db.collection("table0508").get({
      success: res => {
        this.setData({
          dataObj: res.data
        })
        
        wx.showToast({
          title: '获取数据成功！',
        })
      }
    })
  }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

界面如下：

点击“查询”按钮测试查询功能，不过目前还没有数据：

添加记录

方法1

修改 index.wxml ，添加如下代码：

<text >\n\n----添加记录----\n\n</text>

<form bindsubmit="btnSubmit">
  姓名：<input name="name" placeholder="请输入姓名"/>
  性别：<input name="sex" placeholder="请输入性别"/>
  年龄：<input name="age" placeholder="请输入年龄"/>
  功夫：<input name="kongfu" placeholder="请输入功夫"/>
  <button type="primary" form-type="submit">添加</button>
  <button type="primary" form-type="reset">重置</button>
</form>
1
2
3
4
5
6
7
8
9
10

修改 index.js ，添加如下代码：

  btnSubmit(res) {
    var name = res.detail.value.name
    var sex = res.detail.value.sex
    var age = res.detail.value.age
    var kongfu = res.detail.value.kongfu
  
    db.collection("table0508").add({
      data: {
        name: name,
        sex: sex,
        age: Number(age),
        kongfu: kongfu
      }
    })
    .then(res => {
      wx.showToast({
        title: '添加成功！',
      })
    })
  } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意：age是数值，所以用 Number() 函数转换了一下，否则会被当做字符串处理。

另外要注意，前面的 getData() 函数，最后面要加一个逗号分隔一下。

界面如下：

界面比较丑……功能OK就行。

输入姓名、年龄等信息，点击“添加”按钮，添加记录：

点击“查询”按钮，查看记录：

注：系统自动生成了 _id 和 _openid ：

• _id ：可以当作是主键
• _openid ：可以当作是创建者ID，如果多次点击“添加”按钮， _id 不同，但 _openid 是相同的

可以在云开发控制台查看记录的详细情况。

方法2

btnSubmit() 函数中的四个变量定义，可以合成一行：

    var {name, sex, age, kongfu} = res.detail.value
1

方法3

也可以只定义一个变量：

  btnSubmit(res) {
    var val = res.detail.value

    db.collection("table0508").add({
      data: {
        name: val.name,
        sex: val.sex,
        age: Number(val.age),
        kongfu: val.kongfu
      }
    })
    .then(res => {
      wx.showToast({
        title: '添加成功！',
      })
    })
  }  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

使用方法2和方法3，再添加几条记录。

删除记录

由于界面比较简陋，没有使用表格控件，我们直接让用户输入ID来删除记录。

修改 index.wxml ，添加如下代码：

<text >\n\n----删除记录----\n\n</text>

<form bindsubmit="btnDelete">
ID：<input name="id" placeholder="请输入要删除的ID"/>
  <button type="primary" form-type="submit">删除</button>
  <button type="primary" form-type="reset">重置</button>
</form>
1
2
3
4
5
6
7

修改 index.js ，添加如下代码：

  btnDelete(res) {
    var id = res.detail.value.id

    db.collection("table0508").doc(id).remove()
    .then(res => {
      console.log(res)
      wx.showToast({
        title: '删除成功！',
      })
    })
  }
1
2
3
4
5
6
7
8
9
10
11

注意：前面的 btnSubmit() 函数，最后面要加一个逗号分隔一下。

界面如下：

首先查询一下记录：

然后长按选中，并复制一个ID（比如 709fba97645911d8001bd1b24e9f8d83 ），粘贴到文本框，并点击“删除”按钮：

注：默认长按无法选中文本，需要设置 user-select="true" 才行。另外，在模拟器上，选中文本后，没有菜单，可用“Ctrl+C”和“Ctrl+V”来复制粘贴。

再次查询，确认删除成功：

修改记录

由于界面比较简陋，没有使用表格控件，我们直接让用户输入ID来修改记录。

修改 index.wxml ，添加如下代码：

<text >\n\n----修改记录----\n\n</text>

<form bindsubmit="btnUpdate">
  ID：<input name="id" placeholder="请输入要修改的ID"/>
  姓名：<input name="name" placeholder="请输入姓名"/>
  性别：<input name="sex" placeholder="请输入性别"/>
  年龄：<input name="age" placeholder="请输入年龄"/>
  功夫：<input name="kongfu" placeholder="请输入功夫"/>
  <button type="primary" form-type="submit">修改</button>
  <button type="primary" form-type="reset">重置</button>
</form>
1
2
3
4
5
6
7
8
9
10
11

修改 index.js ，添加如下代码：

  btnUpdate(res) {
    var {name, sex, age, kongfu, id} = res.detail.value

    db.collection("table0508").doc(id).update({
      data: {
        name: name,
        sex: sex,
        age: Number(age),
        kongfu: kongfu
      }
    })
    .then(res => {
      wx.showToast({
        title: '修改成功！',
      })
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意：前面的 btnDelete() 函数，最后面要加一个逗号分隔一下。

界面如下：

首先查询一下记录，然后长按选中，并复制一个ID（比如 4429a59c64590fd4001e61046143358f ），粘贴到文本框，然后填入修改后的姓名、年龄等信息，最后点击“修改”按钮（本例中修改了年龄和功夫）：

再次查询，确认修改成功：

此外，有一个 set() 方法，类似于Db2的 MERGE 操作，即“记录若不存在则插入，记录若已存在则更新”。但是 set() 方法只会保留新设置的字段，原先的字段都没了。

其它

文本只是一些最简单的示例，很多地方没有考虑，比如没有校检输入数据的合法性，也没有对操作失败做处理，仅供参考。

参考

• https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/Cloud.database.html