前言

低代碼開(kāi)發(fā)平臺(tái)（LCDP），是低代碼或無(wú)代碼通過(guò)快速搭建配置的方式完成一個(gè)應(yīng)用程序的開(kāi)發(fā)與上線，可視化低代碼就是可視化的DSL，它的優(yōu)點(diǎn)更多的是來(lái)源可視化，相對(duì)的，它的局限性也還是來(lái)源于可視化，復(fù)雜的業(yè)務(wù)邏輯用低代碼可能會(huì)更加復(fù)雜。低代碼應(yīng)該是特定領(lǐng)域問(wèn)題的簡(jiǎn)化和抽象，如果只是單純將原有的編碼工作轉(zhuǎn)換為 GUI 的模式，并沒(méi)有多大意義。

背景

隨著京東微信域業(yè)務(wù)與騰訊合作的加深，作為流量的載體，小程序的需求日益增多，自17年開(kāi)始 c-1、c-2、c-3 等部門都有各自的業(yè)務(wù)小程序，至今為止集團(tuán)內(nèi)上萬(wàn)個(gè)微信小程序，如此多的小程序是否存在共性，是否可以互相賦能，答案是肯定的，基于種種考慮，我們開(kāi)始了小程序搭建方面的調(diào)研與規(guī)劃。

架構(gòu)設(shè)計(jì)

1、思考

搭建的本質(zhì)是提效，那么到底是低學(xué)習(xí)成本快速上手，垂直于某條業(yè)務(wù)線好，還是足夠通用可以滿足任何業(yè)務(wù)場(chǎng)景，但學(xué)習(xí)成本高更好

太通用：接入成本高、學(xué)習(xí)成本高、開(kāi)發(fā)成本高

太垂直：接入效率高、學(xué)習(xí)成本低、擴(kuò)展能力差

2、功能

1、零代碼或低代碼快速生成應(yīng)用

2、提供可視化界面進(jìn)行開(kāi)發(fā)

3、通過(guò)拖拽 配置實(shí)現(xiàn)項(xiàng)目搭建

3、分層架構(gòu) iOC架構(gòu)

分層，系統(tǒng)分成若干個(gè)水平層，每一層都有清晰的角色和分工，不需要知道其他層的細(xì)節(jié)，層與層之間通過(guò)接口 & 協(xié)議通信

iOC，簡(jiǎn)單來(lái)說(shuō)就是把復(fù)雜系統(tǒng)分解成相互合作的對(duì)象，這些對(duì)象類通過(guò)封裝以后，內(nèi)部實(shí)現(xiàn)對(duì)外部是透明的，從而降低了解決問(wèn)題的復(fù)雜度，而且可以靈活地被重用和擴(kuò)展。IOC理論提出的觀點(diǎn)大體是這樣的：借助于“第三方”實(shí)現(xiàn)具有依賴關(guān)系的對(duì)象之間的解耦

4、流程編排

理想的流程編排的節(jié)點(diǎn)應(yīng)該是抽象程度更高的、內(nèi)聚的業(yè)務(wù)節(jié)點(diǎn)，來(lái)表達(dá)業(yè)務(wù)流程的流轉(zhuǎn)。然而這些節(jié)點(diǎn)的設(shè)計(jì)和開(kāi)發(fā)其實(shí)是一件非常有挑戰(zhàn)性的事情。

5、約定大于配置

前端在整個(gè)研發(fā)流程中處于下游，如果上游的需求描述，UI 設(shè)計(jì)，后端接口協(xié)議沒(méi)有統(tǒng)一的規(guī)范，大量的工作將是因規(guī)范不統(tǒng)一導(dǎo)致的各種兼容性處理，無(wú)復(fù)用與抽象可言，為了更加簡(jiǎn)化搭建流程，減少搭建成本，實(shí)現(xiàn)開(kāi)箱即用的效果，需求規(guī)范、設(shè)計(jì)規(guī)范、組件規(guī)范、接口規(guī)范必不可少，今后整個(gè)前端的提效和發(fā)展將更加前置

