一、背景

攜程各個BU各個時期都有不同營銷頁面，數(shù)量眾多，其中很重要的一塊是產(chǎn)品模塊，運營需求的產(chǎn)品卡片樣式眾多，各個BU展示字段差別巨大，無法利用通用樣式，因此如需新增卡片或字段，傳統(tǒng)做法是運營提需求給設(shè)計，再提需求給開發(fā)，經(jīng)過需求評審，正式開發(fā)，發(fā)布測試上線等等。

每次遇到大促活動或者接入新的業(yè)務(wù)方，都需要重新設(shè)計及開發(fā)商卡，而新的商卡大多只是新增一些換膚樣式，或個別字段，這卻需要開發(fā)人員多寫一套樣式代碼或新增字段樣式，同一個樣式應(yīng)用于不同的業(yè)務(wù)方也需要重新進(jìn)行開發(fā)，極大地浪費了開發(fā)和設(shè)計資源。

在DIY商品卡片系統(tǒng)開發(fā)前，由于開發(fā)成本的限制，營銷頁面上常用的商品卡片樣式基本固定為十幾種，這在用戶看來缺乏新意，吸引力不足，從而在一定程度上影響了營銷頁面商卡的點擊量。

綜上所述，為解決傳統(tǒng)商卡存在的以下問題：

• 即使樣式差別很小也需要重復(fù)開發(fā)，耗時耗力。
• 沒法多平臺統(tǒng)一卡片樣式，難于管理、復(fù)用性低。
• 樣式固定、對用戶吸引力低導(dǎo)致點擊率及訂單轉(zhuǎn)化率低。

我們從UI和邏輯解耦，UI模板在平臺配置生成的角度考慮解決問題，設(shè)計了DIY商品卡片系統(tǒng)。

二、系統(tǒng)介紹

商卡系統(tǒng)將UI和邏輯進(jìn)行解耦，UI部分可在商卡配置后臺進(jìn)行配置，邏輯部分由開發(fā)人員處理后引入原子UI組件進(jìn)行最終渲染。

2.1 商卡配置后臺

UI在商卡配置后臺中由產(chǎn)品或者運營人員參照設(shè)計稿進(jìn)行自由拖拽式配置，并且給每個模塊綁定字段，同一套配置可以同時應(yīng)用于H5和React Native。

2.2 原子UI組件

原子UI組件是顆粒度更小的一種靜態(tài)組件（React, React Native），可以通過手動開發(fā)或配合“產(chǎn)品畫布”DIY這兩種方式為業(yè)務(wù)組件提供渲染模板，其他使用方也可以提供一些固定的數(shù)據(jù)（契約）直接渲染單卡片樣式。開發(fā)人員只需在組件內(nèi)引入原子組件的npm包，對業(yè)務(wù)邏輯進(jìn)行處理后把相應(yīng)字段的值傳給原子組件即可最終渲染真實產(chǎn)品信息。通過原子組件的模式，可以讓所有組件都“引用”線上的公共UI組件，直接應(yīng)用在各商卡的業(yè)務(wù)方，輕松實現(xiàn)商品卡片樣式的統(tǒng)一，避免了每個業(yè)務(wù)方重復(fù)開發(fā)同一套樣式。下圖為商卡搭建的部分樣式：

2.3 效果

• 商品卡片樣式現(xiàn)已擺脫對開發(fā)人員的依賴，產(chǎn)品運營團隊可以直接通過拖拽配置的方式，輕松定制全新的樣式。
• 當(dāng)同一商卡模板需要更新樣式時，僅需在商卡配置系統(tǒng)中進(jìn)行配置更新，便可實現(xiàn)一鍵跨端修改的效果，使所有使用該模板的業(yè)務(wù)方同步更新。
• 針對需要定制展示內(nèi)容的業(yè)務(wù)方，我們提供了定制渲染能力，允許他們在整體樣式統(tǒng)一的基礎(chǔ)上，保留部分商卡內(nèi)容的獨特風(fēng)格。
• 目前，我們已擁有400多張商卡和40多種常用模板，廣泛應(yīng)用于攜程營銷頁面、特賣、星球號以及攜程直播等多個場景。
• 商卡樣式的更新?lián)Q代速度得到了極大提升，為用戶帶來更加新穎的體驗，從而增強了點擊欲望。經(jīng)過AB實驗測試，我們發(fā)現(xiàn)商卡系統(tǒng)搭建的樣式相較于過去固定的樣式，在點擊率上有了顯著提升。

三、系統(tǒng)設(shè)計

DIY商品卡片系統(tǒng)主要由2部分組成：商卡渲染和配置平臺。

