一、背景

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

每次遇到大促活動或者接入新的業(yè)務(wù)方，都需要重新設(shè)計及開發(fā)商卡，而新的商卡大多只是新增一些換膚樣式，或個別字段，這卻需要開發(fā)人員多寫一套樣式代碼或新增字段樣式，同一個樣式應(yīng)用于不同的業(yè)務(wù)方也需要重新進行開發(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和邏輯進行解耦，UI部分可在商卡配置后臺進行配置，邏輯部分由開發(fā)人員處理后引入原子UI組件進行最終渲染。

2.1 商卡配置后臺

UI在商卡配置后臺中由產(chǎn)品或者運營人員參照設(shè)計稿進行自由拖拽式配置，并且給每個模塊綁定字段，同一套配置可以同時應(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ù)邏輯進行處理后把相應(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)中進行配置更新，便可實現(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）字段的寬高和位置都固定渲染

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3）字段之間采用相對布局的方式進行排列

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

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

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

4）總體渲染流程

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

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

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

3.2 配置平臺

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

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

目前支持的字段組件有普通字段、圖片、普通容器、垂直容器、橫向布局容器以及內(nèi)聯(lián)容器，這基本可以滿足設(shè)計稿的布局。普通容器主要存放需要浮動的元素。垂直容器和橫向容器其實就是flex布局的兩種形式。內(nèi)聯(lián)容器是為了解決行內(nèi)元素換行問題，正常用橫向布局容器是沒辦法實現(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è)可選字段組件中直接將組件拖進畫布。若畫布中已配置了容器，則可以直接拖進相應(yīng)容器中，字段間的順序以及位置也是可以直接進行拖動調(diào)整，至于細微的位置調(diào)整，可以通過字段的樣式配置進行調(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。目前的配置項幾乎可以達到還原設(shè)計稿的目的。

4）特殊問題處理

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

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

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

商品卡片在獲取到卡片模版ID后，檢查當(dāng)前ID是否已經(jīng)有請求到的數(shù)據(jù)，有數(shù)據(jù)則直接從window上取對應(yīng)的數(shù)據(jù)進行渲染，如果沒有則檢查該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ù)字段，我們通過提供默認樣式的方式減少配置時的工作量，配置人員只需要關(guān)心這樣的字段的位置、大小以及一些顏色方面的配置，不需要再關(guān)心如前綴圖標(biāo)、復(fù)雜組合形式等問題。

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

與h5不同的是，rn的樣式需要進行單獨處理，大部分樣式處理都在商卡配置后臺中用“css-to-react-native“包進行了轉(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)的一些配置，如兩個字段互斥，永遠只出現(xiàn)其中一個字段；兩個字段也可以是必須同時出現(xiàn)的關(guān)系，當(dāng)一個字段有值時另一個才出現(xiàn)，比如有酒店LOGO時才展示酒店名稱；還有的時候字段需要根據(jù)另一個字段進行樣式和展示形式的調(diào)整，比如在價格為0時商品卡片的搶購按鈕變?yōu)椤懊赓M”文案的純文字。

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

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

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

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

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

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

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

在卡片上配置一個空間，定義該空間的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文件，方便進行備份和復(fù)用。

導(dǎo)入數(shù)據(jù)：為了使配置操作更為簡單，可導(dǎo)入已有的商卡模板或部分字段組件素材，導(dǎo)入后在此模板上進行增刪改操作，避免從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)入進畫布。設(shè)計稿導(dǎo)出的為較小顆粒度的元素，如一個名稱字段、商品圖片，不包含容器類大顆粒度元素的導(dǎo)出。設(shè)計稿直出可以省略部分基礎(chǔ)配置，如：字號，字體顏色，圖片寬高，邊框及圓角等，配置人員只需專注于布局的配置即可，減少了基礎(chǔ)樣式的配置時間。其他商卡導(dǎo)出的素材可直接完美復(fù)制原效果，包括字段綁定的名稱等，這種方式導(dǎo)出的素材不止是小顆粒度的元素，也可以是整個容器甚至整張卡片。

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

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

五、接入樣例

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

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

a. 商品信息

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

b. 自定義處理邏輯

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

c. 定義渲染信息

對于商品卡片的渲染，提供了0%～100%程度的自定義渲染方式。0%，就是接入方開發(fā)人員只需要傳遞商品數(shù)據(jù)，無需關(guān)心數(shù)據(jù)的渲染。100%，即是接入方開發(fā)人員可以將對應(yīng)商品數(shù)據(jù)的整個渲染完全覆蓋掉，DIY商品卡片組件使用render props的方式渲染接入方傳遞進來的渲染方法。不到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)通用的樣式跨端解決方案，從而達到降低成本和提高效率的目的。這個系統(tǒng)同時表明，前端工程師不僅需要關(guān)注樣式和解決渲染問題，還可以通過對CSS、渲染機制、數(shù)據(jù)結(jié)構(gòu)和框架的深入理解來解決更廣泛的問題。