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

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

官方文档解读:

<!-- 更新记录 -->
  <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)
      }
    })
  },
})
相关文章
|
2月前
|
小程序 前端开发 数据可视化
微信小程序云开发入门教程-全局文件介绍
微信小程序云开发入门教程-全局文件介绍
|
2月前
|
小程序 开发工具 开发者
解决微信开发者工具不能使用云开发的资源
解决微信开发者工具不能使用云开发的资源
|
2月前
|
小程序 JavaScript 前端开发
微信小程序云开发入门实践
微信小程序云开发入门实践
|
1月前
|
小程序 数据库
【微信小程序7】云开发中实时聊天系统的实现方法
【微信小程序7】云开发中实时聊天系统的实现方法
24 0
|
2月前
|
小程序 Java 关系型数据库
基于springboot的场地预约小程序的设计与实现(程序+数据库+文档)
基于springboot的场地预约小程序的设计与实现(程序+数据库+文档)
|
2月前
|
小程序 前端开发 Java
基于微信小程序的电影院订票选座系统的设计与实现(程序+数据库+)
基于微信小程序的电影院订票选座系统的设计与实现(程序+数据库+)
|
2月前
|
存储 小程序 数据库
微信小程序云开发入门教程-服务开通
微信小程序云开发入门教程-服务开通
|
4月前
|
小程序
微信小程序云开发|基于微信小程序实现房产中介平台系统(二)
微信小程序云开发|基于微信小程序实现房产中介平台系统
|
4月前
|
小程序 前端开发 开发工具
微信小程序云开发|基于微信小程序实现房产中介平台系统(一)
微信小程序云开发|基于微信小程序实现房产中介平台系统
|
4月前
|
小程序 关系型数据库 MySQL
基于Python和mysql开发的看图猜成语微信小程序(源码+数据库+程序配置说明书+程序使用说明书)
基于Python和mysql开发的看图猜成语微信小程序(源码+数据库+程序配置说明书+程序使用说明书)

热门文章

最新文章