6、搭建需求的取舍

搭建平臺(tái)要做的是減法，要思考不該做什么，平臺(tái)本身不是要100%支持所有的需求，那樣我們相當(dāng)于將code轉(zhuǎn)換成GUI而已，這樣的平臺(tái)毫無(wú)價(jià)值，不如直接代碼開(kāi)發(fā)，我們要解決的是80%的常用業(yè)務(wù)場(chǎng)景，那對(duì)于剩下的20%我們有兩種方式可以支持

1.出碼，搭建后的產(chǎn)物以源代碼交付，進(jìn)行二次開(kāi)發(fā)

2.業(yè)務(wù)組件，對(duì)于組件類的復(fù)雜交互或數(shù)據(jù)處理，我們可以通過(guò)開(kāi)發(fā)業(yè)務(wù)組件與搭建平臺(tái)結(jié)合去完成整個(gè)需求的搭建

平臺(tái)介紹

?即時(shí)設(shè)計(jì)平臺(tái)是一個(gè)即時(shí)搭建c端樓層的開(kāi)發(fā)平臺(tái)，支持通過(guò)導(dǎo)入relay設(shè)計(jì)稿url完成Ui2Code，在此基礎(chǔ)上完成前端可視化搭建，同時(shí)支持通過(guò)ChatGPT完成一句話需求，搭建后的樓層自動(dòng)同步ihub樓層市場(chǎng)，提供到通天塔、哥倫布等搭建平臺(tái)使用

一、功能

即時(shí)設(shè)計(jì)提供畫布內(nèi)容類型（block、image、text、list）增加、刪除、層級(jí)調(diào)整、復(fù)制等，樣式配置，數(shù)據(jù)接口配置、狀態(tài)管理配置、內(nèi)容與數(shù)據(jù)綁定、點(diǎn)擊交互和曝光交互，Relay設(shè)計(jì)稿導(dǎo)入轉(zhuǎn)換成包含樣式的畫布內(nèi)容，畫布內(nèi)容的即時(shí)預(yù)覽，畫布內(nèi)容的二維碼小程序預(yù)覽，代碼查看并支持二次編輯，ChatGPT 自然語(yǔ)言對(duì)話操作頁(yè)面功能調(diào)整等。

頁(yè)面結(jié)構(gòu)主要為上下兩結(jié)構(gòu)，分為頂部菜單區(qū)和主體區(qū)，其中主題區(qū)為四列結(jié)構(gòu)，分別為“選擇和繪制工具”區(qū)、“結(jié)構(gòu)、樓層、小組件、我的”水平選項(xiàng)卡標(biāo)簽頁(yè)區(qū)、“畫布和預(yù)覽”區(qū)、“元素的樣式、交互、綁定功能”垂直選項(xiàng)卡標(biāo)簽頁(yè)區(qū)。

?二、頂部菜單區(qū)

菜單區(qū)分左、中、右布局

?左側(cè)為頁(yè)面標(biāo)題，即“即時(shí)設(shè)計(jì)”

?中間為畫布操作按鈕區(qū)

?右側(cè)為畫布功能入口按鈕區(qū)

??頁(yè)面標(biāo)題區(qū)

頁(yè)面標(biāo)題內(nèi)容為“即時(shí)設(shè)計(jì)”

操作按鈕區(qū)

操作按鈕包含如下：

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

?重做：支持回退操作后，撤銷重做；

?清空：支持清空整個(gè)畫布內(nèi)容，即恢復(fù)至新建畫布狀態(tài)；

功能入口按鈕區(qū)

包含“數(shù)據(jù)源”、“Relay導(dǎo)入”、“預(yù)覽”圖標(biāo)功能入口按鈕。

?數(shù)據(jù)源：點(diǎn)擊出現(xiàn)頁(yè)面級(jí)彈窗，支持配置數(shù)據(jù)源和狀態(tài)管理等功能；

