微信小程序云开发实践--搭建一个管理小程序

article/2025/10/5 2:01:30

概述 :

开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。

云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

目前提供三大基础能力支持：

  • 云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
  • 数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
  • 存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理

创建项目:

新建项目选择一个空目录，填入 AppID（使用云开发能力必须填写 AppID），勾选创建 “云开发 QuickStart 项目”，点击创建即可得到一个展示云开发基础能力的示例小程序。

项目结构如下:

开通云服务:

点击云开发 , 打开云开发控制台,云开发控制台提供如下能力(云函数中对数据库的操作等同于在控制台直接操作数据库)

  • 概览：查看云开发基础使用数据
  • 用户管理：查看小程序用户信息
  • 数据库：管理数据库，可查看、增加、更新、查找、删除数据、管理索引、管理数据库访问权限等
  • 存储管理：查看和管理存储空间
  • 云函数：查看云函数列表、配置、日志和监控
  • 统计分析：查看云开发资源具体使用统计信息

 

基础方法(基本涵盖小程序云开发常用的定义和方法):

小程序调用云函数示例:

// Callback 风格调用
wx.cloud.callFunction({// 要调用的云函数名称name: 'add',// 传递给云函数的参数data: {x: 1,y: 2,},success: res => {// output: res.result === 3},fail: err => {// handle error},complete: () => {// ...}
})// Promise 风格调用
wx.cloud.callFunction({// 要调用的云函数名称name: 'add',// 传递给云函数的event参数data: {x: 1,y: 2,}
}).then(res => {// output: res.result === 3
}).catch(err => {// handle error
})

小程序调用数据库示例:

// 1. 获取数据库引用
const db = wx.cloud.database()
// 2. 构造查询语句
// collection 方法获取一个集合的引用
// where 方法传入一个对象，数据库返回集合中字段等于指定值的 JSON 文档。API 也支持高级的查询条件（比如大于、小于、in 等），具体见文档查看支持列表
// get 方法会触发网络请求，往数据库取数据
db.collection('books').where({
publishInfo: {
country: 'United States'
}
}).get({
success: function(res) {
// 输出 [{ "title": "The Catcher in the Rye", ... }]
console.log(res)
}
})

小程序存储调用示例:

// 让用户选择一张图片
wx.chooseImage({
success: chooseResult => {
// 将图片上传至云存储空间
wx.cloud.uploadFile({
// 指定上传到的云路径
cloudPath: 'my-photo.png',
// 指定要上传的文件的小程序临时文件路径
filePath: chooseResult.tempFilePaths[0],
// 成功回调
success: res => {
console.log('上传成功', res)
},
})
},
})

云函数的定义:

// index.js 是入口文件，云函数被调用时会执行该文件导出的 main 方法
// event 包含了调用端（小程序端）调用该函数时传过来的参数，同时还包含了可以通过 getWXContext 方法获取的用户登录态 `openId` 和小程序 `appId` 信息
const cloud = require('wx-server-sdk')
exports.main = (event, context) => {
const {userInfo, a, b} = event
const {OPENID, APPID} = cloud.getWXContext() // 这里获取到的 openId 和 appId 是可信的
const sum = a + breturn {
OPENID,
APPID,
sum
}
}

云函数中操作数据库

以下调用获取默认环境的数据库的引用：

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()

假设有一个环境名为 test，用做测试环境，那么可以如下获取测试环境数据库：

const cloud = require('wx-server-sdk')
cloud.init()
const testDB = cloud.database({
env: 'test'
})

也可以通过 init 传入默认环境的方式使得获取数据库时默认是默认环境数据库：

const cloud = require('wx-server-sdk')
cloud.init({
env: 'test'
})
const testDB = cloud.database()

操作集合:

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
const todosCollection = db.collection('todos') // 获取todos集合

云开发实践:

(使用小程序云开发实现一个可以增删改查的设备管理平台)

 

1: 需求分析:

  • 设备管理现状: 部门有大量安卓/苹果测试机和测试硬件设备 , 当前管理现状混乱 , 管理员使用纸质表格和excel对每次的出借情况进行记录 , 当有同事需要测试设备的时候 , 需要联系管理员 , 管理员查阅表格 , 找到最后借用人进行协调 , 并登记在册
  • 管理痛点: 管理员需要通过翻阅借用记录表去了解设备现状 , 并协调资源 , 增加了工作量 , 普通员工无法知道设备出借现状 , 获取设备环节复杂;
  • 考勤管理现状: 管理员通过excel表格汇总考勤情况 , 并逐月发送到员工邮箱 , 员工需要下载csv文件去查看考勤
  • 考勤管理痛点: 对于员工 , 通过查看excel十分不便
  • 需求总结: 普通员工通过查看设备现状 , 找到可以状态的设备 , 并汇报管理员 , 管理员通过小程序切换设备状态 , 绑定使用人 ; 管理员逐月导入考勤数据 , 员工可通过小程序查看个人考勤情况;

 