3.1 DIY商品卡片渲染

DIY商品卡片可以通過以下三種渲染方式渲染，可以根據(jù)需求和配置難度選擇合適的方式：

1）字段的寬高和位置都固定渲染

渲染組件按照在配置平臺上的布局進(jìn)行商品卡片的渲染，字段之間沒有聯(lián)動設(shè)計，只能進(jìn)行簡單卡片的渲染。

渲染稍復(fù)雜的卡片時面臨的問題主要有以下兩個：

• 同一行的兩個字段，不能根據(jù)前一個字段的寬度動態(tài)改變后一個字段的位置。如下圖，第一張圖中顯示正常，第二張圖中當(dāng)?shù)谝粋€字段評分變化為4分時，3797點評的位置還在原處，就會留有不合理的間距。

• 卡片的高度也不能根據(jù)字段的長短和是否有缺失字段進(jìn)行動態(tài)調(diào)整，如下圖，缺失兩個標(biāo)簽后下方的字段并不會自動向上填補空白，卡片高度也不會相應(yīng)減小，在實際應(yīng)用場景中，很多商品卡片都不是固定高度，在展示商品時更傾向于緊湊的商品卡片布局，即卡片的高度要根據(jù)商品數(shù)據(jù)進(jìn)行動態(tài)調(diào)整。

2） 字段的寬高和位置通過數(shù)據(jù)進(jìn)行動態(tài)計算，依舊采用絕對布局的方式

• 卡片橫向的動態(tài)布局

增加了行容器組件，將同一行的字段放進(jìn)同一個行容器中就可以讓字段位置不再依賴固定坐標(biāo)。

以React版渲染組件為例，行容器是一個flex布局的<div></div>，去掉放入行容器里的字段的絕對布局屬性，通過設(shè)置justify-content即可控制同一行字段的排列方式，自動補齊位置。

• 卡片縱向的動態(tài)布局

獲取到商品數(shù)據(jù)和渲染數(shù)據(jù)后，先不對商品卡片進(jìn)行渲染。通過動態(tài)算法和canvas渲染對字段是否存在和字段長度進(jìn)行校驗，并根據(jù)校驗結(jié)果修改渲染數(shù)據(jù)。修改完成的渲染數(shù)據(jù)可以達(dá)到卡片高度和字段位置動態(tài)適應(yīng)的效果。

動態(tài)算法分為以下幾個步驟：

a. 當(dāng)字段所需高度增加或者減少時，檢查哪些字段的位置會受到當(dāng)前字段高度變化的影響，將受影響字段和需要進(jìn)行的調(diào)整收集起來。

b. 校驗所有字段后，對收集的字段對應(yīng)的渲染數(shù)據(jù)進(jìn)行調(diào)整。

c. 調(diào)整完成后開始根據(jù)渲染數(shù)據(jù)進(jìn)行商品卡片渲染。

d. 商品卡片渲染完成后檢測每個字段是否正確渲染，對于計算有偏差的字段調(diào)整，根據(jù)真實渲染情況再次進(jìn)行微調(diào)。

3）字段之間采用相對布局的方式進(jìn)行排列

對于縱向的動態(tài)布局，依賴通過商品數(shù)據(jù)和渲染數(shù)據(jù)進(jìn)行計算也會帶來一些問題，比如在渲染數(shù)據(jù)的調(diào)整上，調(diào)整后的商品卡片可能會和配置略有差異，有一些準(zhǔn)確性的問題。

為了達(dá)到和手工開發(fā)一樣的效果，增加了垂直方向的容器，稱為垂直容器。放入垂直容器的字段，會被調(diào)整為相對布局的定位方式，字段依次向下排列，不依賴定位屬性。

考慮到商品卡片普遍情況下都是采用比較規(guī)則的布局方式，所以使用行容器加垂直容器層層嵌套的方式可以實現(xiàn)去絕對布局的效果，所有字段都自動根據(jù)前面的字段動態(tài)調(diào)整位置。

4）總體渲染流程

接入方將數(shù)據(jù)處理為契約中的格式，傳給原子UI組件進(jìn)行渲染。商卡渲染時，通過場景號和版本從接口中讀取兩部分配置數(shù)據(jù)：

• 商卡總體配置JSON：包含有效期時間、卡片寬高、背景色、圓角等。
• 商卡內(nèi)字段組件列表：包含每個字段組件的css和react native樣式以及一些聯(lián)動邏輯的配置。

當(dāng)獲取到的字段組件列表長度大于0時，我們開始循環(huán)處理列表內(nèi)的組件，不同的字段類型渲染成不同的組件，若遇到容器則進(jìn)行遞歸，直到容器中的內(nèi)容全都處理完。