?Relay導(dǎo)入：點(diǎn)擊出現(xiàn)頁(yè)面級(jí)彈窗，支持輸入Relay設(shè)計(jì)稿鏈接，通過(guò)點(diǎn)擊確認(rèn)按鈕，快速將指定設(shè)計(jì)稿導(dǎo)入到當(dāng)前畫布中，包含位置、樣式等內(nèi)容；

?預(yù)覽：點(diǎn)擊出現(xiàn)頁(yè)面級(jí)彈窗，展示預(yù)覽二維碼，通過(guò)手機(jī)微信掃碼二維碼，可以在預(yù)覽小程序中預(yù)覽當(dāng)前畫布內(nèi)容；

?保存：點(diǎn)擊出現(xiàn)頁(yè)面級(jí)彈窗，內(nèi)容包含名稱、分類、描述信息、上傳預(yù)覽圖或點(diǎn)擊生成預(yù)覽圖、發(fā)布到私有或市場(chǎng)、線上環(huán)境同步等，通過(guò)點(diǎn)擊提交，會(huì)保存當(dāng)前畫布到（公共）樓層或“我的”個(gè)人里，方便下次打開(kāi)或編輯

數(shù)據(jù)源

數(shù)據(jù)源頁(yè)面級(jí)彈窗內(nèi)容包含數(shù)據(jù)請(qǐng)求和狀態(tài)管理兩部分內(nèi)容。

數(shù)據(jù)請(qǐng)求包含請(qǐng)求列表、請(qǐng)求信息配置、響應(yīng)信息配置三列。

?請(qǐng)求列表，包含上下兩個(gè)分組如直出接口和交互接口，列表支持編輯接口名、復(fù)制接口、刪除接口、新建接口、刷新接口數(shù)據(jù)等功能；

?請(qǐng)求信息，包含請(qǐng)求鏈接、請(qǐng)求前置條件配置、接口類型選項(xiàng)（是否為跨域接口，即非xxx.jd.com 域名）、屬性參數(shù)（Query、Header、Body等）信息配置，其中屬性參數(shù)支持添加字符串、數(shù)字、布爾值、數(shù)組、對(duì)象類型的數(shù)據(jù)，支持編輯、從狀態(tài)管理選取值、從頁(yè)面參數(shù)選取值，支持導(dǎo)出到素材分類等功能

?響應(yīng)信息，包含Body數(shù)據(jù)返回內(nèi)容展示、Header信息展示、數(shù)據(jù)處理配置，其中數(shù)據(jù)處理當(dāng)前僅支持“數(shù)據(jù)源數(shù)組key數(shù)據(jù)”處理過(guò)濾，當(dāng)子屬性key支持輸入“_index”，代表對(duì)數(shù)組索引過(guò)濾，當(dāng)子屬性key支持輸入“_length”，操作符選“-%”，比較值填數(shù)字，代表對(duì)過(guò)濾后的數(shù)組長(zhǎng)度取比較值的整數(shù)倍；

狀態(tài)管理支持配置全局?jǐn)?shù)據(jù)，支持字符串、數(shù)字、布爾值、數(shù)組、對(duì)象類型的數(shù)據(jù)，方便在數(shù)據(jù)接口、綁定、交互使用，同時(shí)支持導(dǎo)出到樣式和素材區(qū)域。

??三、左側(cè)繪制工具區(qū)（畫布）

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

?選擇（select），點(diǎn)擊選擇后，可以在畫布區(qū)域點(diǎn)擊選中畫布元素，拖拽內(nèi)容位置及大??；

?矩形（block），點(diǎn)擊選擇后，可以在畫布區(qū)域通過(guò)點(diǎn)擊不松開(kāi)并移動(dòng)，拉出一個(gè)有寬高大小和位置的矩形（block）元素；

?圖片（image），點(diǎn)擊選擇后，可以在畫布區(qū)域通過(guò)點(diǎn)擊不松開(kāi)并移動(dòng)，拉出一個(gè)有寬高大小和位置的圖片（image）元素；