2: 项目构建

  • ui库使用iview weapp
  • 小程序端(前端)对数据库的操作权限是严格按照控制台中配置的权限 , 云函数则拥有所有权限(云函数中对数据库的操作等同于在云开发控制台中进行数据库操作),所以本项目中所有的关于数据库的操作都将在云函数中处理 , 小程序端只作为视图层 , 并对无权限的界面和操作进行视觉隔离

 

3: 建立集合

 

 

通过云函数控制台建立需要的集合 , 并将excel/json文件导入到对应的集合, 也可以直接手动建立

4: 核心功能的实现(以云函数操作数据库为主)

小程序端>app.js

初始化云函数 , 获取已授权用户信息 , 定义需要的全局数据

//app.js
App({onLaunch: function () {const _this = this// 初始化云函数if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({traceUser: true,})}// 获取用户信息(针对已经授权过的用户,直接获取用户信息)wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: res => {_this.globalData.avatarUrl = res.userInfo.avatarUrl_this.globalData.userInfo = res.userInfoif (_this.userInfoCallback) {_this.userInfoCallback()}}})}}})this.globalData = {userInfo: {}, // 微信用户信息userRole: '', // 当前用户角色registerUser: {}, // 微信用户绑定的用户信息userindex: '', // 编辑设备和添加设备页面,index索引选择的值nameuserindexId: '',// 编辑设备和添加设备页面,index索引选择的值idcurrentQuerys: {type: ['iphone', 'android', 'ble'],user: []} // 设备管理筛选框筛选的结果}}
})

 

云函数 > login (云函数条件查询云数据库)

以小程序open_id为查询条件 , 在云函数user集合中查找绑定该open_id的数据 , 为空表示该微信账号未绑定用户名

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()// 调用数据库获取所有设备列表const db = cloud.database() // 获取数据库const _ = db.command // 获取查询指令const usersCollection = db.collection('users') // 获取users集合const user = (await usersCollection.where({open_id: wxContext.OPENID // 根据唯一open_id在user集合中查找已绑定的用户}).get())return {event,data: user,openid: wxContext.OPENID,appid: wxContext.APPID,unionid: wxContext.UNIONID,}
}

 

云函数 > register (云函数修改数据库数据)

对于未绑定的微信号 , 需要将用户选中的用户名与当前微信open_id绑定 , 完成注册

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()// 调用数据库获取所有设备列表const db = cloud.database() // 获取数据库const _ = db.command // 获取查询指令const usersCollection = db.collection('users') // 获取users集合// 查询条件let query = _.eq(event.id)// try {await usersCollection.doc(event.id).update({// data 传入需要局部更新的数据data: {open_id: wxContext.OPENID}})} catch (e) {console.log(e)}return {event,openid: wxContext.OPENID,appid: wxContext.APPID,unionid: wxContext.UNIONID,}
}

云函数 > getEquipmentList (云函数查询全部数据 , 云函数按条件查询数据库)

获取设备数据的时候存在多种情况

  • 获取全部数据: 由于获取数据库有100条上限的限制 , 需要进行特殊处理
  • 按条件查询数据 : 需要提前拼接好查询语句
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()// 调用数据库获取所有设备列表const db = cloud.database() // 获取数据库const _ = db.command // 获取查询指令const equipmentCollection = db.collection('equipment') // 获取equipment集合// 取所有集合中符合条件的数据(因为有默认 limit 100 条的限制,需要做特殊操作)const MAX_LIMIT = 100// 先取出集合记录总数const countResult = await equipmentCollection.count()const total = countResult.total// 计算需分几次取const batchTimes = Math.ceil(total / 100)// 承载所有读操作的 promise 的数组const tasks = []let query = {}// 封装设备类型查询条件(直接通过reduce直接拼接方法)query.eq_type = event.queryList['type'].reduce((acc, cur) => {if (!acc) {return _.eq(cur)} else {return acc.or(_.eq(cur))}}, null)// 用户名查询条件if (event.queryList['user'].length>0) {query.eq_user = event.queryList['user'][0]}for (let i = 0; i < batchTimes; i++) {const promise = equipmentCollection.where(query).skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()tasks.push(promise)}// 等待所有数据读取完成const equipmentList = (await Promise.all(tasks)).reduce((acc, cur) => ({data: acc.data.concat(cur.data),errMsg: acc.errMsg,}))return {event,data: equipmentList,openid: wxContext.OPENID,appid: wxContext.APPID,unionid: wxContext.UNIONID,}
}

 

