动态卡片：富媒体内容井喷式增长下，新一代移动端动态研发的模式
簡介：「螞蟻動(dòng)態(tài)卡片」新品發(fā)布會(huì)全程回顧?
在 iOS 和 Android 系統(tǒng)近期推送的更迭版本中，系統(tǒng)環(huán)境已經(jīng)逐漸發(fā)展出了將部分內(nèi)容和服務(wù)前置化展示的趨勢。
同時(shí)，伴隨著富媒體內(nèi)容井噴式增長以及內(nèi)容的多樣化、年輕化，一款移動(dòng)應(yīng)用如何能有效提升動(dòng)態(tài)化運(yùn)營效率，也成為了各行業(yè)產(chǎn)研與運(yùn)營的重要課題。
在上述技術(shù)能力和行業(yè)需求的雙重背景下，「螞蟻動(dòng)態(tài)卡片」孕育而生。
「螞蟻動(dòng)態(tài)卡片」現(xiàn)正式上線 mPaaS，歡迎廣大開發(fā)者登錄阿里云賬號(hào)前往 mPaaS 控制臺(tái)開通試用。
螞蟻動(dòng)態(tài)卡片，實(shí)現(xiàn)App首頁的敏捷更新
via 青葶-螞蟻集團(tuán) mPaaS 產(chǎn)品經(jīng)理
螞蟻動(dòng)態(tài)卡片是基于支付寶的全新卡片技術(shù)棧，實(shí)現(xiàn) App 首頁的敏捷更新。
螞蟻動(dòng)態(tài)卡片 Cube 是螞蟻集團(tuán)內(nèi)部自研的一套跨平臺(tái)、動(dòng)態(tài)化的卡片解決方案，是服務(wù)于應(yīng)用頁面內(nèi)的區(qū)域動(dòng)態(tài)化技術(shù)，面向內(nèi)容運(yùn)營，幫助產(chǎn)品技術(shù)提升開發(fā)效率和運(yùn)營效率。
每一個(gè)動(dòng)態(tài)卡片獨(dú)立嵌于原生頁面內(nèi)的一個(gè)區(qū)域，區(qū)域內(nèi)容通過卡片模板進(jìn)行展示。在支付寶的首頁，疫情服務(wù)助手、螞蟻森林或支付頁面，都是通過卡片的方式實(shí)現(xiàn)的。
卡片具有以下幾方面的優(yōu)勢：
① 跨平臺(tái)的一致性：一套代碼實(shí)現(xiàn)多端效果對(duì)齊。
② 動(dòng)態(tài)化：卡片內(nèi)可以進(jìn)行頁面結(jié)構(gòu)樣式以及業(yè)務(wù)邏輯的動(dòng)態(tài)化更新。
③ 高性能：卡片的更新以卡片包的形式發(fā)布，它的包體積非常小，具有極致的性能和內(nèi)存。
動(dòng)態(tài)卡片是經(jīng)過支付寶 App 業(yè)務(wù)深度打磨的技術(shù)棧，它包括客戶端和云端，具有穩(wěn)定性和可靠性（低于十萬分之一的 crash 率）。同時(shí)，它有完善的開發(fā)調(diào)試工具，比如編譯、預(yù)覽、調(diào)試、發(fā)布等。
螞蟻動(dòng)態(tài)卡片的應(yīng)用場景主要圍繞內(nèi)容運(yùn)營，它可以實(shí)現(xiàn)新一代移動(dòng)端動(dòng)態(tài)研發(fā)的模式。伴隨著富媒體內(nèi)容井噴式增長以及內(nèi)容的多樣化、年輕化，為提升用戶轉(zhuǎn)化率、留存率，互聯(lián)網(wǎng)以及傳統(tǒng)行業(yè)都對(duì)移動(dòng)應(yīng)用的內(nèi)容運(yùn)營有著日益增加增強(qiáng)的訴求。如何提升內(nèi)容的動(dòng)態(tài)化運(yùn)營效率，成為了各行業(yè)產(chǎn)研以及運(yùn)營的重要課題。
而他們的訴求，都可以通過卡片來實(shí)現(xiàn)。
為什么移動(dòng)端 App 需要?jiǎng)討B(tài)卡片？
上圖為螞蟻動(dòng)態(tài)卡片與原生 native 頁面、 web 頁面、 Flutter、 RN 的對(duì)比。在跨平臺(tái)、開發(fā)效率、性能、包體積大小、接入改造成本、發(fā)布粒度等方面，動(dòng)態(tài)卡片都具有較大的優(yōu)勢。尤其在發(fā)布粒度上，卡片可以實(shí)現(xiàn)在局部頁面或某一個(gè)小程序或子應(yīng)用層面上進(jìn)行發(fā)布，且發(fā)布效率極高，發(fā)布即可見。同時(shí)卡片的包體積非常小，改造的接入成本也很低，并且具備多端的跨平臺(tái)一致性。
Cube 經(jīng)過長達(dá)四年的研發(fā)周期，通過類前端的開發(fā)語言，有著比較完善的研發(fā)體系。經(jīng)過了支付寶錢包等大規(guī)模的應(yīng)用，在首頁、財(cái)富 Tab 和生活 Tab 都實(shí)現(xiàn)了良好的落地效果。
動(dòng)態(tài)卡片對(duì)業(yè)務(wù)的價(jià)值在于能夠幫助研發(fā)人員快速響應(yīng)運(yùn)營訴求，它的技術(shù)目標(biāo)是兼顧用戶體驗(yàn)和研發(fā)效率。
在客戶端，卡片呈現(xiàn)的效果如上圖右側(cè)所示，它由兩部分組成，分別是卡片模板和卡片數(shù)據(jù)?？蛻舳送ㄟ^獲取卡片模板，再獲取卡片數(shù)據(jù)，最終渲染出終端的樣式。
卡片模版包含了卡片布局、卡片邏輯和卡片樣式。其中邏輯包含埋點(diǎn)信息，以及比如在什么情況下卡片要展示何種樣式等業(yè)務(wù)邏輯。
螞蟻動(dòng)態(tài)卡片的產(chǎn)品價(jià)值可以從三個(gè)維度來闡釋：
① 面向開發(fā)：擁有高效開發(fā)的特性。通過精簡的 VUE 語言、完善的調(diào)試工具等，減少發(fā)版，提升開發(fā)效率。
② 面向產(chǎn)品/運(yùn)營：擁有實(shí)時(shí)更新的能力。每一次發(fā)版或有內(nèi)容更新的時(shí)候，通過預(yù)置好的卡片模板將運(yùn)營內(nèi)容進(jìn)行更新并推送即可。這也意味著大多數(shù)情況下，產(chǎn)品更新只需要發(fā)布一個(gè)卡片，而不需要進(jìn)行整個(gè) App 、整個(gè)小程序或整個(gè)界面的更新發(fā)布。從而使得運(yùn)營效率和產(chǎn)品的需求落地效率很高，可以支持多個(gè)業(yè)務(wù)場景進(jìn)行一個(gè)落地，也可以滿足差異化和個(gè)性化的運(yùn)營訴求。
③ 面向終端用戶：提供了流暢體驗(yàn)。卡片可以媲美于原生體驗(yàn)，流暢度甚至優(yōu)于原生。同時(shí)得益于包體積較小、性能好、占用內(nèi)存少，面向重大用戶時(shí)會(huì)有更流暢的體驗(yàn)。
螞蟻動(dòng)態(tài)卡片的產(chǎn)品架構(gòu)分為四層：
① 技術(shù)層：通過 Cube 的內(nèi)核衍生出了兩個(gè)模塊，分別是 Cube 卡片和未來將發(fā)布的輕量級(jí)小程序技術(shù)棧。
② 產(chǎn)品層：基于 Cube 卡片衍生出的產(chǎn)品有螞蟻動(dòng)態(tài)卡片 Cube 和螞蟻動(dòng)態(tài)卡片的智能版面；基于小程序衍生出的有 Cube 高性能小程序以及 Cube 高性能小程序-智能搭建。
③ 設(shè)備層：支持移動(dòng)端和 IoT 端。在卡片層面上更廣泛適用于移動(dòng)端，而高性能小程序能夠兼顧移動(dòng)端的低端設(shè)備、 IoT 設(shè)備或大屏一體機(jī)等。
④ 場景層：適用于富媒體的數(shù)字化運(yùn)營場景，包含金融、泛娛樂、互聯(lián)網(wǎng)、交通、物聯(lián)網(wǎng)等。
對(duì)于重視內(nèi)容運(yùn)營的行業(yè)，螞蟻動(dòng)態(tài)卡片能夠提供高性能、高效率的內(nèi)容運(yùn)營，適用于千人千面的實(shí)時(shí)內(nèi)容運(yùn)營、輿情應(yīng)急管理、運(yùn)維應(yīng)急管理，或產(chǎn)品的 AB 測試、最小化功能的更新等。需要緊急更新內(nèi)容或動(dòng)態(tài)化更新的場景下，不需要發(fā)布版本，只需更新卡片內(nèi)容即可。
卡片支持的組件包括腰封、 feed 流、視頻、浮窗、廣告等原生支持的組件。相比于 Flutter 與 H5 無法支持腰封，且只能支持整個(gè)頁面的發(fā)布，Cube提供了原生以及部分動(dòng)態(tài)化能力， 能夠支持的場景更為廣泛。
場景1：運(yùn)營場景下的動(dòng)態(tài)卡片發(fā)布和智能版面千人千面。
上圖左下角呈現(xiàn)了兩個(gè)不同模板的動(dòng)態(tài)卡片，它們的數(shù)據(jù)也不同。可以通過發(fā)布不同的卡片模板以及調(diào)用后端的不同數(shù)據(jù)，實(shí)現(xiàn)卡片的動(dòng)態(tài)化更新以及千人千面的按需展示。整個(gè)首頁即版面，可以針對(duì)不同人群設(shè)置不同的版面。
場景2：支付寶結(jié)合 mPaaS 新一代移動(dòng)端動(dòng)態(tài)研發(fā)。
上圖右下角呈現(xiàn)的支付寶首頁，其中藍(lán)色部分是原生開發(fā)為主，體驗(yàn)最佳、性能最優(yōu)；中間部分是內(nèi)部一些動(dòng)態(tài)的子應(yīng)用，采用 cube 小程序開發(fā)，兼顧體驗(yàn)和動(dòng)態(tài)性；最下方大盤晴雨表以及其他 Tab 詳情頁采用 cube 開發(fā)，具備局部動(dòng)態(tài)化或單頁動(dòng)態(tài)化的高性能。
Cube 智能版面是基于動(dòng)態(tài)卡片、智能引擎實(shí)現(xiàn)頁面整體布局的千人千面。頁面由若干個(gè)可以動(dòng)態(tài)渲染的卡片模板組成，動(dòng)態(tài)卡片的模板與業(yè)務(wù)數(shù)據(jù)進(jìn)行對(duì)接，針對(duì)不同的人群定向推送。智能引擎可以通過版面的配置實(shí)現(xiàn)不同人群、不同內(nèi)容的版面調(diào)整。
版面也可以與現(xiàn)有的一些 mPaaS 其他產(chǎn)品結(jié)合，比如短視頻直播、終端智能、低代碼搭建、 LBS 、可視化埋點(diǎn)等，實(shí)現(xiàn)整體解決方案的輸出。
以支付寶首頁動(dòng)態(tài)化智能版面為例，可以看到活躍和不活躍兩種人群的版面是有差異的。針對(duì)不活躍的人群，首頁以優(yōu)惠和公益為主；針對(duì)活躍用戶，首頁會(huì)顯示其深度關(guān)聯(lián)的業(yè)務(wù)，比如大盤晴雨表、理財(cái)熱點(diǎn)等。此外，同樣的用戶，開市和閉市后理財(cái)卡片的樣式和內(nèi)容會(huì)不同，以及晚上會(huì)出現(xiàn)螞蟻森林、步數(shù)兌換能量等卡片引導(dǎo)提示。
Cube 高性能小程序是基于大屏或 IoT 場景實(shí)現(xiàn)的新一代開發(fā)需求，它是基于 Cube 渲染引擎進(jìn)行的頁面級(jí)或子應(yīng)用級(jí)的解決方案，是一種高性能、動(dòng)態(tài)化的小程序解決方案，具備跨平臺(tái)一致性、動(dòng)態(tài)性、高性。同時(shí)在開發(fā)側(cè)復(fù)用小程序 DSL 子集，上手更簡單。
Cube 高性能小程序的適用場景多為大屏的 IOT 場景或一些低端設(shè)備的小程序，也適合 App 動(dòng)態(tài)單頁、常規(guī) App 里的小程序。它在低端設(shè)備上的性能更佳，相比于外部的小程序，Cube 高性能小程序可以媲美原生的體驗(yàn)，因此在低端設(shè)備上更節(jié)省內(nèi)存，且流暢度更好。
它的核心優(yōu)勢主要在于以下兩個(gè)方面：
① 高效開發(fā)：復(fù)用小程序的開發(fā)語言，減少發(fā)版，提高效率。
② 流程體驗(yàn)：針對(duì)大屏 IoT 或機(jī)頂盒等比較老舊的設(shè)備，可以達(dá)到原生 native 的體驗(yàn)，也可以實(shí)現(xiàn)動(dòng)態(tài)發(fā)布，流暢性也遠(yuǎn)高于傳統(tǒng)的外部小程序。
上圖為螞蟻動(dòng)態(tài)卡片與 H5 的效果對(duì)比。
左側(cè)為冷啟動(dòng)、有緩存情況，卡片的啟動(dòng)速度更快速；右側(cè)為滑動(dòng)、有緩存情況下，卡片的渲染效果更流暢，速度也更快。
上圖為螞蟻動(dòng)態(tài)卡片與原生的效果對(duì)比，整體差異并不大，卡片的性能可以媲美于原生。
動(dòng)態(tài)，高效，螞蟻動(dòng)態(tài)卡片的內(nèi)核邏輯
via 京君-螞蟻集團(tuán)高級(jí)技術(shù)專家
螞蟻動(dòng)態(tài)卡片封裝了獨(dú)立的 SDK ，并在 SDK 內(nèi)部實(shí)現(xiàn)了卡片的渲染能力和 JS 相關(guān)的邏輯能力，應(yīng)用可以非常簡單方便地接入 SDK。同時(shí)為了提高卡片的渲染性，在內(nèi)部實(shí)現(xiàn)了卡片間的復(fù)用以及卡片內(nèi)組件的復(fù)用。
另外，動(dòng)態(tài)卡片還實(shí)現(xiàn)了以下擴(kuò)展能力：
① 擴(kuò)展組件協(xié)議：卡片內(nèi)部提供了內(nèi)置組件，比如文本、圖片、 div 等。通過對(duì)內(nèi)置組件進(jìn)行組合，能夠?qū)崿F(xiàn)大部分業(yè)務(wù)場景的訴求。但是有一些特殊場景希望能夠擴(kuò)展自己的組件能力。舉個(gè)例子，比如業(yè)務(wù)在客戶端已經(jīng)實(shí)現(xiàn)了一些視頻組件、直播組件定制化的能力，但依然希望這些組件能夠在卡片上實(shí)現(xiàn)混渲染并達(dá)到動(dòng)態(tài)下發(fā)的能力。提供了擴(kuò)展組件協(xié)議后，只需要在現(xiàn)有組件上實(shí)現(xiàn)擴(kuò)展的組件協(xié)議，用注冊的自定義擴(kuò)展組件標(biāo)簽來寫模板，即可達(dá)到組件在模版內(nèi)實(shí)現(xiàn)混合渲染的目的。
② 擴(kuò)展 JSAPI：針對(duì)一些客戶端有的能力，可以在卡片內(nèi)通過 JSAPI 來調(diào)用。通過實(shí)現(xiàn) JSAPI 協(xié)議，擴(kuò)展 JSAPI，即可在卡片內(nèi)部寫 GS 邏輯的時(shí)候直接調(diào)用端上的公共能力。
應(yīng)用接入動(dòng)態(tài)卡片后，主要工作是創(chuàng)建卡片來實(shí)現(xiàn)內(nèi)容的動(dòng)態(tài)化。SDK 提供了創(chuàng)建卡片的接口，創(chuàng)建的卡片即為 card 實(shí)例。頁面里的一個(gè) view 對(duì)應(yīng)一個(gè) card。可以通過 view 實(shí)現(xiàn)內(nèi)容和邏輯，并生成 card，通過 card 實(shí)現(xiàn)內(nèi)容的動(dòng)態(tài)化。每一個(gè) card 都有卡片模板，由統(tǒng)一的 DSL 負(fù)責(zé)寫卡片模板的布局、樣式以及卡片內(nèi)的 JS 邏輯。DSL 內(nèi)置的組件標(biāo)簽以及擴(kuò)展組件都可以在模板里使用。
卡片的系統(tǒng)架構(gòu)分為以下四層：
其中模板管理主要根據(jù)不同的客戶端版本下發(fā)不同的模板，根據(jù)高版本的模板實(shí)現(xiàn)動(dòng)態(tài)升級(jí)，保證客戶端的卡片能實(shí)時(shí)更新，達(dá)到動(dòng)態(tài)渲染的目的。可以用不同的版本管理卡片的樣式和布局，而在模板內(nèi)部，因?yàn)橹С?JS 邏輯的編寫，也可以支持邏輯渲染的能力。在單個(gè)模板內(nèi)部也可以根據(jù)不同的服務(wù)端下發(fā)數(shù)據(jù)條件來實(shí)現(xiàn)不同的樣式渲染，但是這會(huì)導(dǎo)致模板的業(yè)務(wù)邏輯特別多，難以維護(hù)。
因此，通過不同的模板的版本來管理更方便，也比較適合大部分動(dòng)態(tài)化場景。
在 JSFramework 層實(shí)現(xiàn)了很小的 JS 顯示式框架，設(shè)計(jì)初衷是為了實(shí)現(xiàn)高性能，因此只是實(shí)現(xiàn)了響應(yīng)式的能力，而沒有過多擴(kuò)充 JS 框架的能力。我們選擇了 QuickJS 引擎作為卡片的 JS 引擎,它的體積比較小，而且性能比較高，非常適合動(dòng)態(tài)卡片場景。此外，這一層也擴(kuò)展了 JSApi 和 Timer 異步任務(wù)的能力。
Card Engine 層主要包括了卡片的 Module 管理、組件管理、簡單模板的表達(dá)式、抽象語法樹的解析以及 DOM 的 diff計(jì)算。
RenderEngine 層是整個(gè)渲染的核心的模塊，包括布局、動(dòng)畫能力(2D、3D)、Render、Layer、手勢和其他通用事件。Render 主要負(fù)責(zé)計(jì)算一些渲染相關(guān)的數(shù)據(jù)，Layer 主要負(fù)責(zé)分層的計(jì)算。
動(dòng)態(tài)卡片的高效得益于線程模型的設(shè)計(jì)。運(yùn)行時(shí)的常駐線程主要有以下幾個(gè)：
① Bridge 線程：負(fù)責(zé) Js 指令、Node 樹構(gòu)建、以及相關(guān)節(jié)點(diǎn)的樣式解析和布局的計(jì)算。
② Render 線程：負(fù)責(zé) Render 樹和 Layer 樹的構(gòu)建以及分層繪制樹、手勢相關(guān)的數(shù)據(jù)計(jì)算和渲染數(shù)據(jù)的計(jì)算。其中 Render 即渲染的起始數(shù)，Layer 即分層繪制數(shù)。
③ Paint 線程：負(fù)責(zé)繪制指令的構(gòu)建以及最終的光柵化。Paint 線程是多線程，能夠支持多任務(wù)做渲染繪制，提高渲染性能。
④ 主線程：主要包括手勢識(shí)別以及 UI 管理。
除了以上四個(gè)主要線程，在初始化階段，還有 worker 線程以及 IO 相關(guān)的線程。
數(shù)據(jù)模型主要包含以下四棵樹：
① NodeTree：原始的節(jié)點(diǎn)樹，布局的計(jì)算以及數(shù)據(jù)的變更都依賴于它。
② RenderTree：渲染的變形的數(shù)。它的層級(jí)可能會(huì)發(fā)生變化，比如模板里 zIndex 涉及到一些層級(jí)變化，做 render 樹計(jì)算后最終的層級(jí)會(huì)與實(shí)際的 zIndex 能力一致，因此 render 樹它會(huì)產(chǎn)生節(jié)點(diǎn)層級(jí)的調(diào)整。
③ LayerTree：它主要的作用是分層處理。不同的節(jié)點(diǎn)組件可能在同一層進(jìn)行渲染繪制，而每一個(gè) Layer 節(jié)點(diǎn)都是獨(dú)立的渲染容器，其中包含了很多虛擬節(jié)點(diǎn)，都在同一層里進(jìn)行渲染。因此每一個(gè) Layer 節(jié)點(diǎn)之間都是獨(dú)立的，可以實(shí)現(xiàn)并發(fā)渲染。
④ PaintTree：在每一個(gè) Layer 的節(jié)點(diǎn)內(nèi)部會(huì)有虛擬節(jié)點(diǎn)樹，它們在一層內(nèi)渲染，但同時(shí)也有自己的層級(jí)關(guān)系。
從最開始的原始數(shù)據(jù)，經(jīng)過加工，到 NodeTree、RenderTree，最終到 LayerTree，最終是以 LayerTree 為渲染容器。每一個(gè) Layer 節(jié)點(diǎn)對(duì)應(yīng)一個(gè)獨(dú)立的渲染任務(wù)，它們相互之間沒有任何關(guān)系，可以實(shí)現(xiàn)并發(fā)渲染。下面那個(gè)就是一卡片的，它整個(gè)在初始化到最終上屏的這么過程。
上圖下方的 AB 兩張卡片的上屏全過程。首先從 UI 線程觸發(fā)上屏，在 worker 線程里進(jìn)行初始化，完成后進(jìn)入 Render 進(jìn)行分層計(jì)算、手勢繪制任務(wù)計(jì)算，再到 paint 線程進(jìn)行多線程并發(fā)渲染，最終回到 UI 上屏。
上圖可以看到 A 卡片的內(nèi)部實(shí)現(xiàn)了多線程的渲染，卡片之間是相互獨(dú)立的，能夠支持異步渲染，且能夠保證較低的白屏概率。
卡片的生產(chǎn)/工作流程如下：研發(fā)期主要負(fù)責(zé)卡片的編譯、調(diào)試和預(yù)覽。卡片完成編譯調(diào)試后，再通過卡片關(guān)聯(lián)后臺(tái)完成卡片的上傳和發(fā)布。發(fā)布完成之后，在端上通過 CardSDKName 獲取到最新發(fā)布的卡片，即可在設(shè)備上實(shí)現(xiàn)動(dòng)態(tài)化渲染卡片內(nèi)容。根據(jù)不同的卡片模板可以渲染不同的卡片樣式、布局。
ACK 工具提供了卡片的調(diào)試、編譯功能。通過 ACK 工具可以快速遷移新工程，并編譯調(diào)試代碼，最終通過 playground 預(yù)覽。客戶端 playground 集成 到debug 包里，能夠通過 ACK 工具在本地做編譯并預(yù)覽。DSL 使用了 VUE 的子集語法，可以用前端的任何 ID 來編寫，最終使用 ACK 工具做編譯、預(yù)覽即可。
接下來為卡片從新建到最終預(yù)覽的全流程演示。
首先，通過 ack-h 查看其中涉及的命令。
其中有卡片初始化的命令、簡單的腳手架、工具名以及預(yù)覽。
接下來，通過 act init 命令初始化新建卡片工程。
上圖為基礎(chǔ)的卡片信息包，包含了卡片的路徑、名字等信息。
用 VSCode 將卡片打開。
上圖左側(cè)即卡片的工程文件，包括工程配置文件、main.vue（卡片樣式、邏輯文件） 、 manifest.json（卡片的配置文件、模版本號(hào)、卡片名稱）、mock.json（本地 mock 文件）。
打開 main.vue，其中 template 字段包含了卡片主要的節(jié)點(diǎn)樣式、布局等，script 包含了 JS 的變量聲明、生命周期、JS 邏輯等。methods 里面可以定義 JS 方法，template 里綁定的 click 事件內(nèi)定義了 onClick 方法，可以在其中寫一些自己的邏輯。
style 內(nèi)可以自定義節(jié)點(diǎn)的樣式。
新建完模板后，需要通過“act prepare && act server”指令生成二維碼，用以與調(diào)試工具的連接。
只需要用 debug 調(diào)試工具掃描二維碼，客戶端就能夠與工具的本地模板建立連接了，即可進(jìn)行調(diào)試和預(yù)覽。
使用“act build ”命令編譯本地模板。編譯完成后，左側(cè)新增了 dist 目錄，它是模板的編譯產(chǎn)物。
輸入“act preview”預(yù)覽指令，設(shè)備顯示如下圖：
對(duì)代碼進(jìn)行如下修改。
編譯，預(yù)覽后，設(shè)備顯示如下：
ACT 提供了 alive 指令，修改模板之后只需保存，不需要手動(dòng)編譯、預(yù)覽，即可查看最終效果。
接下來為相對(duì)復(fù)雜的模板演示。
在新建功能后，需要重新掃碼建立連接。通過 build 指令預(yù)覽，效果如下：
在代碼內(nèi)加入 key frame 動(dòng)畫，預(yù)覽查看以后可以看到效果非常流暢。
螞蟻動(dòng)態(tài)卡片已經(jīng)落地于支付寶錢包的諸多場景，有了很多積累和沉淀，實(shí)踐也證明了它的性能和穩(wěn)定性都能夠經(jīng)受住考驗(yàn)，希望它能被更多開發(fā)者看見并使用。
原文鏈接
本文為阿里云原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的动态卡片：富媒体内容井喷式增长下，新一代移动端动态研发的模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux chattr 与 lsatt
- 下一篇： IT人的年夜饭，也太香了吧