微信小程序开发之云数据库操作

蓝黑2020

已于 2023-05-10 09:54:57 修改

阅读量2.9k

点赞数 5

分类专栏：微信小程序文章标签：微信小程序数据库

于 2023-05-09 08:38:33 首次发布

本文链接：https://blog.csdn.net/duke_ding2/article/details/130566627

版权

微信小程序专栏收录该内容

10 篇文章 3 订阅

订阅专栏

环境

微信开发者工具 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>

打开“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

修改 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>

修改 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: '添加成功！',
      })
    })
  }

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

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

界面如下：

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

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

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

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

方法2

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

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

方法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: '添加成功！',
      })
    })
  }

使用方法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>

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

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

    db.collection("table0508").doc(id).remove()
    .then(res => {
      console.log(res)
      wx.showToast({
        title: '删除成功！',
      })
    })
  }

注意：前面的 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>

修改 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: '修改成功！',
      })
    })
  }