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

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

官方文档解读:

<!-- 更新记录 -->
  <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中有写到对数据库的一些简单的...

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

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

    王小婷
  • 微信小程序云开发连接mysql数据库,小程序云函数操作mysql数据库

    首先要明确一点,就是小程序云开发的云函数是基于node.js的,所以我们使用node.js的mysql2模块可以直接来链接并操作mysql数据库,所以我们现在要...

    编程小石头
  • 微信小程序 云开发之数据库

    对后来在仔细的阅读,发现,在我的json中key:value中的value有单引号,本身json格式就不对,后来改了之后还是不行,原因就是需要按照文档中的格式来...

    天天_哥
  • 微信小程序-云开发 数据库http接口封装

    最近学习一下微信小程序的云开发,作为serverless架构,着实省去很多麻烦,省的搞https证书了,也不用写api,但是总是要建后台系统的,云开发的数据库是...

    纷扰D梦
  • 小程序云开发--云函数操作数据表函数整合

    Kindear
  • 微信小程序云开发数据导入(json格式)

    上篇写道:小程序云开发的开通流程及添加集合数据:https://www.jianshu.com/p/17097e5c9ae4

    王小婷
  • 校园超市,百货超市小程序,手把手带你开发一款微信商城小程序,云开发+cms+数据库+js+css+微信小程序

    这些操作都和商品列表是联动的,也就是商品列表和购物车里增删个数,都是可以同步的。我会在项目预览章节的视频里做具体演示。

    编程小石头
  • 使用云开发数据库构建更生动的小程序

    长连接服务被广泛应用在消息提醒、即时通讯、推送、直播弹幕、游戏等场景。本篇文章将介绍云开发数据库的长连接服务——实时数据推送,使用它来构建更生动的小程序。

    腾讯云开发TCB
  • 第三方服务器php获取微信小程序云开发access_token和云数据库

    微信小程序云开发开放了http api,可以从第三方访问云服务了。方便很多。云服务的后台,可以用PC端写了。 流程大概就是通过appid,appkey获得ac...

    xiny120
  • 从小程序到小程序云开发

    集成于小程序控制台的原生serverless云服务 核心功能包括: 云存储,云数据库,云函数

    达达前端
  • 微信小程序云开发 初学者入门准备

    随着小程序云开发的逐渐流行,一个工程师全栈小程序的能力也逐步变得越来越强大,作为一个前端工程师,现在也可以逐步脱离后台的帮助了,自己可以按照自己的想法来开发一款...

    王小婷
  • 微信小程序云开发页面的创建、读取数据

    前面说到:微信小程序云开发 初学者入门教程一(云开发环境搭建)https://www.jianshu.com/p/5df4d51125e3,开通环境,部署环境之...

    王小婷
  • 微信小程序云开发 初学者入门教程二

    如何操作数据库,作为一名前端,如果对数据的知识不够熟悉也没关系,从现在开始好好学习就行,数据库的操作内容差不多涉及增删改查四大模块,花一些业余的时间在上面,也必...

    王小婷
  • 微信小程序分页加载数据~上拉加载更多~小程序云数据库的分页加载

    我们在开发小程序时,一个列表里难免会有很多条数据,比如我们一个列表有1000条数据,我们一下加载出来,而不做分页,将会严重影响性能。所以这一节,我们来讲讲小程序...

    编程小石头
  • 实战丨用云开发快速构建信息申报小程序

    今年迫于疫情,众多学校、公司和机构都需要统计班上同学或公司员工的健康状况、收集活动地点、健康码等信息。

    腾讯云开发TCB
  • 快速上手小程序云开发

    小程序云开发为微信小程序开发者提供云到端的一站式解决方案,帮助开发者统一构建和管理资源,能有效降低技术门槛、减少研发成本、提升开发效率,协助开发者快速搭建稳定高...

    可可爱爱没有脑袋

扫码关注云+社区

领取腾讯云代金券