天貓客戶端組件動態化的方案——VirtualView 上手體驗

時間 2019-11-24

標籤天貓客戶端組件動態方案 virtualview 上手體驗简体版

原文原文鏈接

在以前的文章《貓客 Tangram 頁面內組件的動態化方案》、VirtualView Android實現詳解（一）裏介紹了 VirtualView 方案，不過內容都側重與設計和實現原理，在進一步介紹其餘細節以前，仍是先來直觀感覺下它是什麼、它能實現的效果和它的使用方式吧。android

VirtualView 簡介

什麼是 VirtualView

簡單講，就是咱們實現了一系列自定義控件，創建的經過自定義 XML 方式引用這些控件來搭建 UI 視圖，而後經過引擎解析 XML 數據並渲染出界面的方案。就比如在 Android 裏寫 XML 佈局文件而後渲染展現，或者寫 HTML 文件在瀏覽器裏渲染展現這兩種方式。git

爲何叫 VirtualView

在咱們實現的自定義控件裏，除了一部分基於系統控件封裝實現的控件，還有一類是基於 Canvas 繪製的方式實現的控件，它們依賴與一個實體的宿主控件存在，在最終渲染出來的時候不存在一一對應的實體 View，稱之爲虛擬化控件，VirtualView 由此得名。github

與 Android 平臺的佈局文件有什麼不一樣

整套方案的設計必定程度上借鑑吸收了 Android 平臺上經過 XML 搭建界面的方式，其中最大的不一樣在與簡化了不少處理，脫離了平臺限制，在 iOS 上也實現了一套方案，能夠編寫一份模板在兩個平臺上運行。而且搭配上自定義 XML 數據的動態下發加載能力，能夠實現對端上界面視圖的動態調整。瀏覽器

VirtualView 的主要功能

一份模板，在 Android、iOS 兩端運行；
提供基礎的原子控件與容器控件，支持加入自定義控件，詳情見文檔；
支持在 XML 模板裏寫數據綁定表達式動態綁定數據；
支持虛擬化的控件，混合使用虛擬控件和實體控件；
運行時動態加載 XML 模板數據，動態更新界面結構；
註冊事件處理器響應業務邏輯；

關於 VirtualView 的源碼

已經開源此方案，能夠在 Github 上查看：bash

此方案能夠單獨使用，而也能夠配合 Tangram 使用，關於 Tangram，也能夠在 Github 上查看：app

VirtualView 使用

使用 VirtualView 開發一個組件

大概須要這麼幾個過程：編寫模板 —— 編譯模板 —— 下發到客戶端 —— 渲染；工具

首先編寫模板，能夠經過咱們提供的初版工具 virtualview_tools 編寫，像上圖中 FrameLayout、NImage、NText 都是內置的控件，設置好各類屬性，能夠寫死也能夠經過表達式綁定一個數據字段引用。
編譯模板，上文提到的引擎加載 XML 並非直接加載原始 XML 文件，而是先經過 virtualview_tools 編譯成一段二進制數據，後綴爲 out。
下發到客戶端，前兩個步驟都是在客戶端運行時以外進行的，這裏的下發到客戶端有兩種含義，一種是直接將編譯結果打包到客戶端里加載，另外一種是發佈到 cdn 上，讓客戶端去下載。
渲染，方案引擎會加載這份二進制數據，並綁定數據渲染出來。

Playground

爲了方便上手體驗，作了一個 Playground ，能夠體驗內置基礎控件的能力，以及幾個業務場景下使用的真實組件，還將編譯模板的能力內置到 app 裏，能夠在 app 裏編譯 XML 模板並看效果。佈局

源碼地址：

github.com/alibaba/Vir…post

如下是幾個 Playground 裏經過 VirtualView 方案繪製的界面：

基礎控件演示

業務場景演示

上手體驗

下載 Playground 並運行，以下操做：

點擊左圖 Parse XML ，進入右圖；
點擊『點擊編譯/sdcard/virtualview.xml文件』按鈕，就會實時編譯一份原始 XML 並加載到內存裏，而後渲染出一個 View，貼到下方，如右圖綠色框內演示的那樣。

第一次點擊若是 /sdcard/virtualview.xml 文件不存在，會從 Playground 的asset 裏拷貝一份文件過去，圖上展現的就是默認的效果；用戶能夠本身傳一份 XML 文件到路徑 /sdcard/virtualview.xml，或者基於 Playground 裏的修改，而後編譯運行。

默認模板代碼

上圖中的模板文件和數據源碼分別以下：（一個橫向線性佈局加一個圖和一個文本，除了固定的寬高，動態數據經過表達式從 JSON 數據裏獲取）

<?xml version="1.0" encoding="utf-8"?>
<VHLayout
        flag="flag_exposure|flag_clickable"
        orientation="H"
        layoutWidth="match_parent"
        layoutHeight="wrap_content">
    <NImage
            id="1"
            src="${logoUrl}"
            layoutMarginLeft="8"
            layoutMarginRight="8"
            layoutMarginTop="8"
            layoutMarginBottom="8"
            layoutWidth="32"
            layoutHeight="32"/>
    <NText
            id="2"
            text="${title}"
            layoutGravity="v_center"
            gravity="${style.text-align}"
            textSize="${style.font-size}"
            textColor="${style.color}"
            layoutWidth="match_parent"
            layoutHeight="wrap_content"/>
</VHLayout>
複製代碼

{
  "style": {
    "text-align": "h_center",
    "font-size": "20",
    "color": "#FF5000"
  },
  "title": "超高性 99.9% 的用戶以爲很快",
  "logoUrl": "https://gw.alicdn.com/tfs/TB1yGIdkb_I8KJjy1XaXXbsxpXa-72-72.png"
}
複製代碼

虛擬化控件演示

<?xml version="1.0" encoding="utf-8"?>
<VHLayout
        flag="flag_exposure|flag_clickable"
        orientation="V"
        layoutWidth="match_parent"
        layoutHeight="wrap_content">
    <VHLayout
            flag="flag_exposure|flag_clickable"
            orientation="H"
            layoutWidth="match_parent"
            layoutHeight="wrap_content">
        <NImage
                id="1"
                src="${logoUrl}"
                layoutMarginLeft="8"
                layoutMarginRight="8"
                layoutMarginTop="8"
                layoutMarginBottom="8"
                layoutWidth="32"
                layoutHeight="32"/>
        <NText
                id="2"
                text="${title}"
                layoutGravity="v_center"
                gravity="${style.text-align}"
                textSize="${style.font-size}"
                textColor="${style.color}"
                layoutWidth="match_parent"
                layoutHeight="wrap_content"/>
    </VHLayout>
    <VHLayout
            flag="flag_exposure|flag_clickable"
            orientation="H"
            layoutWidth="match_parent"
            layoutHeight="wrap_content">
        <VImage
                id="1"
                src="${logoUrl}"
                layoutMarginLeft="8"
                layoutMarginRight="8"
                layoutMarginTop="8"
                layoutMarginBottom="8"
                layoutWidth="32"
                layoutHeight="32"/>
        <VText
                id="2"
                text="${title}"
                layoutGravity="v_center"
                gravity="${style.text-align}"
                textSize="${style.font-size}"
                textColor="${style.color}"
                layoutWidth="match_parent"
                layoutHeight="wrap_content"/>
    </VHLayout>
</VHLayout>
複製代碼