微信小程序实现分页查询详解

目录
  • 创建自定义连接器
  • 云开发介绍
  • 分页实现思路
  • 使用连接器
  • 为什么要自定义分页功能

日常小程序经常需要分页查询的功能,本篇我们讲解一下低代码中如何实现分页查询的功能。要自己开发分页功能,可以先参考官方的方法

分页查询我们一般是需要有入参和出参,入参分别需要页码、每页大小、排序字段名称、排序方式、查询条件。

出参分别需要记录总条数、页码、每页大小、记录列表。

入参和出参知道之后,那在哪写代码呢?像分页这种功能一般属于后端的能力,低码工具中是在自定义连接器里写后端代码的。

创建自定义连接器

登录低码的控制台,点击新建自定义连接器

输入名称和标识

点击立即新建

输入名称和标识,意图选择查询列表,类型选择自定义代码

在界面中可以输入代码的部分就是我们编制后端逻辑代码的编辑器,可以在里边直接写代码。

云开发介绍

我们要实现后端代码,其实是要符合云开发的语法,我们打开云开发的官方文档,找到api部分

有个概念需要了解,就是collection。在文档型数据库里我们传统数据库的表对应的是collection,那如何找到collection呢?

我们可以打开云开发cloudbase,然后进入到我们的环境,找到数据库

列表上就是各个集合。有了集合那要怎么写代码呢?这里可以参考微搭官方文档的自定义代码部分,复制其中的代码进入到自定义代码编辑器中

module.exports = async function (params, context) {
  const result = await context.database.collection('lcap-data-1TSuH5tum-product_qnniu21-preview').get();
  // 在这里返回这个方法的结果,需要与出参定义的结构映射
  return {
    records: result.data
  };
};

代码写好之后需要做方法测试,先需要增加一个入参,增加后我们就可以看到执行的结果

分页实现思路

要实现分页,一共需要几个字段,第一个是求得总记录数,总记录数我们可以用count方法计算

module.exports = async function (params, context) {
  const result = await context.database.collection('lcap-data-1TSuH5tum-product_qnniu21-preview').get();
  const total = await context.database.collection('lcap-data-1TSuH5tum-product_qnniu21-preview').count();
  // 在这里返回这个方法的结果,需要与出参定义的结构映射
  return {
    total:total.total,
    records: result.data
  };
};

总的记录数有了,我们每次返回的结果不是全部返回,需要按照当前传过来的页码和每页显示的条数去做过滤数据

module.exports = async function (params, context) {
  const result = await context.database.collection('lcap-data-1TSuH5tum-product_qnniu21-preview').skip(params.pageSize*(params.pageNo-1)).limit(params.pageSize).get();
  const total = await context.database.collection('lcap-data-1TSuH5tum-product_qnniu21-preview').count();
  // 在这里返回这个方法的结果,需要与出参定义的结构映射
  return {
    total:total.total,
    records: result.data
  };
};

一切做好之后就可以点击出参映射,来自动映射出参

使用连接器

分页方法做好之后一般是需要在应用中使用,一种是可以在变量中直接使用

另外一种是可以在数据列表中绑定

为什么要自定义分页功能

官方生成的分页方法只能实现单表业务,而实际业务中我们经常需要拆分表,但是在多表查询的场景中又需要展示数据,这个时候就必须自己实现分页逻辑。下篇我们讲解一下多表分页查询如何实现,敬请期待。

