专栏首页编程微刊微信小程序云开发数据库操作
原创

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

开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

对于微信小程序云开发数据库操作,也要了解其中的操作规则,才能更好的使用,这里有几个例子,规范的操作了一下云开发数据库的相关的增删改查操作规范。

微信小程序云开发数据库操作添加记录

微信小程序云开发 初学者入门教程二-前端操作数据库模块:https://www.jianshu.com/p/fb5be2e7f507中有写到对数据库的一些简单的操作处理,这篇主要是添加记录的一个小demo:

数据库操作API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/database/index.html

官方文档解读:

<!-- 新增记录 -->
  <view class="guide" wx:if="{{step === 3}}">
    <text class="headline">新增记录</text>
    <text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件,定位到 onAdd 方法</text>
    <text class="p">2. 把注释掉的代码解除注释</text>
    <image class="code-image" src="../../images/code-db-onAdd.png" mode="aspectFit"></image>
    <text class="p">3. onAdd 方法会往 counters 集合新增一个记录,新增如下格式的一个 JSON 记录</text>
    <text class="code">
    {
      "_id": "数据库自动生成记录 ID 字段",
      "_openid": "数据库自动插入记录创建者的 openid",
      "count": 1
    }
    </text>
    <text class="p">4. 点击按钮</text>
    <button size="mini" type="default" bindtap="onAdd">新增记录</button>
    <text class="p" wx:if="{{counterId}}">新增的记录 _id 为:{{counterId}}</text>
    <text class="p">5. 在云开发 -> 数据库 -> counters 集合中可以看到新增的记录</text>

    <div class="nav">
      <button class="prev" size="mini" type="default" bindtap="prevStep">上一步</button>
      <button class="next" size="mini" type="default" bindtap="nextStep" wx:if="{{counterId}}">下一步</button>
    </div>
  </view>

1:小demo

效果如下

打开云开发控制台,点击数据库模块,可以看到刚刚添加的记录

wxml代码:

<button size="mini" type="default" bindtap="onAdd">新增记录</button>
<text class="p" wx:if="{{counterId}}">新增的记录 _id 为:{{counterId}}</text>

js代码:

// pages/databaseGuide/databaseGuide.js

const app = getApp()

Page({

  data: {
    step: 1,
    counterId: '',
    openid: '',
    count: null,
    queryResult: '',
  },

  onLoad: function (options) {
    if (app.globalData.openid) {
      this.setData({
        openid: app.globalData.openid
      })
    }
  },

  onAdd: function () {
    const db = wx.cloud.database()
    db.collection('counters').add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回结果中会包含新创建的记录的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增记录成功',
        })
        console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
        console.error('[数据库] [新增记录] 失败:', err)
      }
    })
  },
})

微信小程序云开发数据库操作更新记录

官方文档解读:

<!-- 更新记录 -->
  <view class="guide" wx:if="{{step === 5}}">
    <text class="headline">更新记录</text>
    <text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件,定位到 onCounterInc 和 onCounterDec 方法</text>
    <text class="p">2. 把注释掉的代码解除注释</text>
    <image class="code-image" src="../../images/code-db-inc-dec.png" mode="aspectFit"></image>
    <text class="p">3. 点击下方按钮更新计数器</text>
    <div class="counter">
      <button class="minus" size="mini" type="default" bindtap="onCounterDec">-</button>
      <text class="p">{{count}}</text>
      <button class="plus" size="mini" type="default" bindtap="onCounterInc">+</button>
    </div>

    <div class="nav">
      <button class="prev" size="mini" type="default" bindtap="prevStep">上一步</button>
      <button class="next" size="mini" type="default" bindtap="nextStep">下一步</button>
    </div>
  </view>

wxml:

<div class="counter">
      <button class="minus" size="mini" type="default" bindtap="onCounterDec">-</button>
      <text class="p">{{count}}</text>
      <button class="plus" size="mini" type="default" bindtap="onCounterInc">+</button>
</div>

js:

// pages/databaseGuide/databaseGuide.js
const app = getApp()
Page({

  data: {
    step: 1,
    counterId: '',
    openid: '',
    count: null,
    queryResult: '',
  },

  onLoad: function (options) {
    if (app.globalData.openid) {
      this.setData({
        openid: app.globalData.openid
      })
    }
  },

  onCounterInc: function() {
    const db = wx.cloud.database()
    const newCount = this.data.count + 1
    db.collection('counters').doc(this.data.counterId).update({
      data: {
        count: newCount
      },
      success: res => {
        this.setData({
          count: newCount
        })
      },
      fail: err => {
        icon: 'none',
        console.error('[数据库] [更新记录] 失败:', err)
      }
    })
  },

  onCounterDec: function() {
    const db = wx.cloud.database()
    const newCount = this.data.count - 1
    db.collection('counters').doc(this.data.counterId).update({
      data: {
        count: newCount
      },
      success: res => {
        this.setData({
          count: newCount
        })
      },
      fail: err => {
        icon: 'none',
        console.error('[数据库] [更新记录] 失败:', err)
      }
    })
  },
})

效果如下:

http://recordit.co/NUyzs7XneE

微信小程序云开发数据库操作删除记录

官方文档解读:

  <!-- 删除记录 -->
  <view class="guide" wx:if="{{step === 6}}">
    <text class="headline">删除记录</text>
    <text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件,定位到 onRemove 方法</text>
    <text class="p">2. 把注释掉的代码解除注释</text>
    <image class="code-image" src="../../images/code-db-onRemove.png" mode="aspectFit"></image>
    <text class="p">3. 点击下方按钮删除计数器</text>
    <button size="mini" type="default" bindtap="onRemove">删除记录</button>

    <div class="nav">
      <button class="prev" size="mini" type="default" bindtap="prevStep" wx:if="{{counterId}}">上一步</button>
      <button class="next" size="mini" type="default" bindtap="nextStep">下一步</button>
    </div>
  </view>