3.2 配置平臺

考慮到解放開發(fā)人力，大部分布局不復(fù)雜的商卡可以由產(chǎn)品或者運營人員根據(jù)設(shè)計稿進(jìn)行配置。為了易于非開發(fā)人員操作和理解、提高配置效率，我們在以下幾個模塊的設(shè)計上增加了許多考量。

1）字段組件設(shè)計

目前支持的字段組件有普通字段、圖片、普通容器、垂直容器、橫向布局容器以及內(nèi)聯(lián)容器，這基本可以滿足設(shè)計稿的布局。普通容器主要存放需要浮動的元素。垂直容器和橫向容器其實就是flex布局的兩種形式。內(nèi)聯(lián)容器是為了解決行內(nèi)元素?fù)Q行問題，正常用橫向布局容器是沒辦法實現(xiàn)這個效果的，內(nèi)聯(lián)容器內(nèi)的元素我們一律轉(zhuǎn)成inline元素。內(nèi)聯(lián)容器主要應(yīng)用在如下圖所示的情況：套餐名稱超出一行需要換行，星級以及金鉆標(biāo)簽緊跟其后。

2）畫布交互設(shè)計

為簡化操作，我們將商卡系統(tǒng)設(shè)計成拖拽配置的形式，配置人員可以從左側(cè)可選字段組件中直接將組件拖進(jìn)畫布。若畫布中已配置了容器，則可以直接拖進(jìn)相應(yīng)容器中，字段間的順序以及位置也是可以直接進(jìn)行拖動調(diào)整，至于細(xì)微的位置調(diào)整，可以通過字段的樣式配置進(jìn)行調(diào)整。

3）字段樣式配置

下圖所示的樣式配置基本上就是簡單的css屬性，在浮動類型這有個特殊處理：浮動類型為浮動即positinotallow="absolute"時，距離上、右、底，左邊實際上代表top、right、bottom，left；浮動類型為不浮動即positinotallow="relative"時，距離上、右、底，左邊實際上代表 margin-top、margin-right、margin-bottom，margin-left，這樣可以減少配置項。在行容器和垂直容器的配置中，額外還有對齊方式的配置，對應(yīng)的是flex布局中justify-content和align-items，容器的子元素配置中也有壓縮和彈性比例系數(shù)的配置，即flex-shrink以及flex。目前的配置項幾乎可以達(dá)到還原設(shè)計稿的目的。

4）特殊問題處理

• 問題：接口重復(fù)調(diào)用
• 解決方案：發(fā)布訂閱

商品卡片的渲染schema獲取是在每一個商品卡片里進(jìn)行的，渲染商品列表時就會有重復(fù)調(diào)用接口的問題。

通過一些方式將接口請求次數(shù)盡可能減少很重要，但因為各商品卡片之間相互獨立，并不能在某一個商品卡片中知道頁面中都有哪些商品卡片模版ID，我們減少請求次數(shù)的方案也就是對于同一個商品卡片模版，只請求一次。

商品卡片在獲取到卡片模版ID后，檢查當(dāng)前ID是否已經(jīng)有請求到的數(shù)據(jù)，有數(shù)據(jù)則直接從window上取對應(yīng)的數(shù)據(jù)進(jìn)行渲染，如果沒有則檢查該ID是否已經(jīng)被標(biāo)記為已經(jīng)在請求數(shù)據(jù)，對于已經(jīng)在請求數(shù)據(jù)的情況，監(jiān)聽當(dāng)前數(shù)據(jù)請求成功的消息，數(shù)據(jù)請求成功后觸發(fā)請求的商品卡片會通過消息推送當(dāng)前模版ID的渲染schema，并將此數(shù)據(jù)存在window上。過程如圖中所示。

一些商品數(shù)據(jù)字段在攜程的應(yīng)用場景中也是比較固定的，對于這樣的一些商品數(shù)據(jù)字段，我們通過提供默認(rèn)樣式的方式減少配置時的工作量，配置人員只需要關(guān)心這樣的字段的位置、大小以及一些顏色方面的配置，不需要再關(guān)心如前綴圖標(biāo)、復(fù)雜組合形式等問題。

• 問題：RN樣式差異
• 解決方案：手動進(jìn)行兼容性處理