到此这篇关于微信小程序实现分页查询详解的文章就介绍到这了,更多相关小程序分页查询内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序开发实现的IP地址查询功能示例

    本文实例讲述了微信小程序开发实现的IP地址查询功能.分享给大家供大家参考,具体如下: 微信小程序 开发 参考   https://mp.weixin.qq.com/debug/wxadoc/dev/component/ search.wxml <view class="container"> <view class="page-body"> <view class="weui-search-bar {{searchFocusC

  • 微信小程序 云开发模糊查询实现解析

    这篇文章主要介绍了微信小程序 云开发模糊查询实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 解释: db.RegExp 从基础库 2.3.2 开始(wx-server-sdk 从 0.0.23 开始),数据库支持正则表达式查询,开发者可以在查询语句中使用 JavaScript 原生正则对象或使用 db.RegExp 方法来构造正则对象然后进行字符串匹配.在查询条件中对一个字段进行正则匹配即要求该字段的值可以被给定的正则表达式匹配 事例:

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

    本文实例为大家分享了微信小程序云开发实现数据添加.查询和分页,供大家参考,具体内容如下 实现的效果 实现要点 WXML 不同类别数据的显示 通过 if-elif-else 实现,在wxml文件中通过 <block></block>渲染,因为它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性.也就是说可以通过属性来控制页面是否要渲染这部分的内容,可以减少页面渲染时间. 云开发数据的获取 先开通云开发功能 ,参考官方文档,然后在创建项目的时候勾选上 使用云开发模板(看个人吧,

  • 微信小程序 开发之快递查询功能的实现

    微信小程序 快递查询功能: 产品需求, 准备api, 代码编写.  第一步:产品需求,我们需要实现如下图的一个功能,在文本框输入快递单号,点击查询,下面出来我们需要的快递信息 第二步:准备 我们先找一个快递的api接口,通过http://apistore.baidu.com/我们可以看到很多的api,我们找一个快递查询的 我们可以看到有接口地址,和一些参数.做好这个准备接下来就开始编码工作了---- 第三步:编码工作 我们新建一个Express的文件,然后默认文件准备齐全 我们现在app.js中

  • 微信小程序多表联合查询的实现详解

    目录 一对多表设计 SQL中的关联查询 低码中的表关联 自定义连接器中实现表关联查询 新建连接器 总结 一对一的设计一般不常见,只需要设计到主表中即可,避免增加复杂性.一对多的关系比较常见,一的一方通常作为主表,多的一方通常作为子表.而多对多一般会拆分成两个一对多的关系,这就必须要用中间表进行过渡. 我们本篇介绍的多表查询,侧重在一对多的关系,我们先看一下我们实际的表设计 一对多表设计 我们实现的是文章关注的业务,通常将文章作为主表,而关注信息作为子表.表和表之间要进行关联,常见的设计思路是子表

  • 微信小程序实现分页查询详解

    目录 创建自定义连接器 云开发介绍 分页实现思路 使用连接器 为什么要自定义分页功能 日常小程序经常需要分页查询的功能,本篇我们讲解一下低代码中如何实现分页查询的功能.要自己开发分页功能,可以先参考官方的方法 分页查询我们一般是需要有入参和出参,入参分别需要页码.每页大小.排序字段名称.排序方式.查询条件. 出参分别需要记录总条数.页码.每页大小.记录列表. 入参和出参知道之后,那在哪写代码呢?像分页这种功能一般属于后端的能力,低码工具中是在自定义连接器里写后端代码的. 创建自定义连接器 登录低

  • 微信小程序中input标签详解及简单实例

    微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对

  • 微信小程序Redux绑定实例详解

    微信小程序Redux绑定实例详解 安装 clone或者下载代码库到本地: git clone https://github.com/charleyw/wechat-weapp-redux 将dist/wechat-weapp-redux.js(或者拷贝minify的也可以)文件直接拷贝到小程序的工程中,例如(下面假设我们把第三方包都安装在libs目录下): cd wechat-weapp-redux cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs

  • 微信小程序 Buffer缓冲区的详解

     微信小程序 Buffer缓冲区的详解 JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文件流时,必须使用到二进制数据.因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存放二进制数据的缓存区. 在 node.js 中,Buffer 类是随 Node 内核一起发布的核心库.Buffer 库为 Node.js 带来了一种存储原始数据的方法,可以让 Node.js 处理二进制数据,每当需要在 Node.js 中处理I/O操作中移动

  • 微信小程序 MD5的方法详解及实例代码

    微信小程序 MD5的方法详解 生成的文件可以放在  utils文件中哦!!! /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also contributed by Greg Holt

  • 微信小程序组件 marquee实例详解

    微信小程序组件 marquee实例详解 1. marquee标签 html是有marquee标签的,可以实现跑马灯效果,但小程序没有,所以要实现.这里考虑使用css3的animation实现. html的marquee是这样使用的. <marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1"

  • 微信小程序 地图map实例详解

    微信小程序 地图map实例详解 wxml: class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位 longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" co

  • 微信小程序日历组件calendar详解及实例

    微信小程序日历组件calendar详解及实例 模版使用: src="../cal/calendar.wxml"> is="calendar" data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l unar_selected_value}}"> JS代码使用: var Calendar = require('

  • 微信小程序 Toast自定义实例详解

    微信小程序 Toast自定义实例详解 实现类似于Android的Toast提示 index.js: var timer; var inputinfo = ""; var app = getApp() Page({ data: { animationData:"", showModalStatus:false }, onLoad: function () { }, showModal: function () { // 显示遮罩层 var animation = wx

  • 微信小程序 常用工具类详解及实例

    微信小程序 常用工具类详解 前言: 做微信小程序当中,会遇到好多的工具类util.js,这里记载下来以便平常使用 (Ps:建议通过目录查看) -获取日期(格式化) function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinut

随机推荐