騰訊公測雲開發低碼！全網首篇實戰評測

十分鐘真的可以開發一個完整的小程式？雲開發低碼讓您夢想成真！

聽說騰訊的新産品『 雲開發低碼 』即将公測，懷着無比激動的心情，魚皮立刻去官網申請并成功拿到了公測資格，然後使用它開發了一個小程式，并且通過 2020 Techo Park 開發者大會加深了對這項技術的了解。

而就在 2020 年的最後一天下午，公測正式啟動！

說是全網首篇雲開發低碼實戰評測應該一點也不過分！

如果你想輕松快速地制作小程式或移動端網站，一定要花 5 分鐘讀完本文！

下面魚皮帶大家一起吃螃蟹。首先了解什麼是雲開發低碼，然後通過實戰開發『 備忘錄 』小程式來體驗雲開發低碼平台，最後分享個人使用心得，并給出看法和評測。

在認識雲開發低碼前，要先了解『 雲開發 』和『 低碼 』。

雲開發（CloudBase）是雲端一體化的後端雲服務 ，采用 <code>Serverless</code> 架構，無需自己搭建後端，免去了傳統開發和建構中繁瑣的伺服器搭建和運維。同時雲開發提供的靜态托管、指令行工具、<code>Flutter SDK</code> 等能力降低了應用開發的門檻，前端同學也可以輕松開發一個完整的小程式、小遊戲、H5、Web、移動 App 等應用。

通過雲開發提供的雲資料庫、雲存儲、雲函數等功能，開發者無需再關心各種複雜的後端架構和服務運維，隻需要專注于開發業務邏輯，進而大大提升了開發效率。

低碼即低代碼，英文 LowCode，但此處的 Low 可不是低端的意思，而是指在開發中少寫代碼、甚至是不寫代碼（零代碼）。

怎麼能做到少寫代碼甚至不寫代碼來實作功能呢？我們可以想一下自己在程式設計中減少重複代碼的方法。

假設我們要開發一個填表網站，網站上有輸入框、單選框和複選框。

第一次開發表單時，我們可能會複制元件庫的代碼或者完全自己編寫。但之後開發類似頁面時，我們還會從零開始寫一遍麼？肯定是直接把之前的頁面代碼複制粘貼過來修改幾下就好了。

複制粘貼次數多了，你會變得越來越懶，能不能通過工具自動生成重複的代碼呢？當然可以，而且實作一個簡單的代碼生成器并不複雜，可以簡單了解為建立一個包含特定字元串的檔案。

如果嫌這樣的代碼生成器太過簡陋、不夠靈活，我們還可以開發一個可視化界面，需要什麼元件，就在界面上選中，然後動态生成不同的代碼。這其實就是一個低代碼應用。

低代碼的本質就是應用場景的極緻抽象并且模闆化的過程。很多知名的網際網路大公司早就推出了自己的低代碼建構軟體，随着近幾年雲計算、雲原生技術的發展，這些平台也逐漸上雲，開發者甚至不需要下載下傳任何軟體，就能開發出一套系統。

2020 年 11 月 29 日，騰訊正式推出雲開發低代碼平台，幫助越來越多的小白成為 “開發者”。

雲開發低碼（LowCode）是騰訊雲提供的高效、高性能的拖拽式低代碼開發平台，向上連接配接前端的行業業務，向下連接配接雲計算的海量能力，助力企業垂直上雲。

雲開發低碼将繁瑣的底層架構和基礎設施抽象化為圖形界面，通過行業化模闆、拖放式元件和可視化配置快速建構多端應用（不僅僅是微信小程式，還支援 H5 應用、Web 應用等，未來還會支援 App 等更多端，隻需開發一次，可自動部署多端），免去代碼編寫工作，讓開發者能夠完全專注于業務場景。

雲開發低碼以雲開發作為底層支撐，雲原生能力将應用搭建的全鍊路打通，提供高度開放的開發環境，時刻為應用保駕護航。整體架構如下：

雲開發低碼有着重大的意義。

一方面是極大降低開發門檻，通過雲開發低碼平台，哪怕你隻會前端或者後端，甚至是沒有任何技術背景的産品、營運同學，也可以獨立制作應用，人人都是可以是全棧開發者！

另一方面，雲開發低碼能夠提升生産效率，避免重複性工作，開發者可以更加專注于業務邏輯創新、專注架構和算法設計。

舉一個官方提供的例子，粵省事小程式要開發一個 “貧困認證” 功能，低代碼平台可以直接複用基礎元件和已有業務邏輯抽象，代碼行數從 2000 多行降低到 61 行，檔案個數從 42 個縮減為 1 個，傳遞效率提升了至少5倍！

說了那麼多，還是通過一個實戰來帶大家感受一下雲開發低碼的優勢。

開發小程式的目的主要是體驗下雲開發低碼平台，并且希望能夠帶大家快速上手。是以小程式非常簡單，就是一個備忘錄（todoList），能夠記錄和檢視自己的待辦事項。

