微信小程序云開發搭建一個管理小程序

2019-11-19 11:32:11

字體：大中小

來源：轉載

供稿：網友

概述 :

開發者可以使用云開發開發微信小程序、小游戲，無需搭建服務器，即可使用云端能力。

云開發為開發者提供完整的云端支持，弱化后端和運維概念，無需搭建服務器，使用平臺提供的 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} = eventconst {OPENID, APPID} = cloud.getWXContext() // 這里獲取到的 openId 和 appId 是可信的const sum = a + b return {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.jsApp({ 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.userInfo  if (_this.userInfoCallback) {  _this.userInfoCallback()  }  }  }) } } }) this.globalData = { userInfo: {}, // 微信用戶信息 userRole: '', // 當前用戶角色 registerUser: {}, // 微信用戶綁定的用戶信息 userindex: '', // 編輯設備和添加設備頁面,index索引選擇的值name userindexId: '',// 編輯設備和添加設備頁面,index索引選擇的值id currentQuerys: { 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, }}

項目截圖: