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