Weex元件與子產品封裝（Android）

Weex元件

Android Studio配置

1. 在Android Manifest.xml 中添加網絡權限等權限。

< uses-permission android :name= "android.permission.INTERNET" /> //網絡權限 < uses-permission android :name= "android.permission.WRITE_EXTERNAL_STORAGE" /> //存儲權限 < uses-permission android :name= "android.permission.READ_EXTERNAL_STORAGE" /> < uses-permission android :name= "android.permission.CAMERA" /> //相機權限

1. 建立MyAplication繼承Aplication類，在類中啟動WXSDKEngine，用于渲染UI。

1. 其中ImageAdapter是一個自定義的類，用于加載圖檔。如何沒有配置這個ImageAdapter，将無法顯示圖檔。

   

2. 在MainActvity中渲染UI。

Weex原生元件開發

這裡主要講weex調用native方法以及native元件。主要有三種方式：module方式，componont方式（hander），adapter方式。

1. Module 調用方式

1. Module 擴充必須繼承 WXModule 類。
2. 擴充方法必須加上 @WXModuleAnno 注解或者@JSMethod注解。需要在vue中使用回調獲得資料是使用後者。Weex 會根據注解來判斷目前方法是否要運作在 UI 線程，和目前方法是否是擴充方法。
3. weex 是根據反射來進行調用 Module 擴充方法，是以Module中的擴充方法必須是 public 類型。
4. Module 擴充的方法可以使用 int, double, float, String, Map, List 類型的參數。
5. 完成Module 後一定要在初始化時注冊 WXSDKEngine.registerModule("myModule", MyModule.class); 。

   需要回調獲得資料的例子

傳遞參數的例子

在vue通過var module=weex.requirModule（ ‘ moduleName ’ ）獲得對象可以調用其方法

1. Component 調用方式

1. Component 擴充類必須內建 WXComponent.
2. 對應的設定屬性的方法必須添加注解 @WXComponentProp(name=value)
3. Weex sdk 通過反射調用對應的方法，是以 Component 對應的屬性方法必須是 public。
4. 擴充的方法可以使用 int, double, float, String, Map, List 類型的參數
5. 完成Component 後一定要在初始化時注冊 WXSDKEngine.registerComponent("richtext",RichText.class);

示例如下:

注冊：

注冊完成後可以直接在vue中使用： <looper data=”list”> </looper>

1. Adapter 調用方式

  Weex 對一些基礎功能實作了統一的接口，可實作這些接口來定制自己的業務。例如：圖檔加載，網絡請求，存儲管理等。圖檔加載是一個我們必須使用而weex沒有實作的adapter，是以開發weex項目首先要實作對圖檔加載adapter的配置。

注冊Adapter

三者使用情景： module 調用一般是在前端隻是要調用native方法獲得資料或者跳轉界面時使用；component調用一般是在需要使用native元件（UI）時使用；adapter是在需要優化一些基礎功能如圖檔加載，網絡連接配接或者存儲時需要使用。 一些需要注意的地方： 優化過場動畫，過場和 console 容易引起 app 閃退 需要注意 降低 js <-> native 的通信頻率 優化list結構，降低重排重繪壓力(緩存和複用)