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


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 Function对象扩展之延时执行函数
Jul 06 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
javascript中 try catch用法
Aug 16 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
JavaScript实现简单计算器
Mar 19 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安全性漫谈
2012/06/28 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
Python制作词云图代码实例
2019/09/09 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
Django celery异步任务实现代码示例
2020/11/26 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
优秀学生干部推荐材料
2014/02/03 职场文书
护理专业自荐信范文
2014/02/26 职场文书
最美护士演讲稿
2014/08/27 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL