Ui2Code+ChatGPT助力低代碼搭建 | 京東雲技術團隊詳情 - unicode,人工智能,低代碼,小程序京東雲開發者博客

前言

低代碼開發平台（LCDP），是低代碼或無代碼通過快速搭建配置的方式完成一個應用程序的開發與上線，可視化低代碼就是可視化的DSL，它的優點更多的是來源可視化，相對的，它的侷限性也還是來源於可視化，複雜的業務邏輯用低代碼可能會更加複雜。低代碼應該是特定領域問題的簡化和抽象，如果只是單純將原有的編碼工作轉換為 GUI 的模式，並沒有多大意義。

背景

隨着京東微信域業務與騰訊合作的加深，作為流量的載體，小程序的需求日益增多，自17年開始 c-1、c-2、c-3 等部門都有各自的業務小程序，至今為止集團內上萬個微信小程序，如此多的小程序是否存在共性，是否可以互相賦能，答案是肯定的，基於種種考慮，我們開始了小程序搭建方面的調研與規劃

架構設計

1、思考

搭建的本質是提效，那麼到底是低學習成本快速上手，垂直於某條業務線好，還是足夠通用可以滿足任何業務場景，但學習成本高更好

太通用：接入成本高、學習成本高、開發成本高

太垂直：接入效率高、學習成本低、擴展能力差

2、功能

1、零代碼或低代碼快速生成應用

2、提供可視化界面進行開發

3、通過拖拽+配置實現項目搭建

3、分層架構+iOC架構

分層，系統分成若干個水平層，每一層都有清晰的角色和分工，不需要知道其他層的細節，層與層之間通過接口 & 協議通信

iOC，簡單來説就是把複雜系統分解成相互合作的對象，這些對象類通過封裝以後，內部實現對外部是透明的，從而降低了解決問題的複雜度，而且可以靈活地被重用和擴展。IOC理論提出的觀點大體是這樣的：藉助於“第三方”實現具有依賴關係的對象之間的解耦

4、流程編排

理想的流程編排的節點應該是抽象程度更高的、內聚的業務節點，來表達業務流程的流轉。然而這些節點的設計和開發其實是一件非常有挑戰性的事情。

5、約定大於配置

前端在整個研發流程中處於下游，如果上游的需求描述，UI 設計，後端接口協議沒有統一的規範，大量的工作將是因規範不統一導致的各種兼容性處理，無複用與抽象可言，為了更加簡化搭建流程，減少搭建成本，實現開箱即用的效果，需求規範、設計規範、組件規範、接口規範必不可少，今後整個前端的提效和發展將更加前置

6、搭建需求的取捨

搭建平台要做的是減法，要思考不該做什麼，平台本身不是要100%支持所有的需求，那樣我們相當於將code轉換成GUI而已，這樣的平台毫無價值，不如直接代碼開發，我們要解決的是80%的常用業務場景，那對於剩下的20%我們有兩種方式可以支持

1.出碼，搭建後的產物以源代碼交付，進行二次開發

2.業務組件，對於組件類的複雜交互或數據處理，我們可以通過開發業務組件與搭建平台結合去完成整個需求的搭建

平台介紹

即時設計平台是一個即時搭建c端樓層的開發平台，支持通過導入relay設計稿url完成Ui2Code，在此基礎上完成前端可視化搭建，同時支持通過ChatGPT完成一句話需求，搭建後的樓層自動同步ihub樓層市場，提供到通天塔、哥倫布等搭建平台使用

一、功能

即時設計提供畫布內容類型（block、image、text、list）增加、刪除、層級調整、複製等，樣式配置，數據接口配置、狀態管理配置、內容與數據綁定、點擊交互和曝光交互，Relay設計稿導入轉換成包含樣式的畫布內容，畫布內容的即時預覽，畫布內容的二維碼小程序預覽，代碼查看並支持二次編輯，ChatGPT 自然語言對話操作頁面功能調整等。

頁面結構主要為上下兩結構，分為頂部菜單區和主體區，其中主題區為四列結構，分別為“選擇和繪製工具”區、“結構、樓層、小組件、我的”水平選項卡標籤頁區、“畫布和預覽”區、“元素的樣式、交互、綁定功能”垂直選項卡標籤頁區。

二、頂部菜單區

菜單區分左、中、右佈局

•左側為頁面標題，即“即時設計”

•中間為畫布操作按鈕區

