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


Posted in Javascript onMay 17, 2019

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

实现的效果

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

实现要点

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
javascript this详细介绍
Sep 19 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
js常用正则表达式集锦
May 17 #Javascript
Angular请求防抖处理第一次请求失效问题
May 17 #Javascript
vue cli 3.0 搭建项目的图文教程
May 17 #Javascript
小程序云开发如何实现图片上传及发表文字
May 17 #Javascript
tsconfig.json配置详解
May 17 #Javascript
小程序云函数调用API接口的方法
May 17 #Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 #Javascript
You might like
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
jquery ajax abort()的使用方法
2010/10/28 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
js获取腾讯视频ID的方法
2016/10/03 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
浅析Python基础-流程控制
2016/03/18 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python reduce函数作用及实例解析
2020/05/08 Python
浅谈django 重载str 方法
2020/05/19 Python
电子商务专业自我鉴定
2013/12/18 职场文书
行政主管岗位职责
2015/02/03 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
pandas中关于apply+lambda的应用
2022/02/28 Python