【小程序】不使用云函数，进行云开发数据库操作

8哥爱前端

文章介绍了个人开发者如何利用小程序的云开发功能节约服务器成本，通过基础版云开发配合控制查询次数和数据量来管理数据库调用。作者分享了在小程序端直接查询数据库的方法，限制每次查询20条数据，并通过‘点击查看更多’按钮分批加载更多数据，以避免云函数配额不足的问题。


项目背景
个人开发者出于节约成本的目的，可能会选择小程序的云开发功能，从而节省服务器购买的费用，也省去了服务器搭建、配置、维护等开发成本。

使用小程序云开发功能最基础的版本是19.9￥/月，数据库调用配额是20万次/月，云函数配额是2GB/月。20万次/月的调用次数基本上是足够的，但每次调用数据库需要查询的数据量过多的话，2GB/月的配额是远远不够的（开发、调试还会用掉一部分）。

因此，我在自己的个人项目中尽量不使用云函数，而是通过普通模式来调用数据库（在小程序端调用数据，而不是在云函数端），但会面临一个问题——小程序端获取数据，每次最多只能查询20条（云函数端最多100条）。因此可通过设置一个“点击查看更多”按钮来让用户点击后加载更多的数据到相应页面。（当然也可以通过上划触底加载的方式）


代码开始


小程序端获取“云开发数据库”合集方法

1. getData(rows=20,page=0){   //rows：每次查询条数，page：每次查询跳过的条数
   
2.         db.collection('name').orderBy('num','desc').skip(page).limit(rows).get().
   
3.         then( res => {
   
4.                 let current = this.data.showList
   
5.                 let newList = current.concat(res.data)
   
6.                 this.setData({
   
7.                         showList:newList
   
8.                 })
   
9.         })
   
10. },

复制代码

数据查询
db.collection()方法定义了数据库查询的条件，以上代码意思为：单次查询 rows 条数据（传参，默认20），跳过 page 条数据(传参，默认0)。并以 num 字段倒序方式返回查询结果。

特别说明：
.skip(page) 的作用为跳过 page 条数据，例如：页面加载完成前肯定是0条数据，参数 page 默认为0，因为没有数据，所以不用跳过查询（跳过0条）。页面加载完成后有20条数据，当用户点击“点击查看更多”按钮来向页面加载更多内容时，就会跳过已查询到的20条数据，从第21条数据开始查询，继续获取到20条。如再次加载，则再次跳过前40条数据，以此类推。

云开发数据查询，具体参考官方文档：查询数据 | 微信开放文档

点击查看更多
前端 wxml 页面通过事件绑定，用户点击按钮后，调用 js 页面的 showMore 方法

1. <view bindtap="showMore" class="showMore">点击查看更多</view>

复制代码

将已加载到前端页面的数据条数赋给变量 page，这样当用户点击“查看更多”按钮时，就会跳过 page 条数据，从第 page+1 条数据开始查询（往后的20条）。并将新数据与旧数据合并。

1. showMore: function() {
   
2.         let page = this.data.showList.length //   获取已查询数据条数
   
3.         if (page <= 80) {    //   限制查询条数
   
4.                 this.getData(20,page)   //   函数内调用getData()查询方法
   
5.         }else{
   
6.                 wx.showToast({
   
7.                         title: '不能超过100条结果',
   
8.                         icon:'error',
   
9.                         duration:3600,
   
10.                 })
    
11.         }
    
12. },

复制代码

8哥爱前端

数据处理
对每次查询到的数据进行处理。

变量 current 保存从页面 data 中获取已加载到页面的数据（数组）；

通过 .concat(). 方法将最新查询到的数据合并到之前的数据之后，形成新的数组，赋给变量 newList

这里通过限制 page 的值来避免用户无限次加载查询数据库（page 限制最高80，加上最初的20，总共能获取100条数据）

通过 this.setData(） 将最新数据更新，从而使前端页面通过数据绑定实现加载更多内容的功能。

总结
以上就是不通过云函数，查询小程序“云开发”数据库的案例方法。.js页面的所有代码如下：

1. const db = wx.cloud.database()
   
2. 
   
3. Page({
   
4.     data: {
   
5.         showList:[]
   
6.     },
   
7.     //   getData()查询方法
   
8.     getData(rows=20,page=0){ //rows：每次查询条数，page：每次查询跳过的条数
   
9.         db.collection('name').orderBy('num','desc').skip(page).limit(rows).get().
   
10.         then( res => {
    
11.             let current = this.data.showList
    
12.             let newList = current.concat(res.data)
    
13.             this.setData({
    
14.                 showList:newList
    
15.             })
    
16.         })
    
17.     },
    
18.     onLoad: function () {
    
19.         this.getData()   //   页面加载时，第一次查询数据
    
20.     },
    
21.     //   用户点击按钮时，再次查询并更新数据
    
22.     showMore: function() {
    
23.         let page = this.data.showList.length    //   获取已查询数据条数
    
24.         if (page <= 80) {    //   限制查询条数
    
25.             this.getData(20,page)    //   函数内调用getData()查询方法
    
26.         }else{
    
27.             wx.showToast({
    
28.                 title: '不能超过100条结果',
    
29.                 icon:'error',
    
30.                 duration:3600,
    
31.             })
    
32.         }
    
33.     }
    
34. })

复制代码