开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 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>
效果如下
打开云开发控制台,点击数据库模块,可以看到刚刚添加的记录
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) } }) }, })
效果如下:
官方文档解读:
<!-- 删除记录 --> <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: '无记录可删,请见创建一个记录', }) } }, })
因为数据库里面没有信息,所以执行 wx.showToast({ title: '无记录可删,请见创建一个记录', })
当数据库里面有记录的时候
界面里点击添加之后,打开云开发控制台,查看数据库栏目,会发现多出来一条记录,执行删除语句之后,再次打开云开发控制台,那条语句会被删除。
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 删除。
我来说两句