與h5不同的是，rn的樣式需要進(jìn)行單獨處理，大部分樣式處理都在商卡配置后臺中用“css-to-react-native“包進(jìn)行了轉(zhuǎn)換，某些特殊樣式由rn版原子組件單獨處理。例如：h5中的內(nèi)聯(lián)容器在rn中要用<Text><Text/>當(dāng)最外層容器，里面所有子容器也由<Text><Text/>包裹，這樣才能實現(xiàn)元素內(nèi)換行。其他還有漸變背景色用LinearGradient組件處理、背景圖片轉(zhuǎn)換成<Image/>標(biāo)簽、border拆分成borderWidth和borderColor來處理、下發(fā)的rn樣式適配屏幕寬高等等。

• 問題：業(yè)務(wù)關(guān)聯(lián)
• 解決方案：字段聯(lián)動

在一些場景下，商品卡片的數(shù)據(jù)之間也是有關(guān)聯(lián)關(guān)系的，我們提供了字段之間關(guān)聯(lián)的一些配置，如兩個字段互斥，永遠(yuǎn)只出現(xiàn)其中一個字段；兩個字段也可以是必須同時出現(xiàn)的關(guān)系，當(dāng)一個字段有值時另一個才出現(xiàn)，比如有酒店LOGO時才展示酒店名稱；還有的時候字段需要根據(jù)另一個字段進(jìn)行樣式和展示形式的調(diào)整，比如在價格為0時商品卡片的搶購按鈕變?yōu)椤懊赓M”文案的純文字。

• 問題：商卡展示不夠靈活
• 解決方案：Render props

DIY商品卡片提供了自定義插槽，渲染時可以直接傳入一個JSX函數(shù)在配置位置渲染，例如：接入方傳入一個直播流播放器。這樣配置上更加靈活，DIY商品卡片組件也無需引入過多第三方組件。這樣的做法還帶來一個好處，留有一定的空間供開發(fā)人員介入，對于一些難以配置的數(shù)據(jù)展示形式，可以指定該數(shù)據(jù)的展示使用開發(fā)人員定制開發(fā)的數(shù)據(jù)展示模塊，開發(fā)和配置混合的形式極大地補充了DIY商品卡片的展示能力。

• 問題：多點擊事件
• 解決方案：自定義點擊事件函數(shù)

商卡有默認(rèn)的點擊事件，一般用于商品的跳轉(zhuǎn)，若一張大卡內(nèi)有多個點擊區(qū)域，可以用透明蒙層配置在點擊區(qū)域的上方，并綁定相應(yīng)的字段。數(shù)據(jù)傳入時只需要傳入點擊事件對象數(shù)組，商卡會根據(jù)對象的name和綁定的字段名進(jìn)行匹配，將對象的函數(shù)綁定在對應(yīng)的字段上。通過name進(jìn)行匹配就無需在新增點擊事件時在代碼內(nèi)手動將點擊事件與字段進(jìn)行綁定，這帶來的好處是可以減少商卡本身的開發(fā)改動，更加靈活，只需要配置字段和傳入字段一一對應(yīng)即可。

• 問題：卡片重復(fù)配置
• 解決方案：父子商卡

對于一些重復(fù)度較高的商品卡片，將相同的部分保留作為公共部分，不同的部分抽取出來單獨配置是一種更合理的方式。

我們將這種模式的卡片配置稱為父子模塊，在配置時父模塊和子模塊沒有區(qū)別，兩種模塊都可以作為一個單獨的商品卡片進(jìn)行渲染。

在卡片上配置一個空間，定義該空間的key，在渲染商品卡片時將key對應(yīng)的子模塊ID和商品數(shù)據(jù)一起傳入父模塊，父模塊在配置在渲染時將子模塊渲染在預(yù)留空間里，即可實現(xiàn)兩個商品卡片的拼接。

四、商品卡片配置系統(tǒng)功能點

4.1 導(dǎo)入導(dǎo)出

導(dǎo)出數(shù)據(jù)：導(dǎo)出該頁面上的商卡樣式，導(dǎo)出格式為txt文件，方便進(jìn)行備份和復(fù)用。

導(dǎo)入數(shù)據(jù)：為了使配置操作更為簡單，可導(dǎo)入已有的商卡模板或部分字段組件素材，導(dǎo)入后在此模板上進(jìn)行增刪改操作，避免從0開始搭建。

4.2 版本切換

畫布可分為三個版本：線上版本、可編輯版本、歷史版本。線上版本為真實版本，歷史版本為上一次保存的線上版本。只有在可編輯版本內(nèi)才可以編輯，編輯后可以保存或者上線，只有選擇上線才能替換線上版本。

可編輯版本的設(shè)計可以將線上與編輯隔離，以免未編輯完成的畫布影響線上，同時歷史版本在一定程度上也是一種備份。

4.3 預(yù)覽

