前言
微信云開發(fā)管理工具是是什么？
提供了一套云開發(fā)的后臺(tái)管理工具，并且提供低代碼開發(fā)工具，開發(fā)者可基于低代碼工具，連接到業(yè)務(wù)數(shù)據(jù)庫，拖拽組件生成前端UI，從而定制各類管理端應(yīng)用。
在這里肯定有同學(xué)會(huì)問它與 云開發(fā)內(nèi)容管理CMS 有什么區(qū)別？
可以理解為更加靈活，可隨意定制的內(nèi)容管理，結(jié)合了微搭使用起來更簡單更靈活。
如果還不知道微搭的同學(xué)可以看下我之前寫過的低代碼平臺(tái)微搭入門教程
體驗(yàn)
目前微信云開發(fā)管理工具還在內(nèi)測當(dāng)中，如需申請(qǐng)內(nèi)測權(quán)限，戳這里申請(qǐng)入口
開通主頁
當(dāng)我們開通權(quán)限成功后
- 下載/更新最新版微信開發(fā)者工具
- 進(jìn)入云開發(fā) IDE 控制臺(tái)
3.選擇「更多」中的「管理工具」
4.打開后會(huì)提示是否打開微搭低代碼插件提示，選擇「允許」
模板體驗(yàn)
從這一步開始就已經(jīng)正式進(jìn)入管理工具了，首先可以看到的就是模板頁面，目前已經(jīng)內(nèi)置了常用的模板，需要那個(gè)模板點(diǎn)擊「查看/安裝工具」即可。
這讓我感覺這就像手機(jī)系統(tǒng)上的App市場，需要什么就安裝什么，只要模板足夠多那么開發(fā)者使用起來能提升不少效率，開發(fā)成本可以得到極大的提升。如果這個(gè)模板市場可以支持開發(fā)者接入發(fā)布，類似 App 開發(fā)者自由發(fā)布 App 市場一樣，還可以做付費(fèi)模板，那么想象空間還是很大的。
我先選擇一個(gè)輪播圖管理測試下效果。
提示：首次加載會(huì)比較慢，需要耐心等待下
安裝成功后，可以獲得管理后臺(tái)地址和管理員賬號(hào)密碼
復(fù)制鏈接輸入賬號(hào)密碼即可進(jìn)入后臺(tái)管理
管理后臺(tái)有個(gè)簡單的 banner 管理后臺(tái)案例數(shù)據(jù)
菜單分別為：輪播圖管理、輪播圖圖片管理
如果需要自定義輪播圖需要現(xiàn)在圖片管理上傳圖片
然后再到輪播圖管理添加
那么小程序如何獲取數(shù)據(jù)呢？我們可以回到云開發(fā) IDE 控制臺(tái)看到數(shù)據(jù)庫多了一張表 cloudbase-sample-banner 里面有三條數(shù)據(jù)
小程序獲取數(shù)據(jù)代碼
wx.cloud
.database()
.collection("cloudbase-sample-banner")
.where({
status: "online",
})
.get({
success: (res) => {
this.setData({
banner: res.data,
});
},
});
編輯模版
那么如果輪播圖模版無法滿足我們的需求怎么辦？
如：輪播圖需要點(diǎn)擊可以跳轉(zhuǎn)顯示公眾號(hào)文章，這個(gè)時(shí)候需要加文章路徑字段
基于以上需求我們來修改一下，首先回到管理工具首頁
點(diǎn)擊輪播圖模版查看詳情，選擇最下方的「編輯工具」
在這里可以對(duì)管理頁面進(jìn)行「頁面設(shè)計(jì)」
所有頁面的數(shù)據(jù)的顯示當(dāng)然離不開數(shù)據(jù)，第二個(gè)菜單就是「數(shù)據(jù)源」
剩下兩個(gè)菜單分別是：素材、應(yīng)用設(shè)置，這兩個(gè)菜單相對(duì)比較簡單就不做過多介紹。
新增字段需要在「數(shù)據(jù)源」中找到「添加輪播圖」然后點(diǎn)擊「編輯」
添加一個(gè)入?yún)?，path 參數(shù)就代表文章路徑（編輯輪播圖信息操作類似）
然后還要修改代碼，在獲取參數(shù)和添加參數(shù)的地方加上 path 這個(gè)屬性
最后點(diǎn)擊「方法測試」添加一條數(shù)據(jù)看下效果
可以通過后臺(tái)管理頁面或云開發(fā) IDE 數(shù)據(jù)庫看到數(shù)據(jù)已經(jīng)添加成功
添加方法已經(jīng)改造完成，接下來就是修改查詢方法，選擇「查詢輪播圖列表」然后在「出參」進(jìn)行添加子集，因?yàn)椴樵償?shù)據(jù)是多條所以是一個(gè)數(shù)組，我們要查詢顯示的是數(shù)據(jù)里面的對(duì)象。（查詢輪播圖信息操作類似，區(qū)別是添加入?yún)⒍皇亲蛹?/span>
添加是什么字段顯示就是什么樣的字段
數(shù)據(jù)源部分搞定了！
接下來就是修改后臺(tái)管理頁面「添加」和「查詢」，切換到「頁面設(shè)計(jì)」菜單
點(diǎn)擊「添加輪播圖」可以看到它的布局結(jié)構(gòu)一個(gè)表單容器里面裝了很多組件
我們文章路徑需要輸入，那么可以從上方拖拽一個(gè)單行輸入組件到布局里面來
然后修改下顯示標(biāo)題和綁定字段
當(dāng)我們編輯完成后可以點(diǎn)擊右上角「預(yù)覽」然后點(diǎn)擊「實(shí)時(shí)預(yù)覽」
這樣就可以單獨(dú)打開 一個(gè)窗口進(jìn)行功能測試，添加修改完成后我們?cè)賮硇薷摹噶斜盹@示」，選中「數(shù)據(jù)表格」組件在「列管理」添加 path 路徑
列表顯示效果
修改完成需要點(diǎn)擊右上角「發(fā)布」即可同步線上版本后臺(tái)。
自定義模版
還有一種情況就是目前的模版無法滿足業(yè)務(wù)需求，比如下面這個(gè)「云數(shù)據(jù)庫管理」模版，為了通用只能顯示json，查詢也沒辦法模糊查詢，那么這個(gè)時(shí)候就需要自定義。
接下來我們自己做個(gè)活動(dòng)列表顯示，然后再做個(gè)模糊查詢，這個(gè)需求可以說是最常用的操作了。
接入數(shù)據(jù)
我們基于「云數(shù)據(jù)庫管理」模版新增一個(gè)查詢活動(dòng)列表頁面，首先切換到「數(shù)據(jù)源」點(diǎn)擊+號(hào)選擇「自定義代碼」
輸入名稱和標(biāo)識(shí)點(diǎn)擊創(chuàng)建
添加方法
查詢代碼，其他操作詳細(xì)可見 cloudbase node sdk 文檔
const cloudbase = require("@cloudbase/node-sdk");
const envId = "<云開發(fā)環(huán)境ID>";
const collectionName = "<云數(shù)據(jù)庫集合名>";
const app = cloudbase.init({
env: envId,
});
const db = app.database();
module.exports = async (event, context) => {
let { pageNo, pageSize } = event;
if (pageNo < 1) pageNo = 1;
// 查詢條件先固定為空，即查詢集合內(nèi)的所有數(shù)據(jù)
const query = db.collection(collectionName).where({});
const recordsRes = await query
.skip((pageNo - 1) * pageSize)
.limit(pageSize)
.get();
const totalRes = await query.count();
return {
records: recordsRes.data,
total: totalRes.total,
};
};
入?yún)⑴渲茫簆ageSize、pageNo
出參配置：使用「方法測試」運(yùn)行測試后再使用出參數(shù)映射即可
數(shù)據(jù)顯示
切換到「頁面設(shè)計(jì)」點(diǎn)擊右上角+號(hào)
拖拽一個(gè)數(shù)據(jù)表格組件到布局中
設(shè)置數(shù)據(jù)表格數(shù)據(jù)來源
列表中數(shù)據(jù)就顯示出來了，但是我們會(huì)發(fā)現(xiàn)其中時(shí)間字段顯示重復(fù)了，以及表頭是字段名，使用者不一定能看懂。
我們可以在屬性中列管理對(duì)不需要的字段進(jìn)行刪除
還可以修改屬性標(biāo)題，效果如下：
建議
1.模版需要更豐富，滿足更多開發(fā)者場景
2.自帶模版業(yè)務(wù)思考不夠全面，過于簡單無法直接
3.自定義模板操作過于復(fù)雜，需要簡化，如：自動(dòng)生成基礎(chǔ)增刪查改代碼