?文本（text），點(diǎn)擊選擇后，可以在畫布區(qū)域通過(guò)點(diǎn)擊不松開(kāi)并移動(dòng)，拉出一個(gè)有寬高大小和位置的文本（text）元素；

?列表（list），點(diǎn)擊選擇后，可以在畫布區(qū)域通過(guò)點(diǎn)擊不松開(kāi)并移動(dòng)，拉出一個(gè)有寬高大小和位置的列表（list）元素；

??四、左側(cè)選項(xiàng)卡標(biāo)簽頁(yè)

當(dāng)前區(qū)域包含4個(gè)水平選項(xiàng)卡標(biāo)簽頁(yè)，分別為“結(jié)構(gòu)”、“樓層”、“小組件”、“我的”。

??結(jié)構(gòu)（畫布）

本結(jié)構(gòu)，是畫布區(qū)域內(nèi)元素所對(duì)應(yīng)的樹形結(jié)構(gòu)的層次結(jié)構(gòu)列表。

?默認(rèn)新建狀態(tài)下，只有一個(gè)名為Root的根節(jié)點(diǎn)，通過(guò)Relay導(dǎo)入或在在畫布區(qū)繪制元素，會(huì)在當(dāng)前樹形結(jié)構(gòu)中添加節(jié)點(diǎn)，其中節(jié)點(diǎn)間層級(jí)關(guān)系即節(jié)點(diǎn)的包含關(guān)系；

?節(jié)點(diǎn)行內(nèi)容包含有折疊/展開(kāi)圖標(biāo)、類型圖標(biāo)、類型名或編輯名、顯隱（眼睛圖標(biāo)）按鈕、刪除（垃圾桶圖標(biāo)）按鈕

?節(jié)點(diǎn)類型包含根（Root）、矩形（block）、圖片（image）、文本（text）、列表（list）、組件（component）等

?節(jié)點(diǎn)默認(rèn)名為該類型的首字母大寫單詞，即 Root、Block、Image、Text、List、Component等

?非Root節(jié)點(diǎn)支持雙擊編輯名稱

?非Root節(jié)點(diǎn)，點(diǎn)擊選中后，在名稱右側(cè)顯示右對(duì)齊的顯隱（眼睛圖標(biāo)）按鈕和刪除（垃圾桶圖標(biāo)）按鈕，點(diǎn)擊顯隱按鈕切換當(dāng)前元素及子元素的顯示和隱藏狀態(tài)，點(diǎn)擊刪除按鈕則在樹結(jié)構(gòu)中刪除當(dāng)前節(jié)點(diǎn)（支持點(diǎn)擊菜單區(qū)的撤銷按鈕恢復(fù)）

?非Root節(jié)點(diǎn)支持選中后，在樹結(jié)構(gòu)中拖拽位置，調(diào)整節(jié)點(diǎn)所在樹結(jié)構(gòu)中的層級(jí)

?非葉節(jié)點(diǎn)左側(cè)有折疊/展開(kāi)的黑色三角圖標(biāo)，點(diǎn)擊該圖片切換節(jié)點(diǎn)子集的折疊或展開(kāi)狀態(tài)

?非Root節(jié)點(diǎn)，右鍵節(jié)點(diǎn)彈出操作列表，操作列表包含刪除、復(fù)制、創(chuàng)建小組件、創(chuàng)建分組、取消分組等功能

?通過(guò)右鍵節(jié)點(diǎn)復(fù)制功能，自動(dòng)在被復(fù)制節(jié)點(diǎn)同級(jí)兄弟節(jié)點(diǎn)新增復(fù)制的節(jié)點(diǎn)，僅名稱追加“-復(fù)制”，其他內(nèi)容均相同

??樓層（已發(fā)布公共樓層）

