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


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 相关文章推荐
javascript内置对象arguments详解
Mar 16 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
H5上传本地图片并预览功能
May 08 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
python3设计模式之简单工厂模式
2017/10/17 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python实现连续图文识别
2018/12/18 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python for循环及基础用法详解
2019/11/08 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
Python项目跨域问题解决方案
2020/06/22 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
成教毕业生自我鉴定
2013/10/23 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
大学生创业计划书的用途
2014/01/08 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
出纳岗位职责范本
2015/03/31 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android
CSS3实现指纹特效代码
2022/03/17 HTML / CSS