•右側為畫布功能入口按鈕區

頁面標題區

頁面標題內容為“即時設計”

操作按鈕區

操作按鈕包含如下：

•回退：支持頁面中的選中、新增、編輯、刪除等操作回退上一步，最多回退20步；

•重做：支持回退操作後，撤銷重做；

•清空：支持清空整個畫布內容，即恢復至新建畫布狀態；

功能入口按鈕區

包含“數據源”、“Relay導入”、“預覽”圖標功能入口按鈕。

•數據源：點擊出現頁面級彈窗，支持配置數據源和狀態管理等功能；

•Relay導入：點擊出現頁面級彈窗，支持輸入Relay設計稿鏈接，通過點擊確認按鈕，快速將指定設計稿導入到當前畫布中，包含位置、樣式等內容；

•預覽：點擊出現頁面級彈窗，展示預覽二維碼，通過手機微信掃碼二維碼，可以在預覽小程序中預覽當前畫布內容；

•保存：點擊出現頁面級彈窗，內容包含名稱、分類、描述信息、上傳預覽圖或點擊生成預覽圖、發佈到私有或市場、線上環境同步等，通過點擊提交，會保存當前畫布到（公共）樓層或“我的”個人裏，方便下次打開或編輯

數據源

數據源頁面級彈窗內容包含數據請求和狀態管理兩部分內容。

數據請求包含請求列表、請求信息配置、響應信息配置三列。

•請求列表，包含上下兩個分組如直出接口和交互接口，列表支持編輯接口名、複製接口、刪除接口、新建接口、刷新接口數據等功能；

•請求信息，包含請求鏈接、請求前置條件配置、接口類型選項（是否為跨域接口，即非xxx.jd.com 域名）、屬性參數（Query、Header、Body等）信息配置，其中屬性參數支持添加字符串、數字、布爾值、數組、對象類型的數據，支持編輯、從狀態管理選取值、從頁面參數選取值，支持導出到素材分類等功能

•響應信息，包含Body數據返回內容展示、Header信息展示、數據處理配置，其中數據處理當前僅支持“數據源數組key數據”處理過濾，當子屬性key支持輸入“_index”，代表對數組索引過濾，當子屬性key支持輸入“_length”，操作符選“-%”，比較值填數字，代表對過濾後的數組長度取比較值的整數倍；

狀態管理支持配置全局數據，支持字符串、數字、布爾值、數組、對象類型的數據，方便在數據接口、綁定、交互使用，同時支持導出到樣式和素材區域。

三、左側繪製工具區（畫布）

該區域，是畫布區支持的繪製工具類型，包含有“選擇（select）”、“矩形（block）”、“圖片（image）”、“文本（text）”、“列表（list）”5種類型。

•選擇（select），點擊選擇後，可以在畫布區域點擊選中畫布元素，拖拽內容位置及大小；

•矩形（block），點擊選擇後，可以在畫布區域通過點擊不鬆開並移動，拉出一個有寬高大小和位置的矩形（block）元素；

•圖片（image），點擊選擇後，可以在畫布區域通過點擊不鬆開並移動，拉出一個有寬高大小和位置的圖片（image）元素；

•文本（text），點擊選擇後，可以在畫布區域通過點擊不鬆開並移動，拉出一個有寬高大小和位置的文本（text）元素；

•列表（list），點擊選擇後，可以在畫布區域通過點擊不鬆開並移動，拉出一個有寬高大小和位置的列表（list）元素；

四、左側選項卡標籤頁

當前區域包含4個水平選項卡標籤頁，分別為“結構”、“樓層”、“小組件”、“我的”。

結構（畫布）

本結構，是畫布區域內元素所對應的樹形結構的層次結構列表。

•默認新建狀態下，只有一個名為Root的根節點，通過Relay導入或在在畫布區繪製元素，會在當前樹形結構中添加節點，其中節點間層級關係即節點的包含關係；

•節點行內容包含有摺疊/展開圖標、類型圖標、類型名或編輯名、顯隱（眼睛圖標）按鈕、刪除（垃圾桶圖標）按鈕

•節點類型包含根（Root）、矩形（block）、圖片（image）、文本（text）、列表（list）、組件（component）等

•節點默認名為該類型的首字母大寫單詞，即 Root、Block、Image、Text、List、Component等

•非Root節點支持雙擊編輯名稱

