VirtualView 工具大更新

前文《天貓客戶端組件動態化的方案——VirtualView 上手體驗.md》都提到了自定義模板編譯成二進制數據的過程，在 Android 版的 Playground 裏內置了一個編譯工具可以實時調測，然而業務開發過程中，不可能在手機上編譯，而是在電腦或者後臺去編譯模板。因此這裏提供了一個獨立的工具來編譯模板，這裏介紹下它的使用方法。

前世今生

工具的源碼也提交在 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);

摘自：VirtualView 工具大更新啦