微信小程序云数据库的查询可以参考“微信小程序云开发（1）”

在页面显示数据库里的数据

在“pages/index/index.wxml”文件中输入以下代码：

<button bindtap="getData">查询数据</button>
<view wx:for="{{DataList}}" wx:key="index"><view class="qwer"><view>{{item.name}}</view><view>{{item.age}}</view></view>
</view>

在“pages/index/index.js”文件中输入下列代码：

Page({data:{DataList : []},getData(){let THIS = thiswx.cloud.callFunction({name : "getSQLData",fail(res){console.log("获取数据失败",res)},success(res){console.log("获取数据成功",res),THIS.setData({DataList: res.result.data})}})}
})

在“pages/index/index.wxss”文件中添加样式：

.qwer {background: blueviolet;border: solid 1px blue;color: white;
}

编译运行，点击“查询数据”按钮，可以将查询到的数据显示在页面上

分片段载入数据

将从数据库获取的数据分片段

先在云数据库中创建大量数据，内容为1~50。小程序中将数据分片段可以通过skip()、limite()这两个方法实现。skip(n)表示从第n+1条数据开始获取，而limit(n)表示本次只获取n条数据。
创建一个云函数getSQLData，内容如下：

const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {let n=event.nlet m=event.mreturn cloud.database().collection("test").skip(n).limit(m).get();
}

上传并部署云函数。“pages/index/index.wxml”中的内容如下：

<view wx:for="{{DataList}}" wx:key="inedx"><view class="qwer"><view>{{item._id}}</view><view>{{item.number}}</view></view>
</view>

“pages/index/index.js”中先写一个载入时触发的函数：

Page({data:{DataList : []},//页面加载时触发函数onLoad:function () {let THIS = thiswx.cloud.callFunction({name : "getSQLData",data:{n:10,   //这里n和m先赋固定值测试是不是从11开始获取5条数据m:5,},fail(res){console.log("获取数据失败",res)},success(res){console.log("获取数据成功",res),THIS.setData({DataList: res.result.data})}})},
})

编译运行，测试结果如下：

分批将片段数据载入

“pages/index/index.js”中的代码做如下更改：

Page({data:{DataList : []},getData(){let THIS = thislet length = this.data.DataList.lengthwx.cloud.callFunction({name : "getSQLData",data:{n:length,m:15,},fail(res){console.log("获取数据失败",res)},success(res){console.log("获取数据成功",res),THIS.setData({//concat()是往数组中添加数据DataList: THIS.data.DataList.concat(res.result.data)}),console.log(length)}})},//页面加载时触发函数onLoad:function () {this.getData()},//页面上滑到底触发函数onReachBottom:function() {this.getData()}
})

编译运行，将页面上滑到底，看是否加载了新数据

加载效果优化

对代码稍作修改

getData(){//数据载入时显示“加载中”wx.showLoading({title: '加载中',})let THIS = thislet length = this.data.DataList.lengthwx.cloud.callFunction({name : "getSQLData",data:{n:length,m:15,},fail(res){console.log("获取数据失败",res)},success(res){console.log("获取数据成功",res),THIS.setData({//concat()是往数组中添加数据DataList: THIS.data.DataList.concat(res.result.data)}),//数据加载完毕隐藏提示wx.hideLoading({success: (res) => {},}),wx.showToast({title: '加载成功',})},fail(res){console.log("获取数据失败",res),wx.showToast({title: '加载失败',})}})

微信小程序云开发（2）——在页面显示云数据库的数据相关推荐

【微信小程序企业级开发教程】界面刷新获取新更新数据
在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作.下面介绍一下 ...
【微信小程序企业级开发教程】前台收集数据更新数据库表方法
文章目录这是一个没有目录只有代码的文章哦感觉大家都能理解代码就不仔细描述了前台后台这是一个没有目录只有代码的文章哦感觉大家都能理解代码就不仔细描述了前台 <!--pages/l ...
【微信小程序企业级开发教程】页面的生命周期和参数传递
文章目录 1 页面的生命周期 2 参数传递 2.1 第一种method 2.2 第二种method 1 页面的生命周期 2 参数传递 2.1 第一种method 第一个界面代码: 要跳转界面的代码: ...
关于微信小程序内嵌的H5页面阿里云点播视频获取视频播放凭证
后端 Spring Boot 微服务开发下载 aliyun-java-vod-upload-1.4.14.jar 注意 :aliyun-java-vod-upload-1.4.14.jar 还未 ...
微信小程序仿网易云音乐（使用云开发，提供源码）
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程效果预览代码实现点击触发生成海报在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
微信小程序从零开始开发步骤（二）创建小程序页面
上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录选中page,右击鼠标,从硬盘打 ...
微信小程序——传统开发模式与云开发模式对比
目录 1.传统开发模式与云开发模式的对比图 2.云开发技术能力说明 3.云开发技术特点 1.传统开发模式与云开发模式的对比图通过传统开发模式与云开发模式的对比图可以看出传统开发模式需要开发者关注 ...

微信小程序云开发（2）——在页面显示云数据库的数据