基于小程序云开发写了一个代办清单小程序
发布于 4 年前 作者 jiayan 3236 次浏览 来自 分享

代码:记我清单

本文基于自己开发的简版todo工具,记我清单项目总结。 小程序云开发提供了云函数、数据库、存储、云调用四大基础能力,弱化了运维和后端的概念,这也是与近些年云服务、serverless等架构的兴起有关。

资源环境配置

一个环境对应一整套独立的云开发资源,包括数据库、存储空间、云函数等资源。各个环境是相互独立的,用户开通云开发后即创建了一个环境,默认可拥有最多两个环境。在实际开发中,建议每一个正式环境都搭配一个测试环境,所有功能先在测试环境测试完毕后再上到正式环境。以初始可创建的两个环境为例,建议一个创建为 test 测试环境,一个创建为 release 正式环境。

环境的配置在app.js中

 wx.cloud.init({
        // env 参数说明:
        //   env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境(第一个创建的环境)
        env: 'production-e9bw1',
        traceUser: true,
      })

使用npm的问题

云开发的启动项目,根目录下有cloudfunctions和miniprogram两个文件夹目录,这个与小程序单独开发不一样。使用npm依赖需要在miniprogram下安装依赖而不是根目录下。

数据库查询问题

小程序端在获取集合数据时服务器一次默认并且最多返回 20 条记录,云函数端这个数字则是 100。微信的解释是 “为了防止误操作以及保护小程序体验”~这,我能说一句体验很差吗,真的会给开发者带来一些不必要的麻烦。

我想你一开始可能会想什么是小程序端与云函数端?难道都是小程序端吗?下面我来介绍一下。 小程序端更像是我们说的前端,就是miniprogram下的代码,你是可以直接拿到wx.cloud的api的。

云函数是指的cloudfunctions下的代码,这个是需要上传到微信的云node环境下才能使用的,调用wx.cloud需要我们使用wx-server-sdk

const cloud = require('wx-server-sdk')

注意

在小程序端调用查询数据是天然鉴权的,A用户存放的数据,B用户是查询不到的。但是如果你是通过云函数来查询,那么你就要根据用户的openid来作为必要的查询条件了,否则就会出现查询了所有用户数据的问题!

const cloud = require('wx-server-sdk')
 const wxContext = cloud.getWXContext()
    // 先取出集合记录总数
    const countResult = await db.collection('todos').where({
        _openid: wxContext.OPENID
    }).count()

分页查询的代码

/**
 * 根据参数分页查询todo列表 /小程序端一次最多查20个
 */
export const queryTodoByPage = async(dbParams = {}, page = 1, pageSize = 20) => {
    const db = wx.cloud.database()
    const dbCollection = db.collection('todos')
    const countResult = await dbCollection.count()
    // 总条数
    const count = countResult.total
    // 按页查询
    const data = await dbCollection.where(dbParams).skip((page - 1) * pageSize).limit(pageSize).get()
    return new Promise((resolve, reject) => {
        resolve({
            data,
            count
        })
    })
}

数据状态管理 & computed计算属性

很抱歉小程序原生开发并不提供这两个可以让开发者很爽的两个扩展能力,这次开发的todo小程序深有感悟没有这两个特性无疑会让你的代码增加很多,而且会浪费可以减少的数据请求。不过官方提供了扩展库,你可以按照自己的需求去安装。

npm install --save miniprogram-computed
npm install --save mobx-miniprogram mobx-miniprogram-bindings

具体可查阅微信小程序官方文档-扩展能力一节。

预览:


1 回复

支持开源,已fork

回到顶部