樓層是展示已保存并發(fā)布到市場(chǎng)的公共樓層組件，并根據(jù)既定的一級(jí)分類（圖文、廣告、商品、導(dǎo)航、權(quán)益），及二級(jí)分類（平鋪、橫滑、輪播、嵌套、浮層、無(wú)限下拉、吸頂、吸底、側(cè)邊欄、未分類）分別展示，一級(jí)分類通過(guò)水平選項(xiàng)卡標(biāo)簽頁(yè)分組，二級(jí)分類是在各個(gè)一級(jí)分類下，通過(guò)兩列平鋪的展示方式，展示樓層的預(yù)覽圖和名稱。

小組件（已發(fā)布公共小組件）

小組件是展示已保存并發(fā)布到市場(chǎng)的公共小組件，并根據(jù)既定的一級(jí)分類（圖文、廣告、商品、導(dǎo)航、權(quán)益），及圖片的二級(jí)分類（圖文、按鈕、蒙層），商品二級(jí)分類（商品卡片、商品圖、商品名稱、商品價(jià)格、商品標(biāo)簽、商品按鈕），權(quán)益二級(jí)分類（優(yōu)惠券、京豆、紅包）分別展示，一級(jí)分類通過(guò)水平選項(xiàng)卡標(biāo)簽頁(yè)分組，二級(jí)分類是在各個(gè)一級(jí)分類下，通過(guò)兩列平鋪的展示方式，展示小組件的預(yù)覽圖和名稱。

我的

“我的”標(biāo)簽頁(yè)，是展示當(dāng)前登陸用戶已保存的樓層和小組件列表。

五、中心畫布區(qū)

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

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

?標(biāo)注：點(diǎn)擊可切換啟用或關(guān)閉畫布編輯區(qū)的元素輔助虛線，默認(rèn)開(kāi)啟；

?代碼：點(diǎn)擊可切換從頁(yè)面底部彈出抽屜區(qū)域，展示當(dāng)前畫布內(nèi)容生成的微信小程序代碼目錄及文件內(nèi)容，默認(rèn)關(guān)閉；

?預(yù)覽：默認(rèn)開(kāi)啟，開(kāi)啟時(shí)，畫布區(qū)展示左右結(jié)構(gòu)的同等大小的編輯區(qū)和預(yù)覽區(qū)；點(diǎn)擊切換關(guān)閉時(shí)，預(yù)覽區(qū)不展示，畫布編輯區(qū)放大2倍；

?靜態(tài)：默認(rèn)開(kāi)啟，開(kāi)啟時(shí)，預(yù)覽區(qū)展示靜態(tài)內(nèi)容數(shù)據(jù)，即畫布編輯區(qū)展示的數(shù)據(jù)內(nèi)容；關(guān)閉時(shí)，預(yù)覽區(qū)針對(duì)已綁定動(dòng)態(tài)數(shù)據(jù)的內(nèi)容部分元素，展示綁定的數(shù)據(jù)，如數(shù)據(jù)源接口數(shù)據(jù)、狀態(tài)管理數(shù)據(jù)；

畫布區(qū)分左右結(jié)構(gòu)的編輯區(qū)和預(yù)覽區(qū)。

畫布編輯區(qū)

當(dāng)前區(qū)域，是通過(guò)Relay導(dǎo)入或手動(dòng)選中畫布工具在畫布區(qū)繪制出的內(nèi)容區(qū)域。

在該區(qū)域，可以有如下操作

?通過(guò)選擇繪制工具-矩形/圖片/文本/列表，在畫布區(qū)域點(diǎn)擊不松開(kāi)并移動(dòng)，拉出一個(gè)有寬高大小和位置的元素；

?通過(guò)選擇繪制工具-選擇（select），在畫布區(qū)域點(diǎn)擊已有內(nèi)容元素，切換選中的元素/拖拽絕對(duì)定位元素位置/點(diǎn)擊元素右下角支持放大縮小元素，右鍵元素支持刪除/復(fù)制/創(chuàng)建小組件/創(chuàng)建分組/取消分組功能；

