微信小程序云開(kāi)發(fā) 搭建一個(gè)管理小程序
概述 :
開(kāi)發(fā)者可以使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲,無(wú)需搭建服務(wù)器,即可使用云端能力。
云開(kāi)發(fā)為開(kāi)發(fā)者提供完整的云端支持,弱化后端和運(yùn)維概念,無(wú)需搭建服務(wù)器,使用平臺(tái)提供的 API 進(jìn)行核心業(yè)務(wù)開(kāi)發(fā),即可實(shí)現(xiàn)快速上線和迭代,同時(shí)這一能力,同開(kāi)發(fā)者已經(jīng)使用的云服務(wù)相互兼容,并不互斥。
目前提供三大基礎(chǔ)能力支持:
- 云函數(shù):在云端運(yùn)行的代碼,微信私有協(xié)議天然鑒權(quán),開(kāi)發(fā)者只需編寫(xiě)自身業(yè)務(wù)邏輯代碼
- 數(shù)據(jù)庫(kù):一個(gè)既可在小程序前端操作,也能在云函數(shù)中讀寫(xiě)的 JSON 數(shù)據(jù)庫(kù)
- 存儲(chǔ):在小程序前端直接上傳/下載云端文件,在云開(kāi)發(fā)控制臺(tái)可視化管理
創(chuàng)建項(xiàng)目:
新建項(xiàng)目選擇一個(gè)空目錄,填入 AppID(使用云開(kāi)發(fā)能力必須填寫(xiě) AppID),勾選創(chuàng)建 “云開(kāi)發(fā) QuickStart 項(xiàng)目”,點(diǎn)擊創(chuàng)建即可得到一個(gè)展示云開(kāi)發(fā)基礎(chǔ)能力的示例小程序。
項(xiàng)目結(jié)構(gòu)如下:
開(kāi)通云服務(wù):
點(diǎn)擊云開(kāi)發(fā) , 打開(kāi)云開(kāi)發(fā)控制臺(tái),云開(kāi)發(fā)控制臺(tái)提供如下能力(云函數(shù)中對(duì)數(shù)據(jù)庫(kù)的操作等同于在控制臺(tái)直接操作數(shù)據(jù)庫(kù))
- 概覽:查看云開(kāi)發(fā)基礎(chǔ)使用數(shù)據(jù)
- 用戶(hù)管理:查看小程序用戶(hù)信息
- 數(shù)據(jù)庫(kù):管理數(shù)據(jù)庫(kù),可查看、增加、更新、查找、刪除數(shù)據(jù)、管理索引、管理數(shù)據(jù)庫(kù)訪問(wèn)權(quán)限等
- 存儲(chǔ)管理:查看和管理存儲(chǔ)空間
- 云函數(shù):查看云函數(shù)列表、配置、日志和監(jiān)控
- 統(tǒng)計(jì)分析:查看云開(kāi)發(fā)資源具體使用統(tǒng)計(jì)信息
基礎(chǔ)方法(基本涵蓋小程序云開(kāi)發(fā)常用的定義和方法):
小程序調(diào)用云函數(shù)示例:
// Callback 風(fēng)格調(diào)用 wx.cloud.callFunction({ // 要調(diào)用的云函數(shù)名稱(chēng) name: 'add', // 傳遞給云函數(shù)的參數(shù) data: { x: 1, y: 2, }, success: res => { // output: res.result === 3 }, fail: err => { // handle error }, complete: () => { // ... } }) // Promise 風(fēng)格調(diào)用 wx.cloud.callFunction({ // 要調(diào)用的云函數(shù)名稱(chēng) name: 'add', // 傳遞給云函數(shù)的event參數(shù) data: { x: 1, y: 2, } }).then(res => { // output: res.result === 3 }).catch(err => { // handle error })
小程序調(diào)用數(shù)據(jù)庫(kù)示例:
// 1. 獲取數(shù)據(jù)庫(kù)引用 const db = wx.cloud.database() // 2. 構(gòu)造查詢(xún)語(yǔ)句 // collection 方法獲取一個(gè)集合的引用 // where 方法傳入一個(gè)對(duì)象,數(shù)據(jù)庫(kù)返回集合中字段等于指定值的 JSON 文檔。API 也支持高級(jí)的查詢(xún)條件(比如大于、小于、in 等),具體見(jiàn)文檔查看支持列表 // get 方法會(huì)觸發(fā)網(wǎng)絡(luò)請(qǐng)求,往數(shù)據(jù)庫(kù)取數(shù)據(jù) db.collection('books').where({ publishInfo: { country: 'United States' } }).get({ success: function(res) { // 輸出 [{ "title": "The Catcher in the Rye", ... }] console.log(res) } })
小程序存儲(chǔ)調(diào)用示例:
// 讓用戶(hù)選擇一張圖片 wx.chooseImage({ success: chooseResult => { // 將圖片上傳至云存儲(chǔ)空間 wx.cloud.uploadFile({ // 指定上傳到的云路徑 cloudPath: 'my-photo.png', // 指定要上傳的文件的小程序臨時(shí)文件路徑 filePath: chooseResult.tempFilePaths[0], // 成功回調(diào) success: res => { console.log('上傳成功', res) }, }) }, })
云函數(shù)的定義:
// index.js 是入口文件,云函數(shù)被調(diào)用時(shí)會(huì)執(zhí)行該文件導(dǎo)出的 main 方法 // event 包含了調(diào)用端(小程序端)調(diào)用該函數(shù)時(shí)傳過(guò)來(lái)的參數(shù),同時(shí)還包含了可以通過(guò) getWXContext 方法獲取的用戶(hù)登錄態(tài) `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 + b return { OPENID, APPID, sum } }
云函數(shù)中操作數(shù)據(jù)庫(kù)
以下調(diào)用獲取默認(rèn)環(huán)境的數(shù)據(jù)庫(kù)的引用:
const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database()
假設(shè)有一個(gè)環(huán)境名為 test,用做測(cè)試環(huán)境,那么可以如下獲取測(cè)試環(huán)境數(shù)據(jù)庫(kù):
const cloud = require('wx-server-sdk') cloud.init() const testDB = cloud.database({ env: 'test' })
也可以通過(guò) init 傳入默認(rèn)環(huán)境的方式使得獲取數(shù)據(jù)庫(kù)時(shí)默認(rèn)是默認(rèn)環(huán)境數(shù)據(jù)庫(kù):
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集合
云開(kāi)發(fā)實(shí)踐:
(使用小程序云開(kāi)發(fā)實(shí)現(xiàn)一個(gè)可以增刪改查的設(shè)備管理平臺(tái))
1: 需求分析:
- 設(shè)備管理現(xiàn)狀: 部門(mén)有大量安卓/蘋(píng)果測(cè)試機(jī)和測(cè)試硬件設(shè)備 , 當(dāng)前管理現(xiàn)狀混亂 , 管理員使用紙質(zhì)表格和excel對(duì)每次的出借情況進(jìn)行記錄 , 當(dāng)有同事需要測(cè)試設(shè)備的時(shí)候 , 需要聯(lián)系管理員 , 管理員查閱表格 , 找到最后借用人進(jìn)行協(xié)調(diào) , 并登記在冊(cè)
- 管理痛點(diǎn): 管理員需要通過(guò)翻閱借用記錄表去了解設(shè)備現(xiàn)狀 , 并協(xié)調(diào)資源 , 增加了工作量 , 普通員工無(wú)法知道設(shè)備出借現(xiàn)狀 , 獲取設(shè)備環(huán)節(jié)復(fù)雜;
- 考勤管理現(xiàn)狀: 管理員通過(guò)excel表格匯總考勤情況 , 并逐月發(fā)送到員工郵箱 , 員工需要下載csv文件去查看考勤
- 考勤管理痛點(diǎn): 對(duì)于員工 , 通過(guò)查看excel十分不便
- 需求總結(jié): 普通員工通過(guò)查看設(shè)備現(xiàn)狀 , 找到可以狀態(tài)的設(shè)備 , 并匯報(bào)管理員 , 管理員通過(guò)小程序切換設(shè)備狀態(tài) , 綁定使用人 ; 管理員逐月導(dǎo)入考勤數(shù)據(jù) , 員工可通過(guò)小程序查看個(gè)人考勤情況;
2: 項(xiàng)目構(gòu)建
- ui庫(kù)使用iview weapp
- 小程序端(前端)對(duì)數(shù)據(jù)庫(kù)的操作權(quán)限是嚴(yán)格按照控制臺(tái)中配置的權(quán)限 , 云函數(shù)則擁有所有權(quán)限(云函數(shù)中對(duì)數(shù)據(jù)庫(kù)的操作等同于在云開(kāi)發(fā)控制臺(tái)中進(jìn)行數(shù)據(jù)庫(kù)操作),所以本項(xiàng)目中所有的關(guān)于數(shù)據(jù)庫(kù)的操作都將在云函數(shù)中處理 , 小程序端只作為視圖層 , 并對(duì)無(wú)權(quán)限的界面和操作進(jìn)行視覺(jué)隔離
3: 建立集合
通過(guò)云函數(shù)控制臺(tái)建立需要的集合 , 并將excel/json文件導(dǎo)入到對(duì)應(yīng)的集合, 也可以直接手動(dòng)建立
4: 核心功能的實(shí)現(xiàn)(以云函數(shù)操作數(shù)據(jù)庫(kù)為主)
小程序端>app.js
初始化云函數(shù) , 獲取已授權(quán)用戶(hù)信息 , 定義需要的全局?jǐn)?shù)據(jù)
//app.js App({ onLaunch: function () { const _this = this // 初始化云函數(shù) if (!wx.cloud) { console.error('請(qǐng)使用 2.2.3 或以上的基礎(chǔ)庫(kù)以使用云能力') } else { wx.cloud.init({ traceUser: true, }) } // 獲取用戶(hù)信息(針對(duì)已經(jīng)授權(quán)過(guò)的用戶(hù),直接獲取用戶(hù)信息) wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已經(jīng)授權(quán),可以直接調(diào)用 getUserInfo 獲取頭像昵稱(chēng),不會(huì)彈框 wx.getUserInfo({ success: res => { _this.globalData.avatarUrl = res.userInfo.avatarUrl _this.globalData.userInfo = res.userInfo if (_this.userInfoCallback) { _this.userInfoCallback() } } }) } } }) this.globalData = { userInfo: {}, // 微信用戶(hù)信息 userRole: '', // 當(dāng)前用戶(hù)角色 registerUser: {}, // 微信用戶(hù)綁定的用戶(hù)信息 userindex: '', // 編輯設(shè)備和添加設(shè)備頁(yè)面,index索引選擇的值name userindexId: '',// 編輯設(shè)備和添加設(shè)備頁(yè)面,index索引選擇的值id currentQuerys: { type: ['iphone', 'android', 'ble'], user: [] } // 設(shè)備管理篩選框篩選的結(jié)果 } } })
云函數(shù) > login (云函數(shù)條件查詢(xún)?cè)茢?shù)據(jù)庫(kù))
以小程序open_id為查詢(xún)條件 , 在云函數(shù)user集合中查找綁定該open_id的數(shù)據(jù) , 為空表示該微信賬號(hào)未綁定用戶(hù)名
// 云函數(shù)入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函數(shù)入口函數(shù) exports.main = async (event, context) => { const wxContext = cloud.getWXContext() // 調(diào)用數(shù)據(jù)庫(kù)獲取所有設(shè)備列表 const db = cloud.database() // 獲取數(shù)據(jù)庫(kù) const _ = db.command // 獲取查詢(xún)指令 const usersCollection = db.collection('users') // 獲取users集合 const user = (await usersCollection.where({ open_id: wxContext.OPENID // 根據(jù)唯一open_id在user集合中查找已綁定的用戶(hù) }).get()) return { event, data: user, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } }
云函數(shù) > register (云函數(shù)修改數(shù)據(jù)庫(kù)數(shù)據(jù))
對(duì)于未綁定的微信號(hào) , 需要將用戶(hù)選中的用戶(hù)名與當(dāng)前微信open_id綁定 , 完成注冊(cè)
// 云函數(shù)入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函數(shù)入口函數(shù) exports.main = async (event, context) => { const wxContext = cloud.getWXContext() // 調(diào)用數(shù)據(jù)庫(kù)獲取所有設(shè)備列表 const db = cloud.database() // 獲取數(shù)據(jù)庫(kù) const _ = db.command // 獲取查詢(xún)指令 const usersCollection = db.collection('users') // 獲取users集合 // 查詢(xún)條件 let query = _.eq(event.id) // try { await usersCollection.doc(event.id).update({ // data 傳入需要局部更新的數(shù)據(jù) data: { open_id: wxContext.OPENID } }) } catch (e) { console.log(e) } return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } }
云函數(shù) > getEquipmentList (云函數(shù)查詢(xún)?nèi)繑?shù)據(jù) , 云函數(shù)按條件查詢(xún)數(shù)據(jù)庫(kù))
獲取設(shè)備數(shù)據(jù)的時(shí)候存在多種情況
- 獲取全部數(shù)據(jù): 由于獲取數(shù)據(jù)庫(kù)有100條上限的限制 , 需要進(jìn)行特殊處理
- 按條件查詢(xún)數(shù)據(jù) : 需要提前拼接好查詢(xún)語(yǔ)句
// 云函數(shù)入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函數(shù)入口函數(shù) exports.main = async (event, context) => { const wxContext = cloud.getWXContext() // 調(diào)用數(shù)據(jù)庫(kù)獲取所有設(shè)備列表 const db = cloud.database() // 獲取數(shù)據(jù)庫(kù) const _ = db.command // 獲取查詢(xún)指令 const equipmentCollection = db.collection('equipment') // 獲取equipment集合 // 取所有集合中符合條件的數(shù)據(jù)(因?yàn)橛心J(rèn) limit 100 條的限制,需要做特殊操作) const MAX_LIMIT = 100 // 先取出集合記錄總數(shù) const countResult = await equipmentCollection.count() const total = countResult.total // 計(jì)算需分幾次取 const batchTimes = Math.ceil(total / 100) // 承載所有讀操作的 promise 的數(shù)組 const tasks = [] let query = {} // 封裝設(shè)備類(lèi)型查詢(xún)條件(直接通過(guò)reduce直接拼接方法) query.eq_type = event.queryList['type'].reduce((acc, cur) => { if (!acc) { return _.eq(cur) } else { return acc.or(_.eq(cur)) } }, null) // 用戶(hù)名查詢(xún)條件 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) } // 等待所有數(shù)據(jù)讀取完成 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, } }
云函數(shù) > removeEquipement (云函數(shù)刪除集合數(shù)據(jù))
// 云函數(shù)入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函數(shù)入口函數(shù) exports.main = async (event, context) => { const wxContext = cloud.getWXContext() // 調(diào)用數(shù)據(jù)庫(kù)獲取所有設(shè)備列表 const db = cloud.database() // 獲取數(shù)據(jù)庫(kù) const _ = db.command // 獲取查詢(xún)指令 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, } }
項(xiàng)目截圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 獲取二維碼實(shí)例詳解
- 微信小程序 PHP生成帶參數(shù)二維碼
- 微信小程序動(dòng)態(tài)生成二維碼的實(shí)現(xiàn)代碼
- nodejs獲取微信小程序帶參數(shù)二維碼實(shí)現(xiàn)代碼
- 微信小程序?qū)⒆址啥S碼圖片的操作方法
- 微信小程序?qū)崿F(xiàn)獲取小程序碼和二維碼java接口開(kāi)發(fā)
- 微信小程序云開(kāi)發(fā)詳細(xì)教程
- 微信小程序云開(kāi)發(fā)使用方法新手初體驗(yàn)
- 微信小程序云開(kāi)發(fā)之新手環(huán)境配置
- 微信小程序云開(kāi)發(fā)如何使用云函數(shù)生成二維碼
相關(guān)文章
JS實(shí)現(xiàn)圖片元素轉(zhuǎn)BASE64編碼的簡(jiǎn)單示例
在Web開(kāi)發(fā)中,我們經(jīng)常需要將圖片轉(zhuǎn)換為Base64格式,以便在不依賴(lài)外部資源的情況下直接在HTML中使用,在這篇文章中,我將向您展示如何使用JavaScript將圖片元素轉(zhuǎn)BASE64編碼,需要的朋友可以參考下2023-12-12js實(shí)現(xiàn)html滑動(dòng)圖片拼圖驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)html滑動(dòng)圖片拼圖驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06JS實(shí)現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果
這篇文章主要介紹了JS實(shí)現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果,涉及JavaScript針對(duì)頁(yè)面元素的遍歷及樣式動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10跟我學(xué)習(xí)javascript的垃圾回收機(jī)制與內(nèi)存管理
跟我學(xué)習(xí)javascript的垃圾回收機(jī)制與內(nèi)存管理,感興趣的小伙伴們可以參考一下2015-11-11javascript隨機(jī)將第一個(gè)dom中的圖片添加到第二個(gè)div中示例
此代碼的是一個(gè)簡(jiǎn)單的例子,將第一個(gè)div中的五張圖片中,提取隨機(jī)兩張顯示到第二個(gè)div中,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-10-10基于JavaScript怎么實(shí)現(xiàn)讓歌詞滾動(dòng)播放
各種音樂(lè)播放器上都有一個(gè)自動(dòng)滾動(dòng)播放歌詞的功能,當(dāng)前滾動(dòng)到的歌詞會(huì)高亮居中顯示,即使歌詞被換行也能正常居中,那么這個(gè)功能基于JavaScript怎么實(shí)現(xiàn)讓歌詞滾動(dòng)播放呢?感興趣的朋友一起看看吧2015-11-11