专栏首页编程微刊微信小程序云开发数据库操作更新记录

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

官方文档解读:

<!-- 更新记录 -->
  <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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    数据库操作参考API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-cl...

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

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

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

    开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供...

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

    数据库操作参考API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-cl...

    王小婷
  • 第1期 | MultiButton,一个小巧简单易用的事件驱动型按键驱动模块

    本专栏由Mculover666创建,主要内容为寻找嵌入式领域内的优质开源项目,一是帮助开发者使用开源项目实现更多的功能,二是通过这些开源项目,学习大佬的代码及背...

    Mculover666
  • Flask第五篇——设置debug模式

    用户2149234
  • 基于windows fiber的协程(coroutine)实现

    一个非常简单,但是实用的协程实现,使用Windows的*Fiber函数族(linux可以稍微改一下用*context函数族)。

    racaljk
  • bootstrap 字体颜色

    <div class="container"> <em>em</em> <b>b</b> <strong>strong</strong> <p clas...

    用户5760343
  • salesforce 零基础开发入门学习(三)sObject简单介绍以及简单DML操作(SOQL)

    salesforce中对于数据库操作和JAVA等语言对于数据库操作是有一定区别的。salesforce中的数据库使用的是Force.com 平台的数据库,数据表...

    用户1169343
  • ASP.NET Core Blazor 初探之 Blazor WebAssembly

    最近Blazor热度很高,传说马上就要发布正式版了,做为微软脑残粉,赶紧也来凑个热闹,学习一下。

    kklldog

扫码关注云+社区

领取腾讯云代金券