小程序开发总结日记（一）——云开发数据库查询、加载、更新（不使用云函数）

本文链接：https://blog.csdn.net/weixin_45828020/article/details/131344489

项目背景

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

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

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

代码开始

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

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

数据查询

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

特别说明：

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

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

点击查看更多

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

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

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

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

数据处理

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

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

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

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

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

总结

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

const db = wx.cloud.database()

Page({
    data: {
        showList:[]
    },
    //   getData()查询方法
    getData(rows=20,page=0){ //rows：每次查询条数，page：每次查询跳过的条数
        db.collection('name').orderBy('num','desc').skip(page).limit(rows).get().
        then( res => {
            let current = this.data.showList
            let newList = current.concat(res.data)
            this.setData({
                showList:newList
            })
        })
    },
    onLoad: function () {
        this.getData()   //   页面加载时，第一次查询数据
    },
    //   用户点击按钮时，再次查询并更新数据
    showMore: function() {
        let page = this.data.showList.length    //   获取已查询数据条数
        if (page <= 80) {    //   限制查询条数
            this.getData(20,page)    //   函数内调用getData()查询方法
        }else{
            wx.showToast({
                title: '不能超过100条结果',
                icon:'error',
                duration:3600,
            })
        }
    }
})

打个广告，我的个人小程序项目，欢迎扫码体验。如有不明白的地方欢迎留言，有不当之处还望各路大神不吝赐教。码字不易，感谢浏览。