微信小程序> 微信小程序云开发教程二-微信小程序云开发实例-腾讯云微信小程序

微信小程序云开发教程二-微信小程序云开发实例-腾讯云微信小程序

浏览量:3840 时间: 来源:王很皮
微信小程序云开发初学者入门教程二-前端操作数据库模块

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

2.数据库操作大多数需要用户openid,需要先配置好吧login云函数,如果已经配置好了,获取用户的openid之后,开始步骤:

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

4.步骤

5.1:打开云开发控制台,进入到数据库管理模块

6.图片.png

7.2:选择添加集合,集合名称为counters,添加完成之后的界面

8.图片.png

9.3:可以看到counters集合出现在左侧集合列表中

10.注:集合必须在云开发控制台中创建

11.4:新增一条记录试一试

12.a.打开pages/databaseGuide/databaseGuide.js文件,定位到onAdd方法

13.图片.png

14.b:选中所有注释过的代码,ctrl+/快捷键,解除注释

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

15.c.onAdd方法会往counters集合新增一个记录,新增如下格式的一个JSON记录

{"_id":"数据库自动生成记录ID字段","_openid":"数据库自动插入记录创建者的openid","count":1}

16.在桌面新建一个json文件,将这段代码复制黏贴进去,备用

17.图片.png

18.导入之后显示的界面

19.图片.png

20.d:点击按钮:新增记录

21.图片.png

22.e:在云开发-数据库-counters集合中可以看到新增的记录

23.图片.png

24.微信小程序云开发数据库操作一添加记录实例演示

25.官方文档解读:

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

26.做一个小demo

27.效果如下:点击新增记录的按钮的时候,会出现提示,新增的记录为多少,并且有弹框提示,新增记录成功。

28.U6QBH3PeXy.gif

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

30.图片.png

31.wxml代码:

buttonsize="mini"type="default"bindtap="onAdd"新增记录/buttontextclass="p"wx:if="{{counterId}}"新增的记录_id为:{{counterId}}/text

32.js代码:

//pages/databaseGuide/databaseGuide.jsconstapp=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(){constdb=wx.cloud.database()db.collection('counters').add({data:{count:1},success:res={//在返回结果中会包含新创建的记录的_idthis.setData({counterId:res._id,count:1})wx.showToast({title:'新增记录成功',})console.log('[数据库][新增记录]成功,记录_id:',res._id)},fail:err={wx.showToast({icon:'none',title:'新增记录失败'})console.error('[数据库][新增记录]失败:',err)}})},})

33.对于数据库的增删改查后续会有更加细致的文章:1:微信小程序云开发数据库操作一添加记录2:微信小程序云开发数据库操作二查询记录3:微信小程序云开发数据库操作三删除记录4:微信小程序云开发数据库操作四更新记录

34.下班之后带着电脑回家,在地铁上拥挤非常,感觉电脑都要被挤坏了,这几天反思了一下从前,每天上班下班,完成老板给的任务就可以潇洒走人了,总觉得自己不够努力,又或者每天重复着老旧的技术,周而复始,早已落后于前端发展的潮流,不觉开始惶恐。每天晚上开始学习,戒掉游戏和手机,让自己尽快达到一个沉迷于代码不可自拔的境界。

35.原文作者:祈澈姑娘欢迎关注【编程微刊】,回复“领取资源”,500G编程学习资源干货免费送。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