(1条消息) 微信小程序云开发实践

概述 :

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

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

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

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

创建项目:

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

项目结构如下:

开通云服务:

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

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

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

小程序调用云函数示例:

  1. // Callback 风格调用
  2. wx.cloud.callFunction({
  3. // 要调用的云函数名称
  4. name: 'add',
  5. // 传递给云函数的参数
  6. data: {
  7. x: 1,
  8. y: 2,
  9. },
  10. success: res => {
  11. // output: res.result === 3
  12. },
  13. fail: err => {
  14. // handle error
  15. },
  16. complete: () => {
  17. // ...
  18. }
  19. })
  20. // Promise 风格调用
  21. wx.cloud.callFunction({
  22. // 要调用的云函数名称
  23. name: 'add',
  24. // 传递给云函数的event参数
  25. data: {
  26. x: 1,
  27. y: 2,
  28. }
  29. }).then(res => {
  30. // output: res.result === 3
  31. }).catch(err => {
  32. // handle error
  33. })

小程序调用数据库示例:

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

小程序存储调用示例:

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

云函数的定义:

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

云函数中操作数据库

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

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

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

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

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

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

操作集合:

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

云开发实践:

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

 

1: 需求分析:

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

 

2: 项目构建

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

 

3: 建立集合

 

 

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

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

小程序端>app.js

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

  1. //app.js
  2. App({
  3. onLaunch: function () {
  4. const _this = this
  5. // 初始化云函数
  6. if (!wx.cloud) {
  7. console.error('请使用 2.2.3 或以上的基础库以使用云能力')
  8. } else {
  9. wx.cloud.init({
  10. traceUser: true,
  11. })
  12. }
  13. // 获取用户信息(针对已经授权过的用户,直接获取用户信息)
  14. wx.getSetting({
  15. success: res => {
  16. if (res.authSetting['scope.userInfo']) {
  17. // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
  18. wx.getUserInfo({
  19. success: res => {
  20. _this.globalData.avatarUrl = res.userInfo.avatarUrl
  21. _this.globalData.userInfo = res.userInfo
  22. if (_this.userInfoCallback) {
  23. _this.userInfoCallback()
  24. }
  25. }
  26. })
  27. }
  28. }
  29. })
  30. this.globalData = {
  31. userInfo: {}, // 微信用户信息
  32. userRole: '', // 当前用户角色
  33. registerUser: {}, // 微信用户绑定的用户信息
  34. userindex: '', // 编辑设备和添加设备页面,index索引选择的值name
  35. userindexId: '',// 编辑设备和添加设备页面,index索引选择的值id
  36. currentQuerys: {
  37. type: ['iphone', 'android', 'ble'],
  38. user: []
  39. } // 设备管理筛选框筛选的结果
  40. }
  41. }
  42. })

 

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

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

  1. // 云函数入口文件
  2. const cloud = require('wx-server-sdk')
  3. cloud.init()
  4. // 云函数入口函数
  5. exports.main = async (event, context) => {
  6. const wxContext = cloud.getWXContext()
  7. // 调用数据库获取所有设备列表
  8. const db = cloud.database() // 获取数据库
  9. const _ = db.command // 获取查询指令
  10. const usersCollection = db.collection('users') // 获取users集合
  11. const user = (await usersCollection.where({
  12. open_id: wxContext.OPENID // 根据唯一open_id在user集合中查找已绑定的用户
  13. }).get())
  14. return {
  15. event,
  16. data: user,
  17. openid: wxContext.OPENID,
  18. appid: wxContext.APPID,
  19. unionid: wxContext.UNIONID,
  20. }
  21. }

 

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

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

  1. // 云函数入口文件
  2. const cloud = require('wx-server-sdk')
  3. cloud.init()
  4. // 云函数入口函数
  5. exports.main = async (event, context) => {
  6. const wxContext = cloud.getWXContext()
  7. // 调用数据库获取所有设备列表
  8. const db = cloud.database() // 获取数据库
  9. const _ = db.command // 获取查询指令
  10. const usersCollection = db.collection('users') // 获取users集合
  11. // 查询条件
  12. let query = _.eq(event.id)
  13. //
  14. try {
  15. await usersCollection.doc(event.id).update({
  16. // data 传入需要局部更新的数据
  17. data: {
  18. open_id: wxContext.OPENID
  19. }
  20. })
  21. } catch (e) {
  22. console.log(e)
  23. }
  24. return {
  25. event,
  26. openid: wxContext.OPENID,
  27. appid: wxContext.APPID,
  28. unionid: wxContext.UNIONID,
  29. }
  30. }

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

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

  • 获取全部数据: 由于获取数据库有100条上限的限制 , 需要进行特殊处理
  • 按条件查询数据 : 需要提前拼接好查询语句
  1. // 云函数入口文件
  2. const cloud = require('wx-server-sdk')
  3. cloud.init()
  4. // 云函数入口函数
  5. exports.main = async (event, context) => {
  6. const wxContext = cloud.getWXContext()
  7. // 调用数据库获取所有设备列表
  8. const db = cloud.database() // 获取数据库
  9. const _ = db.command // 获取查询指令
  10. const equipmentCollection = db.collection('equipment') // 获取equipment集合
  11. // 取所有集合中符合条件的数据(因为有默认 limit 100 条的限制,需要做特殊操作)
  12. const MAX_LIMIT = 100
  13. // 先取出集合记录总数
  14. const countResult = await equipmentCollection.count()
  15. const total = countResult.total
  16. // 计算需分几次取
  17. const batchTimes = Math.ceil(total / 100)
  18. // 承载所有读操作的 promise 的数组
  19. const tasks = []
  20. let query = {}
  21. // 封装设备类型查询条件(直接通过reduce直接拼接方法)
  22. query.eq_type = event.queryList['type'].reduce((acc, cur) => {
  23. if (!acc) {
  24. return _.eq(cur)
  25. } else {
  26. return acc.or(_.eq(cur))
  27. }
  28. }, null)
  29. // 用户名查询条件
  30. if (event.queryList['user'].length>0) {
  31. query.eq_user = event.queryList['user'][0]
  32. }
  33. for (let i = 0; i < batchTimes; i++) {
  34. const promise = equipmentCollection.where(query).skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
  35. tasks.push(promise)
  36. }
  37. // 等待所有数据读取完成
  38. const equipmentList = (await Promise.all(tasks)).reduce((acc, cur) => ({
  39. data: acc.data.concat(cur.data),
  40. errMsg: acc.errMsg,
  41. }))
  42. return {
  43. event,
  44. data: equipmentList,
  45. openid: wxContext.OPENID,
  46. appid: wxContext.APPID,
  47. unionid: wxContext.UNIONID,
  48. }
  49. }

 

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

  1. // 云函数入口文件
  2. const cloud = require('wx-server-sdk')
  3. cloud.init()
  4. // 云函数入口函数
  5. exports.main = async (event, context) => {
  6. const wxContext = cloud.getWXContext()
  7. // 调用数据库获取所有设备列表
  8. const db = cloud.database() // 获取数据库
  9. const _ = db.command // 获取查询指令
  10. const equipmentCollection = db.collection('equipment') // 获取equipment集合
  11. try{
  12. await equipmentCollection.doc(event.id).remove()
  13. } catch(e){
  14. console.error(e)
  15. }
  16. return {
  17. event,
  18. openid: wxContext.OPENID,
  19. appid: wxContext.APPID,
  20. unionid: wxContext.UNIONID,
  21. }
  22. }

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

项目截图:

 

赞 (0)

相关推荐