VirtualView接入及開發環境搭建

VirtualView接入

sdk接入

1. 引入aar依賴

compile ('com.alibaba.android:virtualview:1.0.5@aar') {
    transitive = true
}

2. 在application中初始化,提供全局VafContext及ViewManager

//構建VafContext對象
VafContext vafContext = new VafContext(mContext.getApplicationContext());
//初始化ViewManager
ViewManager viewManager = vafContext.getViewManager();
viewManager.init(mContext.getApplicationContext());

3. 自定義圖片組件並註冊，官方demo有picasso的例子。這裏以Fresco爲例,其他自定義組件也類似，參考自定義基礎組件

   這裏1014是自定義組件的id，每個組件對應一個id，可覆蓋自帶組件的id實現自定義基礎組件。建議從 1001開始，前 1000 保留給系統使用。

sViewManager.getViewFactory().registerBuilder(1014,new FrescoImage.Builder())

4. 註冊事件，可註冊點擊、曝光、長按、觸摸事件
   事件說明

//點擊事件
sVafContext.getEventManager().register(EventManager.TYPE_Click, new ClickProcessorImpl());
//曝光事件
sVafContext.getEventManager().register(EventManager.TYPE_Exposure, new ExposureProcessorImpl());

5. 加載動態佈局二進制文件

//方式1，.out文件路徑加載
viewManager.loadBinFileSync(file_path);
//方式2，二進制數組
viewManager.loadBufferSync(byte[])

6. 頁面中設置容器，綁定數據、渲染

//根據xml文件名獲取VirtualView，在編譯xml時配置的名稱
View container = vafContext.getContainerService().getContainer(name, true);
//數據綁定,綁定對應佈局的json數據
IContainer iContainer = (IContainer)container;
iContainer.getVirtualView().setVData(data);

xml開發工具

需要工具

• xml編輯器:SublimeText
• xml編譯.out工具:virtualview_tools
• xml界面預覽:IOS PlayGround、Android PlayGround

編譯工具

下載virtualview_tools，通過VirtualView-tools編譯XML模板，輸出.out文件及文件MD5

1. 配置組件ID及屬性type：compiler-tools/config/config.properties

\\配置viewId,例如自定義FrescoImage的id設爲1014，這裏id需要與virtualview初始化時FrescoImage註冊的id一致，這樣才能根據xml中組件id映射到native組件。
VIEW_ID_FrescoImage=1014
\\配置屬性類型
layoutMarginTop=Number

2. 配置需要編譯xml文件列表：compiler-tools/config/templatelist.properties

/**
 * xmlFileName需要編譯的xml文件名
 * outFileName編譯輸出文件名，outFileName會編譯進二進制文件中，客戶端通過outFileName生成對應VirtualView
 * Version xml模板的版本號
 */
xmlFileName=outFileName,Version

3. 編寫xml模板放在compiler-tools/TemplateWorkSpace/template目錄
4. 執行sh buildTemplate.sh腳本編譯xml模板，輸出.out文件，輸出目錄：compiler-tools/TemplateWorkSpace/build

out目錄：xml模板編譯成的.out文件
java目錄：xml模板編譯成的二進制數組類
sign目錄：.out文件的MD5碼，供客戶端校驗用
txt目錄：XML 模板編譯成二進制數據之後的十六進制字符串形式

界面實時預覽工具

• 需要環境：

  • java- 編譯xml
  • python- 搭建本地WebServer，提供模板.out及數據json給客戶端
  • brew- 安裝fswatch、qrencode。安裝方法1-官網、安裝方法2-國內鏡像
  • fswatch- 監聽xml模板文件變化
  • qrencode- 生成文件本地服務地址二維碼

• 原理：
  
  通過fswatch監聽xml文件變化，將xml編譯成.out文件與模板數據json封裝成一個data.json文件發佈到LocalServer，客戶端獲取後解析.out文件完成數據綁定和渲染，從而實現實時預覽。

• 使用：

  1、開啓localServer服務，切到 /compiler-tools/realtime-preview 目錄執行 run.sh啓動服務

  2、修改Playground的LocalServer地址
  https://github.com/alibaba/Virtualview-Android/blob/master/app/src/main/java/com/tmall/wireless/virtualviewdemo/preview/util/HttpUtil.java#L16，改爲localServer地址，

  3、打開demo的<模板實時預覽>,點擊對應模板預覽