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

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

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

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

创建自定义连接器

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

输入名称和标识

点击立即新建

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

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

云开发介绍

我们要实现后端代码,其实是要符合云开发的语法,我们打开云开发的官方文档,找到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
  };
};

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

使用连接器

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

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

为什么要自定义分页功能

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

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

微信小程序实现分页查询详解的更多相关文章

  1. 微信小程序“圣诞帽”的实现思路详解

    这两天朋友圈被圣诞帽刷屏,下面通过本文给大家分享微信小程序“圣诞帽”的实现思路详解,需要的朋友参考下吧

  2. Swift - 自定义UIActivity分享

    UIActivity可以十分方便地将文字、图片等内容进行分享,比如分享到微信、微博、发送邮件、短信等等。下面通过继承UIActivity实现定制按钮和功能,通过调用UIActivityViewController来展示分享框。,NSURL]//新建自定义的分享对象数组acts=[WeiXinActivity(),147)!important;font-family:Consolas,UIActivityTypePrintUIActivityTypeAssignToContactUIActivityType

  3. php微信公众平台交互与接口详解

    这篇文章主要为大家详细介绍了php微信公众平台开发,交互与接口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. 小程序实现图片裁剪上传

    这篇文章主要为大家详细介绍了小程序实现图片裁剪上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. php版微信数据统计接口用法示例

    这篇文章主要介绍了php版微信数据统计接口用法,结合实例形式分析了php微信数据统计接口功能及相关的使用技巧,需要的朋友可以参考下

  6. PHP仿微信发红包领红包效果

    最近项目开发要求实现红包功能,仿微信(不含留言),但只能使用余额发红包。下面小编给大家分享PHP仿微信发红包领红包效果,感兴趣的朋友一起看看吧

  7. 基于Python实现微信自动回复功能

    这篇文章主要为大家详细介绍了Python如何通过WechatPCAPI来实现微信自动回复的功能,文中的示例代码讲解详细,快跟随小编一起动手尝试一下

  8. php实现小程序支付完整版

    这篇文章主要为大家详细介绍了php实现小程序支付完整版,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. 微信小程序的宿主环境实现代码

    这篇文章主要介绍了微信小程序的宿主环境,包括scroll-view 组件的基本使用,text 组件的基本使用及rich-text 组件的基本使用,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下

  10. 解决ios微信页面回退不刷新的问题

    下面小编就为大家带来一篇解决ios微信页面回退不刷新的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部