•非Root節點，點擊選中後，在名稱右側顯示右對齊的顯隱（眼睛圖標）按鈕和刪除（垃圾桶圖標）按鈕，點擊顯隱按鈕切換當前元素及子元素的顯示和隱藏狀態，點擊刪除按鈕則在樹結構中刪除當前節點（支持點擊菜單區的撤銷按鈕恢復）

•非Root節點支持選中後，在樹結構中拖拽位置，調整節點所在樹結構中的層級

•非葉節點左側有摺疊/展開的黑色三角圖標，點擊該圖片切換節點子集的摺疊或展開狀態

•非Root節點，右鍵節點彈出操作列表，操作列表包含刪除、複製、創建小組件、創建分組、取消分組等功能

•通過右鍵節點複製功能，自動在被複制節點同級兄弟節點新增複製的節點，僅名稱追加“-複製”，其他內容均相同

樓層（已發佈公共樓層）

樓層是展示已保存併發布到市場的公共樓層組件，並根據既定的一級分類（圖文、廣告、商品、導航、權益），及二級分類（平鋪、橫滑、輪播、嵌套、浮層、無限下拉、吸頂、吸底、側邊欄、未分類）分別展示，一級分類通過水平選項卡標籤頁分組，二級分類是在各個一級分類下，通過兩列平鋪的展示方式，展示樓層的預覽圖和名稱。

小組件（已發佈公共小組件）

小組件是展示已保存併發布到市場的公共小組件，並根據既定的一級分類（圖文、廣告、商品、導航、權益），及圖片的二級分類（圖文、按鈕、蒙層），商品二級分類（商品卡片、商品圖、商品名稱、商品價格、商品標籤、商品按鈕），權益二級分類（優惠券、京豆、紅包）分別展示，一級分類通過水平選項卡標籤頁分組，二級分類是在各個一級分類下，通過兩列平鋪的展示方式，展示小組件的預覽圖和名稱。

我的

“我的”標籤頁，是展示當前登陸用户已保存的樓層和小組件列表。

五、中心畫布區

本區域分上下兩區域：頂部功能按鈕區和畫布區。

頂部功能按鈕區，是水平居中的按鈕區，包含有：

•標註：點擊可切換啓用或關閉畫布編輯區的元素輔助虛線，默認開啓；

•代碼：點擊可切換從頁面底部彈出抽屜區域，展示當前畫布內容生成的微信小程序代碼目錄及文件內容，默認關閉；

•預覽：默認開啓，開啓時，畫布區展示左右結構的同等大小的編輯區和預覽區；點擊切換關閉時，預覽區不展示，畫布編輯區放大2倍；

•靜態：默認開啓，開啓時，預覽區展示靜態內容數據，即畫布編輯區展示的數據內容；關閉時，預覽區針對已綁定動態數據的內容部分元素，展示綁定的數據，如數據源接口數據、狀態管理數據；

畫布區分左右結構的編輯區和預覽區。

畫布編輯區

當前區域，是通過Relay導入或手動選中畫布工具在畫布區繪製出的內容區域。

在該區域，可以有如下操作

•通過選擇繪製工具-矩形/圖片/文本/列表，在畫布區域點擊不鬆開並移動，拉出一個有寬高大小和位置的元素；

•通過選擇繪製工具-選擇（select），在畫布區域點擊已有內容元素，切換選中的元素/拖拽絕對定位元素位置/點擊元素右下角支持放大縮小元素，右鍵元素支持刪除/複製/創建小組件/創建分組/取消分組功能；

•點擊選中元素，如果該元素是絕對定位元素，可以通過長按拖動調整該元素在畫布中的位置；

•右鍵畫布元素，彈出右鍵自定義的菜單列表，包含刪除、複製、創建小組件、創建分組和取消分組按鈕功能；

畫布預覽區

當前區域，是畫布區內容在 PC 端模擬實際渲染的展示區域，供即時預覽和生成預覽圖使用。

特點：

•當預覽功能開啓時，編輯區和預覽區同等大小並左右佈局排列；關閉時，預覽區不展示，畫布編輯區放大2倍；

•當靜態功能開啓時，預覽區展示靜態內容數據，即畫布編輯區展示的數據內容；關閉時，預覽區針對已綁定動態數據的內容部分元素，展示綁定的數據，如數據源接口數據、狀態管理數據；

六、右側功能區

功能區包括樣式配置區、交互配置區、綁定配置區、素材配置區，以靠右垂直選項卡形式展示。