wxml:

<button size="mini" type="default" bindtap="onRemove">删除记录</button>

js:

// pages/databaseGuide/databaseGuide.js

const app = getApp()

Page({

  data: {
    step: 1,
    counterId: '',
    openid: '',
    count: null,
    queryResult: '',
  },

  onLoad: function (options) {
    if (app.globalData.openid) {
      this.setData({
        openid: app.globalData.openid
      })
    }
  },

  onRemove: function() {
    if (this.data.counterId) {
      const db = wx.cloud.database()
      db.collection('counters').doc(this.data.counterId).remove({
        success: res => {
          wx.showToast({
            title: '删除成功',
          })
          this.setData({
            counterId: '',
            count: null,
          })
        },
        fail: err => {
          wx.showToast({
            icon: 'none',
            title: '删除失败',
          })
          console.error('[数据库] [删除记录] 失败:', err)
        }
      })
    } else {
      wx.showToast({
        title: '无记录可删,请见创建一个记录',
      })
    }
  },

})

http://recordit.co/vIBopA6jjo

因为数据库里面没有信息,所以执行 wx.showToast({
        title: '无记录可删,请见创建一个记录',
      })

当数据库里面有记录的时候

先添加再删除的情况

界面里点击添加之后,打开云开发控制台,查看数据库栏目,会发现多出来一条记录,执行删除语句之后,再次打开云开发控制台,那条语句会被删除。

http://recordit.co/B9t7yTqaCW

B9t7yTqaCW.gif

wxml:

<!-- 添加记录 -->
<button size="mini" type="default" bindtap="onAdd">新增记录</button>
<text class="p" wx:if="{{counterId}}">新增的记录 _id 为:{{counterId}}</text>
<!-- 删除记录 -->
<button size="mini" type="default" bindtap="onRemove">删除记录</button>

js:

// pages/databaseGuide/databaseGuide.js

const app = getApp()
Page({
  data: {
    step: 1,
    counterId: '',
    openid: '',
    count: null,
    queryResult: '',
  },

  onLoad: function (options) {
    if (app.globalData.openid) {
      this.setData({
        openid: app.globalData.openid
      })
    }
  },

  onAdd: function () {
    const db = wx.cloud.database()
    db.collection('counters').add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回结果中会包含新创建的记录的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增记录成功',
        })
        console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
        console.error('[数据库] [新增记录] 失败:', err)
      }
    })
  },

  onRemove: function() {
    if (this.data.counterId) {
      const db = wx.cloud.database()
      db.collection('counters').doc(this.data.counterId).remove({
        success: res => {
          wx.showToast({
            title: '删除成功',
          })
          this.setData({
            counterId: '',
            count: null,
          })
        },
        fail: err => {
          wx.showToast({
            icon: 'none',
            title: '删除失败',
          })
          console.error('[数据库] [删除记录] 失败:', err)
        }
      })
    } else {
      wx.showToast({
        title: '无记录可删,请见创建一个记录',
      })
    }
  },
})

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序云开发数据库操作删除记录

    界面里点击添加之后,打开云开发控制台,查看数据库栏目,会发现多出来一条记录,执行删除语句之后,再次打开云开发控制台,那条语句会被删除。

    王小婷
  • 微信小程序云开发数据库操作更新记录

    王小婷
  • 微信小程序云开发数据库操作一添加记录

    微信小程序云开发 初学者入门教程二-前端操作数据库模块:https://www.jianshu.com/p/fb5be2e7f507中有写到对数据库的一些简单的...

    王小婷
  • 爬虫课程(十三)|ajax分析法(雪球),通过获取api并破解api的反爬策略爬取数据

    黄小怪
  • Kali Linux Web渗透测试手册(第二版) - 7.5 - Windows提权

    根据我以往的渗透测试经验来看,有60%以上的服务器都是搭建在windows服务器之上的,并且使用SQL Server作为数据库,所以,作为渗透测试者的我们,更应...

    7089bAt@PowerLi
  • Python之密码加密与解密

    最近在搞一个web应用的密码管理模块,里面用到了python对密码的加密解密模块,在网上搜了一下,发现这方面的加密解密例子还比较多,整理了一下思路,初步将密码管...

    AsiaYe
  • 13行代码实现:Python实时视频采集(附源码)

    本文是《人脸识别完整项目实战》系列博文第3部分:程序设计篇(Python版),第1节《Python实时视频采集程序设计》,本章内容系统介绍:基于Python+o...

    数据饕餮
  • 滴滴2亿美元投资人人车,二手车电商将迎来大洗牌?

    今天,二手车交易平台人人车宣布已完成新一轮融资,融资金额为2亿美元,滴滴是唯一投资方。2017年上半年,二手车市场升温,融资进程明显变得密集起来,上半年,优信、...

    罗超频道
  • Rust库 simple-redis使用

    这个库正向它的名字一样,简单易用,是基于redis-rs库封装的,不过目前使用下来仅支持单个的redis连接,稍微有点遗憾,不过这个库本身还是较好用的。

    江湖安得便相忘
  • UWP开发01之Windows UI2.x

    官方地址:https://docs.microsoft.com/zh-cn/windows/apps/winui/winui2/

    剑行者

扫码关注云+社区

领取腾讯云代金券