最終效果如下：

下面手把手帶大家開發這個小程式，并在開發的過程中熟悉雲開發低碼平台的基礎用法。不用擔心自己沒學過前端或者後端，因為在雲開發低碼的世界中，一切都是那麼簡單！

進入騰訊雲開發低碼控制台，建立空白應用。一個應用對應一個小程式或網站。

雲開發為我們提供了雲資料庫和後端接口的能力，可以在控制台建立資料源，對應資料庫的一張表。

點選建立資料源，可以在此填寫資料表名、字段，并配置對該表的操作權限（增删改查等）。

前期工作準備完成，下面開發界面。

颠覆了傳統寫前端代碼來開發小程式界面的方式，雲開發低碼平台支援可視化拖拽式開發。

先進入應用編輯界面：

先來整體認識下應用編輯界面，大緻分為如下幾個區域，後面我們會在開發中認識這些區域的作用。

首先建立界面，我們需要兩個頁面，“首頁” 和 “添加待辦” 頁面。

建立頁面後，我們先開發首頁，就是顯示待辦事項清單，并提供一個跳轉到 “添加待辦” 頁面的按鈕。

直接點選需要的元件，能在元件樹、預覽區和編輯區實時看到頁面的變化：

每個元件都有一些預設的文字，可以編輯元件的内容，點選編輯區對應元件即可修改：

首頁的内容結構就搭建完成啦，整個過程不會超過兩分鐘。而如果寫代碼來開發，即使有現成的元件，也要複制代碼和修改，會額外花費大量時間。

現在的界面看着非常醜，我們需要美化一下頁面的樣式，同樣不需要寫代碼，直接在 “樣式” 中點選輸入值即可。

修改導覽列的文字顔色和背景色：

修改 “暫無待辦” 文字樣式，如間距、字号、對齊：

當然，還可以靈活地自定義樣式代碼：

樣式美化工作就完成了，可以用同樣的方法制作 “添加待辦” 頁面。

但有一個要注意的點，表單輸入項的 key 要和我們最初定義的資料表字段名保持一緻，否則會增加很多額外的工作。

雖然頁面内容和樣式都有了，但是現在的網站隻是一個靜态網站，我們看到的待辦事項資料都是假的，不會發生任何變化。而實際上，我們需要通過後端從資料庫中擷取到資料，然後進行展示。

怎麼将後端取到的資料和前端頁面相關聯呢？

如果靠寫代碼來實作，大家第一時間想到的是 <code>Ajax</code>，即異步 <code>JavaScript</code> 和 <code>XML</code>，一種建立互動式、快速動态網頁應用的網頁開發技術。

而使用雲開發低碼，隻需要動動手指進行配置，就能自動關聯。

先點選頂部操作欄的 “資料源變量”，建立一個 <code>todos</code> 全局變量（在整個應用内都有效），并和之前配置的 <code>todo</code> 資料源相關聯。資料源動作指定為 “查詢清單”，這樣 <code>todos</code> 變量就儲存了資料表 <code>todo</code> 中的全部資料。不用自己寫代碼查詢資料再指派了！

那怎麼在首頁展示 <code>todos</code> 變量中的待辦事項清單呢？

使用配置就能輕松完成。既然是清單，那就是重複添加單個元件，可以配置 for 循環來實作。先給外層視圖元件 <code>View</code> 添加 for 循環展示。

再給視圖元件内的 <code>Cell</code> 元件動态綁定标題、描述等，通過外層的 for 循環，會生成多個 <code>Cell</code>，是以配置内層元件時，隻需要考慮單條資料，綁定方式選擇 “For 循環”。

配置完成，系統為我們生成了一些 <code>string</code> 類型假資料，友善我們檢視效果。

如果已有待辦資料，那 “暫無待辦” 這幾個字就顯得有些礙眼，應該自動隐藏，怎麼實作呢？

其實配置一個 if 條件展示即可，編寫一個條件表達式，當待辦資料為空時才展示：

配置完成後，“暫無待辦” 就消失不見啦！

現在的小程式就是一個花瓶，隻有内容和樣式，中看不中用，點選頁面上的按鈕不會有任何反應，也根本無法添加待辦。

下面我們來讓小程式動起來，通過配置事件實作互動。

先為首頁的 “添加待辦” 按鈕配置點選事件，當使用者點選該按鈕時，跳轉頁面。雲開發低碼平台内置素材庫，提供了大量常用的事件以及執行動作，無需自己編寫代碼。

配置要跳轉到哪個頁面：

配置跳轉詳情

同樣，我們要為 “添加待辦” 頁面的按鈕增加事件，當使用者點選時，向資料庫中插入一條待辦事項資料。但是從素材庫中找不到合适的動作，這時我們就必須自己編寫互動邏輯了。

在彈出的低代碼編輯器中，先在指定頁面新增一個事件處理器。


