低程式碼實戰 | 1分鐘,從0到1建立一個簡單的微應用

語言: CN / TW / HK

首先,我們來聊聊什麼是低程式碼?⤵

低程式碼(Low-Code)從字面意思,低就是少,在一般標準或平均程度之下,那低程式碼自然就是少程式碼,也就是說不需要付出太多的程式碼成本。

如果想要 從0實現 一個可以在Web中訪問的網頁,那最好要掌握的技術必然是html、Css、JavaScript,大部分情況下僅僅有了以上三種技術的加持是不夠,為了讓所生產出來的Web頁面有著高維護和高靈活性,一般要根據網頁中的功能進行模組劃分,以及確定頁面的整個層次、結構等,其次再去考慮UI等設計類問題。

通過上述描述可以發現,實現一個Web頁面的學習成本,對於一個並不長期從事網頁開發的使用者來說,這種開發方式所帶來的學習成本是較大的;而低程式碼則不同,它不需要付出太多的程式碼成本,換句話說, 即使零程式碼基礎也可以輕鬆構建Web頁面。

低程式碼的優點,上手速度快、開發效率高,不需要去考慮高學習成本所帶來的負擔。有著頁面視覺化的加持,網頁的佈局、設計、UI等盡在掌握中。通過 托拉拽 的方式,可以在 最短時間內實現最初的想法和設計 ,從而不用將過多的精力投入至程式設計中。

火了很久的低程式碼,但要是隻知道“低程式碼是什麼”,豈不太無趣了。

下面,我們將從0到1,以循序漸進的方式利用優維低程式碼平臺建立一個簡單的微應用,並推送到開發環境,檢視執行效果,讓您快速上手優維低程式碼平臺核心功能

步驟一:建立微應用

首先在Visual Builder的右上角點選新建微應用專案,填寫微應用的相關資訊。

包括 應用圖示應用名稱應用ID 、還有 應用描述

點選儲存,一個空白的微應用就建立好了。

關於Visual Builder

VisualBuilder,是優維低程式碼平臺的前端開發模組。

提供的功能包括 App的專案定義與初始化、前端選單編排、頁面路由設計、UI元素佈局、頁面視覺化預覽、頁面構件模板管理、頁面構件庫、後端介面Provider文件、圖示庫、插畫庫 等等。

在VisualBuilder中,頁面的整體開發通過JSON、YAML或者是表單的方式進行配置, 使用者無需精通HTML、CSS、JavaScript 等程式語言, 也無需掌握NPM、webpack 等前端工程軟體,即可輕鬆開發可實時執行的真實頁面。

VisualBuilder內建的構件庫包含數百個常用的頁面構件,在搭建頁面時可以 實現非常高效的工程複用 ,同時通過 快速的編排配置 可以讓構件呈現不同的頁面效果以滿足不同業務場景。

VisualBuilder常在需求邏輯澄清,原型細節溝通、最終頁面交付等多種業務場景下使用。

步驟二:為微應用新建一個頁面

點選進入剛才建立的微應用,進入 User Flow 介面,在這裡,我們可以為微應用新建路由,每個路由對應一個頁面。

這裡,我們給微應用 新增一個首頁

填入 路由別名、路徑 等相關資訊,點選儲存。

一個空白的頁面就建立成功了。

步驟三:對首頁進行簡單的編輯

我們可以修改頁面的標題。

在主畫板選中micro view構件,在彈出的抽屜裡,我們可以看到有一個Page Title的屬性。

修改這個屬性,就可以修改頁面標題。

步驟四:為首頁新增簡單的展示元素

在右上角,我們可以找到構件庫,從構件庫裡面 搜尋結果構件 ,點選並拖動構件到主畫板中的content插槽,也就是主頁面的內容區。

修改  customTitle  status 屬性 ,點選儲存。

那麼頁面的基本配置就到此結束了。

點選【構建並推送】按鈕,進行構建。構建成功後,再點選【預覽】按鈕,我們就可以看到頁面的具體效果了。

一個簡單的頁面就建立好了。

有疑問加站長微信聯絡(非本文作者)