天貓客戶端組件動態化方案——VirtualView 工具大更新

前文《天貓客戶端組件動態化的方案——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);
複製代碼