云函数 > removeEquipement (云函数删除集合数据)

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init()// 云函数入口函数
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()// 调用数据库获取所有设备列表const db = cloud.database() // 获取数据库const _ = db.command // 获取查询指令const equipmentCollection = db.collection('equipment') // 获取equipment集合try{await equipmentCollection.doc(event.id).remove()} catch(e){console.error(e)}return {event,openid: wxContext.OPENID,appid: wxContext.APPID,unionid: wxContext.UNIONID,}
}

项目github地址: https://github.com/zhangyunsiyu/ingeektools

项目截图:

 


http://chatgpt.dhexx.cn/article/KKWmfyHS.shtml

相关文章

基于Servlet+jsp+mysql开发javaWeb学生成绩管理系统

基于Servlet+jsp+mysql开发javaWeb学生成绩管理系统

你知道的越多&#xff0c;你不知道的越多 点赞再看&#xff0c;养成习惯 如果您有疑问或者见解&#xff0c;或者没有积分想获取项目&#xff0c;欢迎指教&#xff1a; 企鹅&#xff1a;869192208 文章目录 一、开发背景二、 需求分析三、开发环境四、运行效果五、开发流程工程目…
阅读更多...
用Django半天时间开发一个员工管理系统实例教程分享

用Django半天时间开发一个员工管理系统实例教程分享

熟悉python的朋友都知道&#xff0c;django简直是web开发领域的一个大杀器。 请求、模板、ORM、admin 都自带&#xff0c;程序员可以很轻松的开发出一个网站或者管理系统。 今天小编给大家分享一个超简单的员工管理系统 源码地址&#xff1a; https://github.com/newpanjin…
阅读更多...
微信小程序云开发-内容管理系统（CMS）小案例

微信小程序云开发-内容管理系统（CMS）小案例

一、前言 最近有朋友问到如何在CMS上实现审核小程序端提交的数据&#xff0c;例如发布的内容审核&#xff0c;订单审核等等。因而出一篇小案例。 二、原理说明 这个由腾讯开源的这个内容管理系统&#xff0c;实际上就是对于云开发数据库的可视化操作&#xff08;又或者说其实…
阅读更多...
使用微信提供的云开发实现后端 微信小程序云开发的内容管理CMS

使用微信提供的云开发实现后端 微信小程序云开发的内容管理CMS

以前开发一款小程序或者应用啥的&#xff0c;首先就是申请域名租服务器&#xff0c;这是必不可少的步骤。 现在小程序云开发出来后&#xff0c;又再出现内容管理的这个功能&#xff0c;对于开发一款简单的小程序来说&#xff0c;真的是太简单的了。 现成的后台直接配置&#…
阅读更多...
新能力 | 云开发CMS内容管理系统，5分钟搞定小程序管理后台

新能力 | 云开发CMS内容管理系统，5分钟搞定小程序管理后台

小程序云开发的云调用能力&#xff0c;让用户可以免鉴权快速调用微信的开放能力&#xff0c;极大节约了开发成本。现在&#xff0c;大家期待已久的云开发 CMS 内容管理系统&#xff0c;终于上线啦&#xff01;顺便提示&#xff0c;接下来还可以二次开发哦&#xff01; 云开发 …
阅读更多...
[敏捷开发]研发管理 开发过程管理

[敏捷开发]研发管理 开发过程管理

开发过程管理&#xff0c;主要面向开发人员的管理。其核心目的&#xff0c;是通过一个项目管理软件&#xff0c;来管理不同项目&#xff0c;然后通过项目的里的工作项&#xff0c;了解开发人员的工作量&#xff0c;效率&#xff0c;从而来管理开发人员&#xff0c;合理调配开发…
阅读更多...
Arduino常用的附加开发版管理器网址

Arduino常用的附加开发版管理器网址

20211004更新 增加ESP32 常用的附加开发版管理器网址 ESP32 https://dl.espressif.com/dl/package_esp32_index.json 如果使用ESP32-SOLO要用这里的编译文件替换源文件 https://github.com/lbernstone/arduino-esp32-solo 替换位置 C:\Users\你的用户名\AppData\Local\Ar…
阅读更多...
基于vue的后台管理系统开发

基于vue的后台管理系统开发

如果要快速开发一套基于vue的后台管理系统&#xff0c;你可以手动从0到1动手撸&#xff0c;也可以基于现有的vue的后台管理系统模版进行开发。 github上有几套关注度比较的vue后台管理系统模版[1]&#xff1a; vue-element-admin[2]vue-admin[3]vue-manage-system[4]iview-admi…
阅读更多...
微信小程序 —— 成员管理及开发管理

微信小程序 —— 成员管理及开发管理

引入 要理解微信小程序的成员管理&#xff0c;首先要理解微信小程序的注册。 微信小程序的注册需要用户提供一个邮箱作为登录账号&#xff0c;并绑定一个微信号作为管理员。登录账号会得到一个官方提供的appid作为标识码&#xff0c;作为登录账号的凭证。微信小程序登录账号与…
阅读更多...
软件开发项目管理经验总结