畫布提供h5版本或app版預(yù)覽，預(yù)覽的版本為當(dāng)前選中版本。預(yù)覽的商卡數(shù)據(jù)源分為兩種，一種是通用數(shù)據(jù)源，即樂高平臺內(nèi)針對不同業(yè)務(wù)方預(yù)先配置好的數(shù)據(jù)字段；另一種為自定義數(shù)據(jù)，配置人員可以根據(jù)具體的需求以JSON的形式在樂高平臺內(nèi)新增數(shù)據(jù)字段。通過預(yù)覽，配置人員可以在商卡上線前看到實時效果，同時通過自定義數(shù)據(jù)也可模擬一些極端情況，如某些字段缺失后，卡片布局是否會變形等

4.4 卡片配置

為簡化配置流程，重復(fù)利用素材，商卡配置后臺支持其他商卡導(dǎo)出的素材txt文件以及設(shè)計稿導(dǎo)出的元素素材txt文件導(dǎo)入進(jìn)畫布。設(shè)計稿導(dǎo)出的為較小顆粒度的元素，如一個名稱字段、商品圖片，不包含容器類大顆粒度元素的導(dǎo)出。設(shè)計稿直出可以省略部分基礎(chǔ)配置，如：字號，字體顏色，圖片寬高，邊框及圓角等，配置人員只需專注于布局的配置即可，減少了基礎(chǔ)樣式的配置時間。其他商卡導(dǎo)出的素材可直接完美復(fù)制原效果，包括字段綁定的名稱等，這種方式導(dǎo)出的素材不止是小顆粒度的元素，也可以是整個容器甚至整張卡片。

除了直接導(dǎo)入，商卡系統(tǒng)有自帶的組件庫，可將其中的組件直接拖拽添加進(jìn)畫布。目前支持的組件有字段、圖片、背景方塊、橫向布局容器、垂直布局容器、內(nèi)聯(lián)容器和普通容器。通過選中畫布中的某個字段或容器可以配置其css屬性、調(diào)整容器內(nèi)子元素的順序和對齊方式等。除了樣式配置，還有字段屬性配置，字段要與對應(yīng)的字段名進(jìn)行綁定才能正常顯示，若畫布中配置了某個字段組件，但數(shù)據(jù)中沒有此字段名，最終上線后也是不展示此字段組件的，唯有一一對應(yīng)才能正常展示。

配置完成后可以先通過預(yù)覽查看實時效果，避免上線后出現(xiàn)問題。上線后接入方通過唯一的商卡場景號調(diào)用該商卡，按照契約內(nèi)容傳入字段即可成功渲染。

五、接入樣例

DIY商品卡片組件主要通過npm包的形式引入，按照契約傳遞數(shù)據(jù)即可渲染。

傳遞給組件的數(shù)據(jù)分為三類：

a. 商品信息

渲染商品卡片所必需的數(shù)據(jù)，如酒店名、酒店星級、價格、主圖鏈接等商品信息。

b. 自定義處理邏輯

在我們的商品卡片中，可自定義的處理邏輯主要是在點擊事件中。組件支持對整個商品卡片的點擊方法進(jìn)行覆蓋，也支持對單個字段如酒店標(biāo)簽進(jìn)行添加點擊事件處理邏輯。

c. 定義渲染信息

對于商品卡片的渲染，提供了0%～100%程度的自定義渲染方式。0%，就是接入方開發(fā)人員只需要傳遞商品數(shù)據(jù)，無需關(guān)心數(shù)據(jù)的渲染。100%，即是接入方開發(fā)人員可以將對應(yīng)商品數(shù)據(jù)的整個渲染完全覆蓋掉，DIY商品卡片組件使用render props的方式渲染接入方傳遞進(jìn)來的渲染方法。不到100%又高于0%程度的渲染，則是提供給接入方傳入指定商品數(shù)據(jù)的CSS以追加的形式修改原有CSS的能力。

六、總結(jié)

由于傳統(tǒng)商卡開發(fā)模式無法適應(yīng)當(dāng)前業(yè)務(wù)的快速發(fā)展，我們通過對開發(fā)中現(xiàn)有問題的分析，將UI和邏輯解耦設(shè)計了商卡系統(tǒng)，通過對CSS模塊的抽象，設(shè)計了商卡各個字段組件。商卡系統(tǒng)這使得我們能夠以低代碼平臺的方式實現(xiàn)通用的樣式跨端解決方案，從而達(dá)到降低成本和提高效率的目的。這個系統(tǒng)同時表明，前端工程師不僅需要關(guān)注樣式和解決渲染問題，還可以通過對CSS、渲染機制、數(shù)據(jù)結(jié)構(gòu)和框架的深入理解來解決更廣泛的問題。