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

2019-11-19 11:32:15

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了微信小程序云开发实现数据添加、查询和分页，供大家参考，具体内容如下

实现的效果

实现要点

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: '没有更多数据了', }) }  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：ES6中的class是如何实现的(附Babel编译的ES5代码详解)

下一篇：js常用正则表达式集锦