?點(diǎn)擊選中元素，如果該元素是絕對(duì)定位元素，可以通過(guò)長(zhǎng)按拖動(dòng)調(diào)整該元素在畫布中的位置；

?右鍵畫布元素，彈出右鍵自定義的菜單列表，包含刪除、復(fù)制、創(chuàng)建小組件、創(chuàng)建分組和取消分組按鈕功能；

畫布預(yù)覽區(qū)

當(dāng)前區(qū)域，是畫布區(qū)內(nèi)容在 PC 端模擬實(shí)際渲染的展示區(qū)域，供即時(shí)預(yù)覽和生成預(yù)覽圖使用。

特點(diǎn)：

?當(dāng)預(yù)覽功能開(kāi)啟時(shí)，編輯區(qū)和預(yù)覽區(qū)同等大小并左右布局排列；關(guān)閉時(shí)，預(yù)覽區(qū)不展示，畫布編輯區(qū)放大2倍；

?當(dāng)靜態(tài)功能開(kāi)啟時(shí)，預(yù)覽區(qū)展示靜態(tài)內(nèi)容數(shù)據(jù)，即畫布編輯區(qū)展示的數(shù)據(jù)內(nèi)容；關(guān)閉時(shí)，預(yù)覽區(qū)針對(duì)已綁定動(dòng)態(tài)數(shù)據(jù)的內(nèi)容部分元素，展示綁定的數(shù)據(jù)，如數(shù)據(jù)源接口數(shù)據(jù)、狀態(tài)管理數(shù)據(jù)；

六、右側(cè)功能區(qū)

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

?當(dāng)選中Root節(jié)點(diǎn)時(shí)，功能區(qū)四個(gè)區(qū)域均展示，內(nèi)容都為相關(guān)配置的導(dǎo)出項(xiàng)配置；

?當(dāng)選中非Root節(jié)點(diǎn)時(shí)，僅展示式配置區(qū)、交互配置區(qū)、綁定配置區(qū)；

??樣式（配置區(qū)）

樣式配置區(qū)展示選中的節(jié)點(diǎn)元素的主要樣式信息的配置列表和導(dǎo)出配置按鈕。

其中導(dǎo)出配置按鈕位于標(biāo)題“樣式”右側(cè)，點(diǎn)擊后展開(kāi)抽屜展示無(wú)分組的所有樣式列表，支持勾選和編輯別名，勾選后會(huì)在選中Root或Component組件節(jié)點(diǎn)時(shí)，樣式區(qū)展示已勾選的導(dǎo)出配置項(xiàng)，供快速對(duì)指定配置修改值；

其中樣式列表內(nèi)容實(shí)用分組方式展示，具體包含：

?寬高和位置：寬度（width）、高度（height）、（絕對(duì)定位）距離頂部距離（top）、（絕對(duì)定位）距離左側(cè)距離（left）；

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

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

?圖片：圖片地址（background-image）、圖片大?。╞ackground-size）、圖片位置X（background-position-x）、圖片位置Y（background-position-y）、圖片重復(fù)（background-position）、圖片高度自適應(yīng)

?字體：字體（font-family）、字重（font-weight）、字體顏色（color）、字體大?。╢ont-size）、字體行高（line-height）、字體對(duì)齊（text-align）、內(nèi)容（text）、字體修飾線（text-decoration）、字體換行規(guī)則（white-space）、字體顯示行數(shù)（webkit-line-clamp）

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

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

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

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

??交互（配置區(qū)）

交互區(qū)展示選中的節(jié)點(diǎn)元素的點(diǎn)擊交互/曝光交互功能和導(dǎo)出配置按鈕。

其中導(dǎo)出配置按鈕位于標(biāo)題“交互”右側(cè)，點(diǎn)擊后展開(kāi)抽屜展示無(wú)分組的所有跳轉(zhuǎn)列表，支持勾選和編輯別名，勾選后會(huì)在選中Root或Component組件節(jié)點(diǎn)時(shí)，交互區(qū)展示已勾選的導(dǎo)出配置項(xiàng)，供快速對(duì)指定配置修改值；

