前文《天貓客戶端組件動態化的方案——VirtualView 上手體驗》都提到了自定義模板編譯成二進制數據的過程，在 Android 版的 Playground 里內置了一個編譯工具可以實時調測，然而業務開發過程中，不可能在手機上編譯，而是在電腦或者后臺去編譯模板。因此這里提供了一個獨立的工具來編譯模板，這里介紹下它的使用方法。
相關開源庫
Android
- Tangram-Android
- Virtualview-Android
iOS
- Tangram-iOS
- Virtualview-iOS
前世今生
工具的源碼也提交在 github 上。在一開始的設計里，編譯模塊是針對控件來設計的，每一個控件如 NText、NImage、VHLayout 等都有自己的編譯類，編譯類的繼承結構體系與控件本身的繼承結構體系一樣。它們各自會解析對應控件的屬性及控件本身的類型，將其轉換成整型值或索引序列化到最終輸出文件里；這就帶來了一個問題，當需要擴展控件屬性，或者添加自定義控件的時候，需要編寫一個新的編譯類注冊到編譯工具里，這對開發者來說十分不友好，且不說還得搭建編譯工具工程的本身的運行環境，還得熟悉編譯器類的編寫邏輯才行。從下圖的原始設計圖就可以看出其復雜性。
為了解決這一弊端，對原始設計進行了重構，重構的核心目標就是不依賴源碼就能進行模板編譯，思路是通過配置化的方式聲明描述控件類型、屬性類型、解析方式等，方案實施上是將原先針對控件編寫編譯類的模式改成針對屬性來編譯寫編譯類，只需要一個通用的屬性編譯類即可，具體行為都通過配置文件來描述。將重構后的工具模板導出可執行文件，就可以在項目中直接使用了。廢話了這么多，接下來就是本文的重點了。
使用說明
獨立運行模式
文件介紹
下載源碼之后，可執行工具存放在目錄 TemplateWorkSpace 里，包含以下幾個文件/目錄（或運行后產生）：
| 文件 | 作用 |
|---|---|
| config.properties | 配置組件 ID、xml 屬性對應的 value 類型 |
| templatelist.properties | 編譯的模板文件列表 |
| build | 二進制文件的輸出目錄 |
| template | xml 的存放路徑 |
| compiler.jar | java 代碼編譯后 jar 文件，執行 xml 的編譯邏輯 |
| buildTemplate.sh | 編譯執行文件 |
如何運行
- 打開命令行 執行
sh buildTemplate.sh - 模板編譯后的文件會輸出到 build 路徑下
配置 config.properties
VIEW_ID_XXXX- 配置 xml 節點 id
- 如配置
VIEW_ID_FrameLayout=1，則 xml 節點中的<FrameLayout>在編譯后會用數值1代替 - 節點配置以
VIEW_ID_開頭
property=ValueType- 配置屬性值的類型，配置對所有模板生效，不支持在 1.xml 和 2.xml 中對相同的屬性用不同的 ValueType 解析
- 目前已經支持
- 常規類型：
String(默認，不需要配置)、Float、Color、Expr、Number、Int、Bool - 特殊類型
Flag、Type、Align、LayoutWidthHeight、TextStyle、DataMode、Visibility - 枚舉類型
Enum<name:value,……>- 枚舉說明：
- 如配置
flexDirection=Enum<row:0,row-reverse:1,column:2,column-reverse:3> - 在解析屬性是配置
row直接轉化成int:0，row-reverse轉成int:1
- 如配置
- 枚舉說明：
- 常規類型：
DEFAULT_PROPERTY_XXXX- 為了兼容就模板的編譯，寫的強制在二進制中寫入一些屬性類型定義，可以忽略
配置 templatelist.properties
- 格式
xmlFileName=outFileName,Version[,platform]xmlFileName標識 template 目錄下需要編譯的 xml 文件名建議不帶.xml后綴，目前做了兼容outFileName輸出到 build 目錄下的.out文件名Version表示 xml 編譯后的版本號platform同時兼容 iOS 和 android 時不寫，可填的值為android和iphone
xml 文件模板編寫
- 和以前的方式一樣，不需要額外寫 Java 代碼，只需要對新增的屬性在config.properties 中配置 ValueType
接口模式
除了直接使用命令行執行工具，還可以基于此搭建完整成熟的模板工具，它可以是個客戶端，也可以是個后端服務，或者是個插件，所以需要提供接口模式供宿主程序調用。
//初始化構建對象
ViewCompilerApi viewCompiler = new ViewCompilerApi();
//設置配置文件加載器
viewCompiler.setConfigLoader(new LocalConfigLoader());
//讀取模板數據
FileInputStream fis = new FileInputStream(rootDir);
//調用接口，傳入必備參數，此時不區分平臺，如果要區分平臺，使用方單獨編譯即可
byte[] result = viewCompiler.compile(fis, "icon", 13);
復制代碼
 運行流程)