软件开发项目管理经验总结

这是我从事软件外包工作以来的项目管理经验的总结&#xff0c;编写文章的目的是为了回顾和总结自己的一些想法&#xff0c;如果其中有不足的地方大家可以一起讨论交流。 项目经理的职责 关于项目经理的工作职责有很多种说法&#xff0c;我自己是这样理解的作为一名项目经理第一…
阅读更多...
管理信息系统开发方法——原型法

管理信息系统开发方法——原型法

管理信息系统开发方法——原型法 引言 管理信息系统(MIS)的设计开发方法是系统开发人员和从事方法论研究人员极为关注的问题。对于MIS项目来说&#xff0c;在系统开发前期用户很难确定和表达对未来的信息系统的全面要求。这是因为用户对系统本身的想法是比较模糊的和不完全确…
阅读更多...
产品开发的生命周期管理

产品开发的生命周期管理

背景 现今我们很多工程师在实际工作中&#xff0c;可能工作许多年都还未能感受到自己所在组织产品或项目的开发流程到底是怎样的&#xff0c;也不清楚自己在团队中为何存在&#xff0c;应该如何表现才能在团队中出类拔萃。 大部分原因就在于我们自己对于组织的结构和流程没有…
阅读更多...
软件开发管理与质量控制

软件开发管理与质量控制

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！ 前 言　　随着市场经济的进一步完善及全球经济一体化进程加快，企事业单位面临着激烈的市…
阅读更多...
JAVA开发管理（敏捷管理具体工作细节）

JAVA开发管理（敏捷管理具体工作细节）

一、站立会议 二、可视化任务管理 三、快速迭代与功能演示验证&#xff0c;同时进行功能驱动开发 四、代码走查和review 五、测试驱动开发 六、持续完成代码合并和功能集成&#xff0c;保障完成的开发功能均可用
阅读更多...
软件架构设计之六：开发管理

软件架构设计之六：开发管理

一、本章要点 1&#xff09;项目的范围、时间、成本 2&#xff09;文档管理工作、配置管理 3&#xff09;软件开发的质量与风险、软件质量属性 4&#xff09;软件的运行与评价 5&#xff09;软件过程改进 二、项目管理概述 1&#xff09;项目是在特定条件下&#xff0c;具…
阅读更多...
软件开发管理规范

软件开发管理规范

1 容器化规范 在应用的容器化改造规范中&#xff0c;需要考虑的主要因素有&#xff1a;容器的高可用性、容器的运维、容器的安全性、容器的多租户隔离、容器的持久化存储等&#xff0c;容器化的过程中需要符合以下规范和要求&#xff1a; (一) 建立清晰的可自动化编译和构建过…
阅读更多...
华为交换机设备运行检查的常用命令汇总

华为交换机设备运行检查的常用命令汇总

1、查看子卡的运行状态&#xff0c;可以用命令display device。此命令可以查看子卡在位信息及状态信息是否正常。 2、查看设备复位情况&#xff0c;可以用命令display reboot-info。 3、查看设备温度&#xff0c;可以用命令display temperature all。各模块当前的温度应该在上下…
阅读更多...
华为交换机查看端口相关信息常用命令，排查故障法宝，转发收藏

华为交换机查看端口相关信息常用命令，排查故障法宝，转发收藏

一、查看接口状态 1、显示接口的运行状态和相关信息 display interface Ethernet brief 查看以太网端口的简要信息&#xff0c;物理端口是否连通&#xff0c;端口是否是全双工&#xff0c;带宽是多少&#xff0c;端口的流入流出的流量百分比。可以排查端口的基本信息&#xff…
阅读更多...
eNSP - 华为交换机常用命令

eNSP - 华为交换机常用命令

eNSP(Enterprise Network Simulation Platform)&#xff1a;企业网络仿真工具 eNSP是一款由华为提供的免费的、可扩展的、图形化操作的网络仿真工具平台&#xff0c;主要对企业网络路由器、交换机进行软件仿真&#xff0c;完美呈现真实设备实景&#xff0c;支持大型网络模拟&am…
阅读更多...
华为交换机基础命令配置

华为交换机基础命令配置

1、要求&#xff1a;(1)、建立vlan (2)、交换机g0/0/1加入vlan <Huawei>sys [Huawei]vlan 11 [Huawei-vlan11]q [Huawei]int g0/0/1 [Huawei-GigabitEthernet0/0/1]port link-type access [Huawei-GigabitEthernet0/0/1]port default vlan 11 [Huawei-GigabitEthernet0/…
阅读更多...
推荐文章

Copyright @ 2022~2023