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