微搭使用笔记(二)微搭低代码平台介绍及基础使用
概述
官網地址： 官網
官方文檔： 官方文檔
FAQ: FAQ
騰訊云微搭低代碼是一個高性能的低代碼開發平臺，用戶可通過拖拽式開發，可視化配置構建 PC Web、H5 和小程序應用。支持打通企業內部數據，輕松實現企業微信管理、工作流、消息推送、用戶權限等能力，實現企業內部系統管理。連接微信生態，和微信支付、騰訊會議，騰訊文檔等騰訊 SaaS 產品深度打通，支持原生小程序，助力企業內外部運營協同和營銷管理。
云開發對應用提供了多個層次抽象（應用模板，自定義高級組件，自定義源碼組件）來幫助開發者進行應用的快速開發。
微搭低碼平臺的優點：
- 可視化編輯器，多場景化應用模板，豐富的組件資源
- 應用服務底座默認直接基于云開發，享受云開發帶來的強大 serverless 能力
- 通過數據源可對接第三方服務
- 標準化的應用組件描述，通過應用 DSL 來描述跨平臺應用（小程序，web）
- 開放的組件模型，可接入第三方組件，以及可拼裝的跨平臺自定義組件
- 整合了企業微信、騰訊文檔、騰訊會議、用戶登錄、微信支付等周邊產品和應用
- 支持微信開發者工具預覽及本地開發，這個就很實用
- 可以通過微搭控制臺很方便的完成小程序的申請及發布
- 提供了應用的導入導出功能，可以很方便的復制應用到另一個認證賬號下
微搭地代碼平臺的限制:
- 團隊版收費優惠后88元每月(不曉得后續會不會調整，反正最開始的時候只有9.9一個月，后面突然就漲價到88元每個月)，只能關聯賬號認證組織或個人下的小程序,最多50個應用，且最多只能添加5個子賬號
- 不支持業務域名配置，對網頁跳轉支持不是很好。
- 圖表組件目前只有四種，需要更多圖表的話需要通過自定義組件實現。
- 企業微信的集成只支持企業版及以上的套餐，對個人和小企業不是很友好
- 團隊版沒有集成代碼版本控制，多人合作不是很順暢
- 組件樣式調整不是很方便，不過這個問題目前騰訊已經做出一部分優化了
- 開發過程中可能會遇到一些奇怪的問題，不過反饋后能及時修正，這個問題在微搭推廣前期比較明顯，目前已經好很多了。
- 小程序的分包目前沒有看到相關支持及文檔。
- 混合開發模式目前騰訊還在開發中，開發完成后可以很方便的遷移老應用到微搭平臺。
產品架構
騰訊云微搭低代碼提供了應用開發的一站式低代碼開發服務，從底層能力迭代至行業級方案，云原生全鏈路支撐為您的應用保駕護航，讓您能夠完全專注于業務場景，小白也可以極速搭建出成熟、專業的應用。
騰訊云微搭的產品架構如下：
微搭工作原理
我們通過開發，編譯，發布，運行等幾個階段來說明微搭低碼平臺的工作原理：
-
微搭低碼編輯器編輯階段本質是生成應用描述配置 [CALS] 文件，應用配置里一般描述了應用的依賴，數據源，應用及組件的自定義樣式，變量及方法（低代碼），頁面映射及頁面里的組件樹，組件的屬性，綁定關系，以及事件處理。
-
編輯器生成的應用描述配置需要通過云開發 lcframework 才能最終轉化成可以在多個平臺運行的實際應用。云開發 lcframework 提供編譯時和運行時兩階段能力。
2.1 編譯時抽象的 DSL json 文件轉成平臺可識別的配置，頁面文件列表，以及組件結構 運行時提供運行框架將編譯產物真正的在各平臺運行起來，運行時框架是個完整的應用框架，提供了應用路由，工具方法以及各種膠水能力
2.2 經過 lcframework 編譯后的應用是個的普通的云開發應用模板，可以直接使用云開發 framework來進行發布部署上線。微搭低碼應用的是用云開發服務本身來作為應用后臺服務，會使用靜態托管/CDN，云數據庫，云函數及云存儲等云開發的能力和資源。 -
靜態資源（web 應用的頁面，腳本，樣式，圖片素材）托管到云開發靜態托管中，數據庫數據源的數據存放到云數據庫中，云函數則會直接使用云開發云函數。
重要的概念
在使用微搭之前，需要理解一些常用的概念，如下表:
| 名稱 | 概念 |
|---|---|
| 控制臺 | 微搭提供的 Web 控制界面，可用于管理環境和資源、應用編輯、數據管理 |
| 環境 | 微搭后端服務單元，每個環境內獨立擁有資源、獨立計費，并且有唯一的環境 ID 標識。環境用于存放應用 |
| 應用 | 可以認為一個小程序、一個H5端就是一個應用，按照場景可以分為自定義應用和模型應用， |
| 自定義應用 | 支持小程序、H5、PC Web 應用。一個微搭賬號可授權發布同主體下的所有小程序，H5和PC應用支持免注冊提供默認域名，也可以自定義域名 |
| 模型應用 | 基于數據模型自動生成增刪查改頁面，適用于管理后臺、企業 OA、審批等場景 |
| 數據模型 | 微搭支持根據業務對象建立數據模型以及管理業務數據。開發者也可以通過自定義數據模型，實現自定義數據邏輯或聯通外部數據 |
| API | 支持打通外部應用數據和接口或使用代碼來實現業務邏輯。開發者可以在應用、工作流中使用 |
| 應用編輯器 | 支持拖拽開發，支持編輯，保存，實時預覽，發布應用流程 |
| 低代碼編輯器 | 需一定的 JavaScript 基礎，可根據業務需求完善應用的邏輯豐富度和復雜度 |
| 數據管理后臺 | 管理標準數據模型的業務數據。自定義數據模型的數據需要進入第三方平臺自行管理 |
| 工作流 | 將一系列業務活動抽象為不同類型的“流程節點”，通過流程編輯器進行連接?？蓪崿F業務流程觸發、流轉、審批、消息通知等操作 |
| 用戶權限 | 可為不同用戶分配不同角色，管控不同用戶可以訪問的應用、查看的頁面、參與的審批流程以及可以操作數據的范圍 |
| 企業工作臺 | 為用戶預置了統一的標準化企業工作臺，包含統一的用戶登錄、消息通知、待辦通知等功能 |
微搭簡單使用介紹
使用微搭的前提條件:
1. 有騰訊云賬號
2. 完成認證，個人或組織
3. 購買微搭套餐，新用戶會贈送一個月，如果是個人學習或者小企業使用的話購買團隊版套餐即可，里面可以創建5個子賬號
4. 如果要發布到小程序，需要認證的個人或者組織下有關聯的小程序，也可以在微搭控制臺申請小程序
完成上述系列操作后就可以進入到微搭控制臺創建應用了，看下控制臺界面:
可以根據自己的場景和需要選擇不同的模式來創建應用，同時官方也提供了諸多場景下的模板供用戶選擇使用，如下圖:
整體來看騰訊做的還是挺不錯的，提供的模板涵蓋了大量的應用場景，如果只是一些簡單頁面的話可以通過模板新建應用后做少量的修改即可完成。
接下來我們看下微搭提供的拖拽生成頁面的編輯器界面及其功能吧。
界面簡單明了，基本看一下就知道是做什么用的，不做過多介紹。
接下來我們簡單看下目前微搭官方提供的所有的組件，如下表:
數據容器
| 組件名稱 | 組件標識 | 組件說明 |
|---|---|---|
| 數據列表 | ListView | 適用于從數據源中查詢多條數據，并將返回列表循環展示的場景，如查詢用戶列表。 |
| 數據詳情 | DataView | 適用于從數據源中查詢一條數據，并將返回數據展示的場景，如查詢訪客預約詳情。 |
| 表單容器 | Form | 作為單行輸入、下拉選擇等各項表單類組件的父級容器，實現數據提交。 |
| 數據表格 | ModelTable | 表格可以清晰地展示二維數據，目前支持PC和H5端 |
布局
| 組件名稱 | 組件標識 | 組件說明 |
|---|---|---|
| 普通容器 | Container | 容器中可放入多個組件，常用于在前端中對頁面布局進行管理的場景。 同時也可以通過容器組件綁定數據對容器內的組件進行循環遍歷 |
| 網格布局 | Grid | Grid網格布局 |
| 分組容器 | List | 用于實現常見的分組列表展示效果 |
| 輪播容器 | Swiper | 用于快速在頁面搭建輪播圖展示效果，并支持輪播圖的跳轉、播放配置 |
| 布局組件 | PageLayout | 頁面布局展示 |
| 滾動容器 | ScrollView | 當組件元素內容長度大于滾動容器時，滾動容器會出滾動條用來對頁面內容進行滑動展示。 |
| 頁頭容器 | Header | 用于展示常見的頁頭展示效果。 |
| 頁腳容器 | Footer | 用于實現常見的頁腳展示效果。 |
| 彈窗 | Modal | 用于實現簡單的彈窗效果 |
導航
| 組件名稱 | 組件標識 | 組件說明 |
|---|---|---|
| Tab欄 | TabBar | 用于實現基本的tab欄交互效果，可自定義Tab欄的類型、樣式以及頁面的跳轉。 |
| 菜單導航 | NavigationBar | 菜單導航 |
| 宮格導航 | NavLayout | 用于宮格布局樣式下的導航項目展示 |
| 頂部導航 | NavBar | 常用于實現H5/小程序頁面的頂部導航效果，預置主頁與返回按鈕。小程序使用時，需在頁面設置-頁面樣式中將導航欄樣式切換為自定義樣式，否則會顯示雙重導航和空白間距 |
| 頂部選項卡 | Tabs | 用于實現常見的選項卡切換效果 |
| 側邊選項卡 | Classification | 用于實現基本的側邊導航交互 |
展示
| 組件名稱 | 組件標識 | 組件說明 |
|---|---|---|
| 分割線 | WdDivider | 用于顯示分割線 |
| 鏈接 | WdLink | 當操作命令需要用戶點擊，用以觸發特定事件的發生，如點擊事件、信息提交等。 |
| 文本 | WdText | 用于展示頁面中的文本、標題、內容等 |
| 氣泡提示 | WdBubble | 用于氣泡的提示(不支持小程序) |
| 循環展示 | Repeater | 循環展示，通常用于列表展示 |
| 圖標 | WdIcon | 可以通過在圖標組件的配置區中選擇微搭提供的預置圖標實現圖標的展示效果并調整圖標顏色等參數，同時圖標組件也支持用戶對圖標進行自定義的上傳。 |
| 圖片 | WdImage | 用于在頁面進行圖片的展示，支持圖片內容及展示方式配置 |
| 按鈕 | WdButton | 當操作命令需要用戶點擊，用以觸發特定事件的發生，如點擊事件、信息提交等 |
| 輪播圖 | Carousel | 輪播圖 |
| 圖文卡片 | Media | 用于快速在頁面構建圖文展示效果 |
| 富文本展示 | RichTextView | 用于對富文本類型的數據進行轉換與展示 |
| 視頻播放 | WedaVideo | 用于視頻播放 |
| 九宮格抽獎 | Lottery | 用于實現簡單的活動抽獎功能 |
| 日歷 | Calendar | 用于日歷展示，如考勤數據、日程展示等。 |
表單
| 組件名稱 | 組件標識 | 組件說明 |
|---|---|---|
| 單行輸入 | FormInput | 文本輸入框 |
| 多行輸入 | FormTextArea | 文本域輸入框 |
| 下拉選擇 | FormSelect | 下拉選擇 |
| 單選 | FormRadio | 單選框 |
| 多選 | FormCheckBox | 多選框 |
| 日期時間選擇 | FormDate | 用于選擇年、年月、年月日時分秒日期。 |
| 時間選擇 | FormTime | 用于選擇具體時分時間，例如22:30。 |
| 圖片上傳 | FormImageUploader | 用于上傳圖片、保存圖片數據等 |
| 文件上傳 | FormUploadFile | 用于上傳文件、保存文件等 |
| 開關 | FormSwitch | 開關組件 |
| 成員選擇 | FormUserTreeSelect | 用于模型應用中成員選擇 |
| 部門選擇 | FormDepartSelect | 用于模型應用中部門選擇 |
| 地圖定位 | FormLocation | 提供表單提交場景下的選點定位功能 |
| 地區選擇 | FormMutiRegion | 用于選擇省市區 |
| 富文本編輯 | FormRichText | 表單場景下的富文本編輯器 |
| 電話輸入 | FormPhone | 文本輸入，添加了電話校驗 |
| URL輸入 | FormUrl | 文本輸入，添加了url校驗 |
| 郵箱輸入 | FormEmail | 文本輸入，添加了郵箱校驗 |
圖表
| 組件名稱 | 組件標識 | 組件說明 |
|---|---|---|
| 統計卡片 | StatisticsCard | 統計卡片組件主要提供報表場景下的指標數據統計并展示功能，支持小程序、H5 和 PC Web 端。 |
| 折線圖 | Line | 折線圖組件主要用于報表場景下展示數據隨時間變化產生的趨勢，支持小程序、H5 和 PC Web 端。 |
| 柱狀圖 | Bar | 柱狀圖組件主要用于報表場景下展示數據之間大小的對比，支持小程序、H5 和 PC Web 端。 |
| 餅圖 | Pie | 餅圖組件主要用于報表場景下表示數據在總體中的占比,支持小程序、H5 和 PC Web 端。 |
以上就是微搭低代碼平臺的簡單介紹、基本使用以及官方組件清單。
總結
以上是生活随笔為你收集整理的微搭使用笔记(二)微搭低代码平台介绍及基础使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Codeforces Round #63
- 下一篇： Codeforces Round #63