- 云开发经验总结(展示两种增删改查的方法)
开发工具mpvue官方文档 云开发初始化[代码] [代码] [代码] wx.cloud.init({[代码] [代码] [代码][代码]env: [代码][代码]'wedding-10c111'[代码][代码] })[代码] [代码] [代码] 上面这段代码配置在src目录下的main.js文件中 数据库API(不使用云函数进行增删改查)以下说明均写在对应代码注释里,不清楚的请查看相关注释 查(获取数据)[代码] [代码] [代码] // 获取轮播图列表[代码] [代码] getBannerList () {[代码][代码] [代码][代码]// 获取数据库引用[代码][代码] [代码][代码]const db = wx.cloud.database()[代码][代码] [代码][代码]// 获取名为“banner”的集合引用[代码][代码] [代码][代码]const banner = db.collection([代码][代码]'banner'[代码][代码])[代码][代码] [代码][代码]// 获取集合(Promise 风格)[代码][代码] [代码][代码]banner.get().then(res => {[代码][代码] [代码][代码]this[代码][代码].list = res.data[0].bannerList[代码][代码] [代码][代码]})[代码][代码] }[代码] [代码] [代码] 对应实例如下: [图片] 注意:之所以数据库只有一条数据,而把banner列表当成这条数据的一个字段存储,其目的是为了自己后续换图操作的方便 增(添加数据)[代码][代码][代码] [代码] [代码] // 添加用户[代码] [代码] addUser () {[代码][代码] [代码][代码]// 获取数据库引用[代码][代码] [代码][代码]const db = wx.cloud.database()[代码][代码] [代码][代码]// 获取名为“user”的集合引用[代码][代码] [代码][代码]const user = db.collection([代码][代码]'user'[代码][代码])[代码][代码] [代码][代码]// 向“user”集合中添加一条数据(Promise 风格)[代码][代码] [代码][代码]user.add({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]user: that.userInfo,[代码][代码] [代码][代码]// 构造一个服务端时间的引用,我的项目中都是取自己转化后的时间,[代码][代码] [代码][代码]// 取这个时间更加合理,可用于查询条件、更新字段值或新增记录时的字段值[代码][代码] [代码][代码]time: db.serverDate()[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}).then(res => {[代码][代码] [代码][代码]// 添加成功后重新查询列表[代码][代码] [代码][代码]that.getUserList()[代码][代码] [代码][代码]})[代码][代码] }[代码] [代码] [代码] 对应实例如下: [图片] 注意: 可以看出_id和_openid是添加完自动生成的属性 改(修改数据)[代码] [代码] [代码] // 改变某条留言的显示隐藏[代码] [代码] switchMessage (e) {[代码][代码] [代码][代码]// 获取数据库的引用[代码][代码] [代码][代码]const db = wx.cloud.database()[代码][代码] [代码][代码]// 获取名为“message”的集合的引用[代码][代码] [代码][代码]const message = db.collection([代码][代码]'message'[代码][代码])[代码][代码] [代码][代码]// 这里的id是拿到当前操作项对应的id,[代码][代码] [代码][代码]// 这里的show对应change事件传递过来的值[代码][代码] [代码][代码]message.doc(e.mp.target.dataset.id).update({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]show: e.mp.detail.value[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}).then(res => {[代码][代码] [代码][代码]console.log(res)[代码][代码] [代码][代码]})[代码][代码] }[代码] [代码] [代码] 对应实例如下: [图片] 注意:这个界面在你们使用的小程序中是看不到的,只有本人才有权限查看 [图片] [代码] [代码] [代码] <[代码][代码]switch[代码] [代码]class[代码][代码]=[代码][代码]"switch"[代码] [代码]:data-id[代码][代码]=[代码][代码]"item._id"[代码] [代码]:checked[代码][代码]=[代码][代码]"item.show"[代码] [代码]@[代码][代码]change[代码][代码]=[代码][代码]"switchMessage"[代码][代码]></[代码][代码]switch[代码][代码]>[代码] [代码] [代码] 注意:上面我们之所以能得到e.mp.target.dataset.id是因为在<switch>标签上加了`:data-id="item._id"`,不然取不到对应id 删(删除数据)正好对应的上图有删除操作 [代码] [代码] [代码] deleteItem (id) {[代码] [代码] [代码][代码]// 记录this指向[代码][代码] [代码][代码]const that = [代码][代码]this[代码][代码] [代码][代码]// 这里之所以使用wx.showModal是防止误操作[代码][代码] [代码][代码]wx.showModal({[代码][代码] [代码][代码]title: [代码][代码]'提示'[代码][代码],[代码][代码] [代码][代码]content: [代码][代码]'你确定要删除这条留言?'[代码][代码],[代码][代码] [代码][代码]success (res) {[代码][代码] [代码][代码]if[代码] [代码](res.confirm) {[代码][代码] [代码][代码]// 获取数据库的引用[代码][代码] [代码][代码]const db = wx.cloud.database()[代码][代码] [代码][代码]// 获取名为“message”集合的引用[代码][代码] [代码][代码]const message = db.collection([代码][代码]'message'[代码][代码])[代码][代码] [代码][代码]// 删除操作(Promise 风格)[代码][代码] [代码][代码]message.doc(id).remove().then(res => {[代码][代码] [代码][代码]// 删除成功后再次请求列表,达到刷新数据的目的[代码][代码] [代码][代码]if[代码] [代码](res.errMsg === [代码][代码]'document.remove:ok'[代码][代码]) {[代码][代码] [代码][代码]that.getList()[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] }[代码] [代码] [代码] 使用云函数进行增删改查 查(获取数据)[代码] [代码] [代码] // 云函数初始化[代码] [代码] const cloud = require([代码][代码]'wx-server-sdk'[代码][代码])[代码][代码] // 由于文章开始已经讲过初始化步骤,这里init(options)的options可以省略[代码][代码] // options参数定义了云开发的默认配置,该配置会作为之后调用其他所有云 API 的默认配置[代码][代码] cloud.init()[代码][代码] // 获取数据库的引用[代码][代码] const db = cloud.database()[代码][代码] exports.main = async (event, context) => {[代码][代码] [代码][代码]// 将集合名定义成一个变量,方便后续调用[代码][代码] [代码][代码]const dbName = [代码][代码]'message'[代码][代码] [代码][代码]// filter为指定的筛选条件,配合where()使用[代码][代码] [代码][代码]const filter = event.filter ? event.filter : [代码][代码]null[代码][代码] [代码][代码]// pageNum如果小程序端未传入则默认为1[代码][代码] [代码][代码]const pageNum = event.pageNum ? event.pageNum : 1[代码][代码] [代码][代码]// pageSize如果小程序端未传入则默认是10[代码][代码] [代码][代码]const pageSize = event.pageSize ? event.pageSize : 10[代码][代码] [代码][代码]// 数据库满足filter条件的数据总条数[代码][代码] [代码][代码]const countResult = await db.collection(dbName).where(filter).count()[代码][代码] [代码][代码]const total = countResult.total[代码][代码] [代码][代码]// 共多少页[代码][代码] [代码][代码]const totalPage = Math.ceil(total / pageSize)[代码][代码] [代码][代码]// 是否有下一页[代码][代码] [代码][代码]let hasMore[代码][代码] [代码][代码]if[代码] [代码](pageNum >= totalPage) {[代码][代码] [代码][代码]hasMore = [代码][代码]false[代码][代码] [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码] [代码][代码]hasMore = [代码][代码]true[代码][代码] [代码][代码]}[代码][代码] [代码][代码]// 等待所有,orderBy()通过创建时间排序,查询单页数据[代码][代码] [代码][代码]return[代码] [代码]db.collection(dbName).orderBy([代码][代码]'time'[代码][代码], [代码][代码]'desc'[代码][代码]).where(filter).skip((pageNum - 1) * pageSize).limit(pageSize).get().then(res => {[代码][代码] [代码][代码]// 返回结果中顺带注入hasMore和total方便小程序端判断[代码][代码] [代码][代码]res.hasMore = hasMore[代码][代码] [代码][代码]res.total = total[代码][代码] [代码][代码]return[代码] [代码]res[代码][代码] [代码][代码]})[代码][代码] }[代码] [代码] [代码] [代码] [代码] [代码] getList () {[代码] [代码] [代码][代码]// 记录this指向[代码][代码] [代码][代码]const that = [代码][代码]this[代码][代码] [代码][代码]// 每次调用getList时重新从第一页开始[代码][代码] [代码][代码]that.pageNum = 1[代码][代码] [代码][代码]// 每次调用getList时,先将authorityList置空[代码][代码] [代码][代码]that.authorityList = [][代码][代码] [代码][代码]wx.cloud.callFunction({[代码][代码] [代码][代码]// 云函数名[代码][代码] [代码][代码]name: [代码][代码]'authorityList'[代码][代码],[代码][代码] [代码][代码]// 传入云函数的参数[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]// 查询的默认筛选条件,这里可以参考下面留言审核对应的两张图来看,左上角有个switch开关[代码][代码] [代码][代码]// 当开关开启时,filter:{show:false}生效[代码][代码] [代码][代码]filter: that.checkFlag ? {[代码][代码] [代码][代码]show: [代码][代码]false[代码][代码] [代码][代码]} : [代码][代码]null[代码][代码],[代码][代码] [代码][代码]// 查询页数[代码][代码] [代码][代码]pageNum: that.pageNum,[代码][代码] [代码][代码]// 每页条数[代码][代码] [代码][代码]pageSize: that.pageSize[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}).then(res => {[代码][代码] [代码][代码]// 配合下拉刷新使用,作用是停止刷新事件[代码][代码] [代码][代码]wx.stopPullDownRefresh()[代码][代码] [代码][代码]// 以下动作为赋值操作[代码][代码] [代码][代码]const temp = res.result[代码][代码] [代码][代码]that.total = temp.total[代码][代码] [代码][代码]that.hasMore = temp.hasMore[代码][代码] [代码][代码]that.authorityList = temp.data[代码][代码] [代码][代码]})[代码][代码] }[代码] [代码] [代码] 上面代码对应实例如下:1.查询未通过审核的留言;2.查询全部的留言 [图片][图片] 增(添加数据)[代码] [代码] [代码] // 前面讲解过的注释之后的代码将不重复说明[代码] [代码] const cloud = require([代码][代码]'wx-server-sdk'[代码][代码])[代码][代码] cloud.init()[代码][代码] const db = cloud.database()[代码][代码] exports.main = async (event, context) => {[代码][代码] [代码][代码]const dbName = [代码][代码]'message'[代码][代码] [代码][代码]// 添加数据[代码][代码] [代码][代码]return[代码] [代码]db.collection(dbName).doc(event.id).add({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]desc: event.desc,[代码][代码] [代码][代码]type: event.type,[代码][代码] [代码][代码]show: event.show,[代码][代码] [代码][代码]time: event.time,[代码][代码] [代码][代码]url: event.url,[代码][代码] [代码][代码]name: event.name[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] }[代码] [代码] [代码] [代码][代码][代码] [代码] [代码] sendMessage () {[代码] [代码] [代码][代码]const that = [代码][代码]this[代码][代码] [代码][代码]if[代码] [代码](that.desc) {[代码][代码] [代码][代码]wx.cloud.callFunction({[代码][代码] [代码][代码]// 云函数名[代码][代码] [代码][代码]name: [代码][代码]'addMessage'[代码][代码],[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]desc: that.desc,[代码][代码] [代码][代码]type: [代码][代码]'message'[代码][代码],[代码][代码] [代码][代码]show: [代码][代码]false[代码][代码],[代码][代码] [代码][代码]time: utils.getNowFormatDate(),[代码][代码] [代码][代码]url: that.userInfo.avatarUrl,[代码][代码] [代码][代码]name: that.userInfo.nickName[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}).then(res => {[代码][代码] [代码][代码]// 关闭所有页面,打开到应用内的某个页面,跳转到留言列表页[代码][代码] [代码][代码]wx.reLaunch({[代码][代码] [代码][代码]url: [代码][代码]'/pages/message/main'[代码][代码] [代码][代码]})[代码][代码] [代码][代码]})[代码][代码] [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码] [代码][代码]tools.showToast([代码][代码]'说点什么吧~'[代码][代码])[代码][代码] [代码][代码]}[代码][代码] }[代码] [代码] [代码] [代码][代码] 对应实例如下: [图片][图片] 改(修改数据)[代码] [代码] [代码] const cloud = require([代码][代码]'wx-server-sdk'[代码][代码])[代码] [代码] cloud.init()[代码][代码] const db = cloud.database()[代码][代码] exports.main = async (event, context) => {[代码][代码] [代码][代码]const dbName = [代码][代码]'message'[代码][代码] [代码][代码]return[代码] [代码]db.collection(dbName).doc(event.id).update({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]show: event.show[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] }[代码] [代码] [代码] [代码] [代码] [代码] switchMessage (e) {[代码] [代码] [代码][代码]const that = [代码][代码]this[代码][代码] [代码][代码]wx.cloud.callFunction({[代码][代码] [代码][代码]name: [代码][代码]'switchMessage'[代码][代码],[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]id: e.mp.target.dataset.id,[代码][代码] [代码][代码]show: e.mp.detail.value[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}).then(res => {[代码][代码] [代码][代码]if[代码] [代码](res.result.errMsg === [代码][代码]'document.update:ok'[代码][代码]) {[代码][代码] [代码][代码]that.getList()[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] }[代码] [代码] [代码] 对应实例如下:(前面没使用云函数也实现了相同的功能,感兴趣的可以对比查阅) [图片] 删(删除数据)[代码] [代码] [代码] const cloud = require([代码][代码]'wx-server-sdk'[代码][代码])[代码] [代码] cloud.init()[代码][代码] const db = cloud.database()[代码][代码] exports.main = async (event, context) => {[代码][代码] [代码][代码]const dbName = [代码][代码]'message'[代码][代码] [代码][代码]return[代码] [代码]db.collection(dbName).doc(event.id).remove()[代码][代码] }[代码] [代码] [代码] [代码] [代码] [代码] deleteItem (id) {[代码] [代码] [代码][代码]// 记录this指向[代码][代码] [代码][代码]const that = [代码][代码]this[代码][代码] [代码][代码]// 这里之所以使用wx.showModal是防止误操作[代码][代码] [代码][代码]wx.showModal({[代码][代码] [代码][代码]title: [代码][代码]'提示'[代码][代码],[代码][代码] [代码][代码]content: [代码][代码]'你确定要删除这条留言?'[代码][代码],[代码][代码] [代码][代码]success (res) {[代码][代码] [代码][代码]if[代码] [代码](res.confirm) {[代码][代码] [代码][代码]wx.cloud.callFunction({[代码][代码] [代码][代码]name: [代码][代码]'deleteMessage'[代码][代码],[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]id[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}).then(res => {[代码][代码] [代码][代码]if[代码] [代码](res.result.errMsg === [代码][代码]'document.remove:ok'[代码][代码]) {[代码][代码] [代码][代码]that.getList()[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] }[代码] [代码] [代码] 对应实例如下: [图片] 总结掌握上面两种对应的增删改查后,相信大家对云开发会有一个更清晰的认识,也希望大家多多使用云开发做出更多好玩的小程序作品; 如果觉得看完这篇文章让你有想尝试使用云开发的冲动,请不要吝啬你的赞,有什么问题欢迎留言,一起交流学习。 对应小程序 欢迎大家体验: [图片] 日记小程序 [图片] 小程序订制加本人微信:huangbin910419 可按给定UI图订制
2019-11-06 - 微信开放平台快速注册小程序审核通过后,修改小程序信息问题求解
1、微信开放平台快速注册小程序注册审核通过后只能获取到小程序基本信息,其他的设置名称、修改头像、修改功能介绍等接口全部返回api unauthorized hint。有知道为什么么?(网上有说是因为没有交300元,高级接口用不了,但是开方平台快速注册的小程序不需要的呀) [图片] 2、开放平台文档问题 [图片] 还有这个第三方调用上述接口是打不开的,这个链接是空!是不是微信方的问题!有没有成功解决的求告知! ———————————————————— 有这方面需要的可以讨论一起探讨下,新出的这个开放品台快速注册小程序感觉问题很多! 在网上很少有这方面文章,希望知道的给个答复、万分感谢!
2019-03-15 - 微信开放平台快速注册小程序审核通过后,修改小程序信息问题求解
1、微信开放平台快速注册小程序注册审核通过后只能获取到小程序基本信息,其他的设置名称、修改头像、修改功能介绍等接口全部返回api unauthorized hint。有知道为什么么?(网上有说是因为没有交300元,高级接口用不了,但是开方平台快速注册的小程序不需要的呀) [图片] 2、开放平台文档问题 [图片] 还有这个第三方调用上述接口是打不开的,这个链接是空!是不是微信方的问题!有没有成功解决的求告知! ———————————————————— 有这方面需要的可以讨论一起探讨下,新出的这个开放品台快速注册小程序感觉问题很多!在网上很少有这方面文章,希望知道的给个答复、谢谢!
2019-03-15