其中點(diǎn)擊交互/曝光交互以水平選項(xiàng)卡形式布局，點(diǎn)擊交互和曝光交互均支持添加事件，共同可添加的事件有前置條件、跳轉(zhuǎn)、接口調(diào)用、狀態(tài)管理、toast、重新渲染，僅點(diǎn)擊交互可添加的事件有點(diǎn)擊埋點(diǎn)，僅曝光交互可添加的事件有曝光埋點(diǎn)。

?點(diǎn)擊埋點(diǎn)/曝光埋點(diǎn)：支持配置事件id（eventId）、事件參數(shù)（eventParams）；

?前置條件：是其他類型事件的條件配置，當(dāng)通過(guò)時(shí)，繼續(xù)執(zhí)行下一個(gè)事件，否則跳過(guò)下一個(gè)事件；該配置內(nèi)容包括對(duì)狀態(tài)管理/數(shù)據(jù)源/頁(yè)面參數(shù)數(shù)據(jù)值比較返回結(jié)果；

?跳轉(zhuǎn)：支持跳轉(zhuǎn) h5/原生頁(yè)/其他小程序原生頁(yè)，支持配置小程序 appId、跳轉(zhuǎn)路徑、路徑參數(shù)；

?接口調(diào)用：通過(guò)選取數(shù)據(jù)源已建的數(shù)據(jù)接口，支持修改該接口下的參數(shù)，支持在接口調(diào)用成功后，根據(jù)返回的接口數(shù)據(jù)，設(shè)置狀態(tài)管理/數(shù)據(jù)源數(shù)據(jù)值；

?狀態(tài)管理：配置更新?tīng)顟B(tài)管理中數(shù)據(jù)值；

?toast：配置提示信息和展示時(shí)間；

?重新渲染：配置是否在當(dāng)前事件環(huán)節(jié)觸發(fā)樓層重新渲染；

??綁定（配置區(qū)）

綁定區(qū)內(nèi)容包括數(shù)據(jù)綁定、數(shù)據(jù)處理和顯隱綁定。

?數(shù)據(jù)綁定：當(dāng)選中文本（text）、圖片（image）時(shí)，支持綁定數(shù)據(jù)源接口字段和狀態(tài)管理中的字段；

?數(shù)據(jù)處理：當(dāng)選中文本（text）時(shí)，支持?jǐn)?shù)據(jù)綁定后的特殊情況處理，如價(jià)格字段內(nèi)容拆分顯示，勾選整數(shù)，綁定數(shù)據(jù)只展示整數(shù)部分，勾選小數(shù)，綁定數(shù)據(jù)只展示小數(shù)部分，勾選補(bǔ)2位0，綁定數(shù)據(jù)對(duì)小數(shù)部分補(bǔ)0展示；

?顯隱綁定：通過(guò)添加條件，選取數(shù)據(jù)源/狀態(tài)管理/頁(yè)面參數(shù)，在樓層被使用并運(yùn)行時(shí)，對(duì)所選值與填入的比較值比較，得出該節(jié)點(diǎn)元素顯示或隱藏的控制結(jié)果；

??素材（配置區(qū)）

素材區(qū)是在選中Root節(jié)點(diǎn)時(shí)展示并可點(diǎn)擊展開(kāi)，其內(nèi)容展示的是數(shù)據(jù)源或狀態(tài)管理配置中，勾選導(dǎo)出項(xiàng)的配置項(xiàng)，在本區(qū)域單獨(dú)展示，供快速修改某些高頻改動(dòng)值使用

七、Ui2Code

??八、ChatGPT

問(wèn)答助手

??創(chuàng)建樓層

??修改配置

??作者：京東零售 張志鵬

來(lái)源：京東云開(kāi)發(fā)者社區(qū)