•當選中Root節點時，功能區四個區域均展示，內容都為相關配置的導出項配置；

•當選中非Root節點時，僅展示式配置區、交互配置區、綁定配置區；

樣式（配置區）

樣式配置區展示選中的節點元素的主要樣式信息的配置列表和導出配置按鈕。

其中導出配置按鈕位於標題“樣式”右側，點擊後展開抽屜展示無分組的所有樣式列表，支持勾選和編輯別名，勾選後會在選中Root或Component組件節點時，樣式區展示已勾選的導出配置項，供快速對指定配置修改值；

其中樣式列表內容實用分組方式展示，具體包含：

•寬高和位置：寬度（width）、高度（height）、（絕對定位）距離頂部距離（top）、（絕對定位）距離左側距離（left）；

•邊距：padding-left、padding-right、padding-top、padding-bottom、margin-left、margin-right、margin-top、margin-bottom；

•佈局：顯示方式（display）、定位方式（position）、元素超出（overflow）

•圖片：圖片地址（background-image）、圖片大小（background-size）、圖片位置X（background-position-x）、圖片位置Y（background-position-y）、圖片重複（background-position）、圖片高度自適應

•字體：字體（font-family）、字重（font-weight）、字體顏色（color）、字體大小（font-size）、字體行高（line-height）、字體對齊（text-align）、內容（text）、字體修飾線（text-decoration）、字體換行規則（white-space）、字體顯示行數（webkit-line-clamp）

•填充：背景色（background-color）、背景漸變（background）

•描邊：邊寬（border-width）、圓角（border-radius）、邊色（border-color）、樣式（border-style）

•陰影：陰影x偏移量（shadowOffsetX）、陰影y偏移量（shadowOffsetY）、陰影模糊半徑（shadowBlurRadius）、陰影擴散半徑（shadowSpreadRadius）、陰影顏色（shadowColor）、陰影方向（shadowInset）

•其他：透明度（opacity）、z-index、自定義

交互（配置區）

交互區展示選中的節點元素的點擊交互/曝光交互功能和導出配置按鈕。

其中導出配置按鈕位於標題“交互”右側，點擊後展開抽屜展示無分組的所有跳轉列表，支持勾選和編輯別名，勾選後會在選中Root或Component組件節點時，交互區展示已勾選的導出配置項，供快速對指定配置修改值；

其中點擊交互/曝光交互以水平選項卡形式佈局，點擊交互和曝光交互均支持添加事件，共同可添加的事件有前置條件、跳轉、接口調用、狀態管理、toast、重新渲染，僅點擊交互可添加的事件有點擊埋點，僅曝光交互可添加的事件有曝光埋點。

•點擊埋點/曝光埋點：支持配置事件id（eventId）、事件參數（eventParams）；

•前置條件：是其他類型事件的條件配置，當通過時，繼續執行下一個事件，否則跳過下一個事件；該配置內容包括對狀態管理/數據源/頁面參數數據值比較返回結果；

•跳轉：支持跳轉 h5/原生頁/其他小程序原生頁，支持配置小程序 appId、跳轉路徑、路徑參數；

•接口調用：通過選取數據源已建的數據接口，支持修改該接口下的參數，支持在接口調用成功後，根據返回的接口數據，設置狀態管理/數據源數據值；

•狀態管理：配置更新狀態管理中數據值；

•toast：配置提示信息和展示時間；

•重新渲染：配置是否在當前事件環節觸發樓層重新渲染；

綁定（配置區）

綁定區內容包括數據綁定、數據處理和顯隱綁定。

•數據綁定：當選中文本（text）、圖片（image）時，支持綁定數據源接口字段和狀態管理中的字段；

•數據處理：當選中文本（text）時，支持數據綁定後的特殊情況處理，如價格字段內容拆分顯示，勾選整數，綁定數據只展示整數部分，勾選小數，綁定數據只展示小數部分，勾選補2位0，綁定數據對小數部分補0展示；

•顯隱綁定：通過添加條件，選取數據源/狀態管理/頁面參數，在樓層被使用並運行時，對所選值與填入的比較值比較，得出該節點元素顯示或隱藏的控制結果；

素材（配置區）

素材區是在選中Root節點時展示並可點擊展開，其內容展示的是數據源或狀態管理配置中，勾選導出項的配置項，在本區域單獨展示，供快速修改某些高頻改動值使用

博客 / 詳情