然後就要編寫處理器的代碼，此處的代碼雖然看着比較多，但其實平台為我們提供了示例應用，直接把其中的代碼複制到此處，替換資料源名稱即可。就是大家喜歡的 <code>Ctrl C</code> + <code>Ctrl V</code>。

然後儲存代碼，指定執行動作，就大功告成了。到目前為止，這是我們唯一需要編寫代碼的地方。然而，小程式已經開發完成了！

開發完小程式後，點選頂部 “預覽釋出”，就可以檢視效果啦！

這裡由于我的小程式坑位已滿，就以網頁 H5 的形式浏覽。等待幾分鐘，會彈出一個可通路的連結，打開就能看到自己的作品了，還支援手機掃碼浏覽。

體驗了騰訊雲開發低碼平台，仿佛又讓我找到了當時用 <code>VS</code>、<code>Qt Creator</code> 拖拖拽拽就開發出 Windows 桌面程式的快感。但是雲開發低碼平台略勝一籌的是，打通并結合低代碼和雲開發的強大能力，前後端都不用自己寫代碼來開發，完全不需要關心伺服器的購置和部署！這種一條龍的開發體驗，真的是非常棒！

而且使用雲低碼平台開發出的應用天然支援跨端，做一個應用，就能夠同時支援小程式和 H5，甚至是其他端的應用。

雖然其他雲服務廠商也有類似的低代碼平台，但是考慮到微信小程式本身是屬于騰訊自家的産品，使用騰訊雲提供的雲開發低碼平台相對最靠譜穩定，和微信生态的連接配接更緊密，可以直接使用微信開放平台的一些功能，遇到問題也更容易定位和解決。

下面再從五個方面簡單評測一下。

毫無疑問，雲開發低碼平台本身的目的就是簡化開發、降低應用開發上手門檻，是以易用性是非常重要的名額。

體驗下來，易用性還是不錯的。整個編輯界面簡明清晰，可以輕松調整元件的順序，設定元件的内容、樣式、互動行為。

雲低碼平台提供了一些現成的應用模闆，直接套用能大大減少工作量。即使不套用模闆，也很簡單。除了一些定制的業務邏輯外，開發一個完整的應用幾乎不需要寫任何代碼，在要編寫代碼的地方也基本都給出了比較友好的提示。是以，我作為一名有一點前後端開發經驗的程式員，即使沒有讀過文檔，也能直接完成開發。

當然，我覺得還有很多可以優化的地方，比如滑鼠懸停預覽區時展示元件的樣式、事件資訊等等。

目前雲開發低代碼平台雖然還處于公測階段，但已經提供了非常多的常用元件，如表單、媒體、資料展示、畫布、微信開放能力等，基本可以滿足開發的需求。此外，還提供了一些面向企業級應用的頁面模闆，開箱即用！

期待未來會提供更多現成的頁面模闆，并且針對具體的業務場景推出一些封裝更好的業務元件。

本來我非常擔心低代碼平台會不會因為大量的簡化和封裝，影響了開發時的靈活性。但是體驗後，我發現自己多慮了。大到應用和頁面資訊，小到每個元件的 <code>CSS</code> 樣式和 <code>JavaScript</code> 代碼，都可以自由定制。甚至還可以靈活地控制頁面的生命周期！

當然，要做到 100% 的靈活還是有些難度的。現在好像還不支援自定義元件和頁面模闆，期待之後開放這種能力。

騰訊雲開發技術和跨端開發架構已經發展了幾個年頭了，比較成熟，但作為一個融合而生的新産品，究竟能不能經受住大項目的考驗，還不得而知，期待後續更多的實踐和資料。

雲開發低碼很好地打通了騰訊雲開發的完整生态，借助雲開發強大的技術能力順勢而生，可謂集大成者。從經典的雲資料庫、雲函數、雲存儲，再到雲托管、内容管理 CMS，這些技術的共生和連接配接使得 1 + 1 &gt; 2，也是我認為雲開發低碼最驚喜的地方。

比如在資料源管理和應用管理界面，我們都能夠看到資料管理背景的身影，即騰訊雲 CMS。可以利用它輕松地管理我們定義的資料源，無需自己搭建管理背景，直接省去搭建一個系統的成本！

總的來說，雲開發低碼平台是一個順應如今快節奏開發時代的産品，真的是解決了傳統開發時的低效、重複等問題，未來可期！

最後，如果你想要進一步學習騰訊雲開發低碼平台，可以點選下方閱讀原文檢視騰訊官方提供的『 快速開發一個雲開發低碼應用 』教程。

假如你的身邊有同學想要制作小程式或移動端網站，一定要将本文分享給他，相信大家都能感受到開發和使用屬于自己的小程式的快樂！

順帶提一句，作為雲開發重度使用者，我已經變得越來越懶了（ 希望有對雲開發感興趣、志同道合的朋友可以一起交流