微信小程序云数据库的查询可以参考“微信小程序云开发（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 = this wx.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.n let m=event.m return 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 = this wx.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 = this let length = this.data.DataList.length wx.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 = this let length = this.data.DataList.length wx.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: '加载失败', }) } })