微信小程序~云开发Demo 实现数据的添加、查询和分页实现

实现的效果

实现要点

WXML 不同类别数据的显示

通过 if-elif-else 实现，在wxml文件中通过 <block></block>渲染，因为它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。也就是说可以通过属性来控制页面是否要渲染这部分的内容，可以减少页面渲染时间。

云开发数据的获取

先开通云开发功能，参考官方文档，然后在创建项目的时候勾选上使用云开发模板（看个人吧，我直接使用后点击项目中的 login）就可以获取到用户的oppenid，之后就可以使用云数据库了。

云开发登录：

云数据的获取

 /*** 生命周期函数--监听页面加载*/onLoad: function(options) {console.log('onload');this.getData(this.data.page);    },/*** 获取列表数据* */getData: function(page) {var that = this;console.log("page--->" + page);const db = wx.cloud.database();// 获取总数db.collection('topic').count({success: function(res) {that.data.totalCount = res.total;}})// 获取前十条try {db.collection('topic').where({_openid: 'oSly***********vU1KwZE', // 填入当前用户 openid}).limit(that.data.pageSize) // 限制返回数量为 10 条.orderBy('date', 'desc').get({success: function(res) {// res.data 是包含以上定义的两条记录的数组// console.log(res.data)that.data.topics = res.data;that.setData({topics: that.data.topics,})wx.hideNavigationBarLoading();//隐藏加载wx.stopPullDownRefresh();},fail: function(event) {wx.hideNavigationBarLoading();//隐藏加载wx.stopPullDownRefresh();}})} catch (e) {wx.hideNavigationBarLoading();//隐藏加载wx.stopPullDownRefresh();console.error(e);}},

云数据的添加

 /*** 保存到发布集合中*/saveDataToServer: function(event) {var that = this;const db = wx.cloud.database();const topic = db.collection('topic')db.collection('topic').add({// data 字段表示需新增的 JSON 数据data: {content: that.data.content,date: new Date(),images: that.data.images,user: that.data.user,isLike: that.data.isLike,},success: function(res) {// res 是一个对象，其中有 _id 字段标记刚创建的记录的 id// 清空，然后重定向到首页console.log("success---->" + res)// 保存到发布历史that.saveToHistoryServer();// 清空数据that.data.content = "";that.data.images = [];that.setData({textContent: '',images: [],})that.showTipAndSwitchTab();},complete: function(res) {console.log("complete---->" + res)}})},

云数据的删除
可查看官放文档，这里不贴代码了，有问题联系。
云数据的更新
可查看官放文档，这里不贴代码了，有问题联系。

数据列表的分页

主要就是定义一个临时数组存放加载上来的数据，然后通过传递给对象，最后传递到布局中去。

 /*** 页面上拉触底事件的处理函数*/onReachBottom: function() {var that = this;var temp = [];// 获取后面十条if(this.data.topics.length < this.data.totalCount){try {const db = wx.cloud.database();db.collection('topic').skip(5).limit(that.data.pageSize) // 限制返回数量为 5 条.orderBy('date', 'desc')    // 排序.get({success: function (res) {// res.data 是包含以上定义的两条记录的数组if (res.data.length > 0) {for(var i=0; i < res.data.length; i++){var tempTopic = res.data[i];console.log(tempTopic);temp.push(tempTopic);}var totalTopic = {};totalTopic =  that.data.topics.concat(temp);console.log(totalTopic);that.setData({topics: totalTopic,})} else {wx.showToast({title: '没有更多数据了',})}},fail: function (event) {console.log("======" + event);}})} catch (e) {console.error(e);}}else{wx.showToast({title: '没有更多数据了',})}},

完~，有问题可以联系

微信小程序~云开发Demo 实现数据的添加、查询和分页实现相关推荐

关于微信小程序云开发数据库中有数据查询不到的问题
最近在学习过程中遇到一个微信小程序云开发数据库中有数据查询不到的问题集合查询代码如下: Page({/* 采用了ES6的写法 */onLoad() {wx.cloud.database().coll ...
【微信小程序】如何获取微信小程序云开发数据库的数据并渲染到页面？
前言上一篇博客我把微信小程序云开发数据库操作(增删改查)的实现方法都已经分享出来啦,可以戳链接进去阅读哦 [微信小程序]小程序云开发实现数据库增删改查(小白速度Get起来!!一步步教你如何实现) 基 ...
node.js 微信小程序部署服务器_微信小程序云开发环境部署，及添加数据
点击蓝字关注我们今天在漫无目的逛CSDN的时候,一篇关于微信公众号云开发的文章引起了我的注意.据介绍,小程序云开发简称tcb,是腾讯爸爸给我们提供的基于腾讯云的云服务器.目前云开发已包含云数据库, ...
微信小程序云开发将数据库数据生成word文件
演示如何通过云函数把数据存入word模板中,源代码见cloudfunctions/genarateDocument/index.js,整个过程分为以下几个过程:(1) 创建云函数,并安装doctemp ...
微信小程序云开发记账本计算总金额，查询突破二十条数据的限制，条件查询、根据时间排序
//这里用async await 获取一下集合中记录的总数 ,这样比较方便... chaxunout: async function () {//查询函数this.setData({year1:th ...
微信小程序云开发demo项目部署报错：V[云函数] [login] 调用失败 Error: errCode: -404011 cloud function execution error | errM
报错详情: 从报错来看好像是选择的环境不存在,解决办法:在miniprogram下的app.js中配置环境ID,具体找法: 点击云开发->打开云开发控制台->点击右上角的设置,在下面即可看 ...
微信小程序云开发上传数据到云数据库
实现功能:实现对数组数据的动态更改,并能通过for循环,上传一整组数据到云数据库代码: 1.wxml代码 <view ><view>运动症状</view> < ...
微信小程序云开发操作数据库-数据的批量删除
批量删除仅能在云函数内进行新建云函数安装依赖编写云函数代码删除所有color=red的数据最后上传并部署,就可以在页面中调用了调用:
微信小程序云开发操作数据库-数据的批量更新
提示:批量更新仅能在云函数内进行文档: 创建云函数编写云函数,将数据库的price改成1 然后右键上传云函数. 调用云函数将所有color为red的price更改为2

微信小程序~云开发Demo 实现数据的添加、查询和分页实现

实现的效果

实现要点

WXML 不同类别数据的显示

云开发数据的获取

数据列表的分页

微信小程序~云开发Demo 实现数据的添加、查询和分页实现相关推荐

最新文章

热门文章