Weex 探索系列（二）Android 集成

在 Weex 探索系列（一）初識和環境搭建 一文中，咱們初步瞭解了 Weex 的前因後果，包括環境搭建和一些學習資源。這篇文章，來看看如何在 Android 工程中集成 Weex 和 一些基本使用。

Weex 依賴

---

Android 工程集成 Weex SDK 的方式與普通 SDK 的接入同樣，目前有兩種方式可供選擇：Gradle 遠程依賴 和 Library 源碼依賴。

在開始依賴以前，有兩個限制條件須要咱們知道一下。第一點，CPU 架構：Weex 要求目標安卓設備 CPU 採用的是 ARM 架構，不支持 X86 架構的處理器（備註：目前市場上的安卓手機比較多的仍是採用 ARM 體系的曉龍 CPU）。第二點，API 版本：支持 API 14 及更高版本，因此在集成以前，記得先檢查一下你的 Android 工程中 minSdkVersion 值的大小。

Gradle 遠程依賴

打開 app/build.gradle 文件，在 dependencies 配置項中添加相關依賴包：

compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'

compile 'com.alibaba:fastjson:1.1.46.android'
compile 'com.taobao.android:weex_sdk:0.5.1@aar'
compile 'com.github.bumptech.glide:glide:3.7.0'複製代碼

說明：因爲 Weex 採用映射 Android 系統原生控件達到 Native App 的體驗，因此須要前面三個基本的 Android SDK 的依賴。fastjson 是 Weex 實現 JSON 數據解析要用的庫，weex_sdk 是 Android 項目使用 Weex 功能而嵌入的工具。關於版本號，我這裏使用的不是各自依賴項的最新版本，而是 Weex SDK 所要用到的最小兼容版本，實際使用過程當中只能比列舉的版本號更大。最後一個是圖片加載庫，Weex SDK 自身含有 Http 請求功能，而沒有圖片下載顯示功能，須要安卓開發人員本身實現，因此這裏我用了 Glide 開源項目，你也能夠 Fresco、Picasso等其餘實現方式。

Library 源碼依賴

使用這種依賴方式的弊端在於沒法經過 Gradle 實現依賴庫的自動更新。從 GitHub 網站下載 Weex SDK，固然若是電腦上安裝有 Git 工具的話，也能夠直接克隆：

git clone https://github.com/alibaba/weex複製代碼

打開本身的安卓工程，依次點擊 File -> New -> Import Module... ，選擇 Weex SDK (路徑：weex_dev/android/sdk)。而後在 app/build.gradle 文件中添加 Library 依賴：

compile project(':weex_sdk')複製代碼

初始化和配置

---

在自定義的 Application 類中初始化 Weex SDK：

public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        InitConfig.Builder builder = new InitConfig.Builder();
        builder.setImgAdapter(new ImageAdapter());

        InitConfig config = builder.build();
        WXSDKEngine.initialize(this, config);

    }
}複製代碼

Week SDK 的初始化須要一些配置，其中 setImgAdapter() 用於設置網絡圖片的加載和顯示。Weex 的核心在於 UI 渲染，完成 JS 中的內容與 Native Widget 的顯示映射，渲染以外的事情由開發人員本身完成。好在 Weex 提供了一套默認的 Http 請求適配器，即 DefaultWXHttpAdapter ，咱們也能夠經過 setHttpAdapter() 方法設置本身的請求方式。可是對於圖片加載，Weex 沒有提供默認方式，須要本身實現，好比這裏的 ImageAdapter 類，我用 Glide 實現了圖片的下載與顯示：

public class ImageAdapter implements IWXImgLoaderAdapter{

    @Override
    public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
        Glide.with(WXEnvironment.getApplication()).load(url).into(view);
    }

}複製代碼

若是沒有設置圖片適配器的話，應用也不會崩潰，只是圖片不會顯示而已。另外，不要忘了在 Manifest.xml 文件中添加自定義的 Application 類和網絡請求的權限。

基本調用

---

還記得上篇文章中，咱們說過，每一個 .we 格式的 Weex 源文件使用 Weex Toolkit 工具編譯事後都會產生一個 .js 格式的對應文件嗎？這裏就要用到了。咱們將上篇文章中編譯獲得的 hello.js 複製到 Android 工程 app/src/main/assets 文件夾下，若是沒有該文件夾，新建一個便可。

Weex SDK 在 Android 應用中只是負責將 js 內容渲染出來，在取到 js 文件內容後，會返回一個 View 對象交由 Android 工程本身處理，好比提供給 Activity 供其設置內容視圖，顯示在手機屏幕上。

新建一個 Actiivty 類，建立一個 WXSDKInstance 實例，設置渲染監聽器，並加載 assets 本地文件夾中的 hello.js 文件，代碼以下：

public class MainActivity extends AppCompatActivity implements IWXRenderListener{

    private WXSDKInstance mWXSDKInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        mWXSDKInstance.render(getLocalClassName(), WXFileUtils.loadFileContent("hello.js", this),
                null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
    }

    @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        setContentView(view);
    }

    @Override
    public void onRenderSuccess(WXSDKInstance instance, int width, int height) {

    }

    @Override
    public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {

    }

    @Override
    public void onException(WXSDKInstance instance, String errCode, String msg) {

    }


    @Override
    protected void onResume() {
        super.onResume();
        if(mWXSDKInstance!=null){
            mWXSDKInstance.onActivityResume();
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        if(mWXSDKInstance!=null){
            mWXSDKInstance.onActivityPause();
        }
    }

    @Override
    protected void onStop() {
        super.onStop();
        if(mWXSDKInstance!=null){
            mWXSDKInstance.onActivityStop();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if(mWXSDKInstance!=null){
            mWXSDKInstance.onActivityDestroy();
        }
    }

}複製代碼

能夠看到，IWXRenderListener 監聽器裏包含有渲染成功、失敗、異常、刷新等回調函數，渲染成功後返回一個 View 對象，供 Activity 使用。這裏我沒有用到 layout 佈局文件，直接將這個 View 對象設置爲 Activity 的內容來顯示。固然，也可使用 layout 佈局文件，採用 layout 和 js 視圖內容混合顯示的方式來設置整個 Activity 界面，使用 addView() 方法將這個 View 對象添加到 layout 的外層容器中便可。

render()渲染函數的參數能夠能夠參考源碼介紹，其中 width 和 height 表示 View 的大小，可設置爲 -1，表示全屏。編譯運行，手機顯示效果如圖：

這裏是本地 js 文件的加載，若是 js 文件放置在遠程服務器上，可使用下面的方法加載（url 參數爲遠程 js 的地址）：

mWXSDKInstance.renderByUrl(getLocalClassName(), url, null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);複製代碼

語法和組件

---

Weex 有着固定的編程語法，目前也提供了諸如 image、list、input 等常見的 UI 組件，官方文檔有很詳細的介紹。另外，Weex 團隊也提供了一套完整的 Android Demo，可供參考學習：playground，部分效果圖以下：

playground.gif

參考連接

---

• esmeetu.gitbooks.io/weex/conten…

• yq.aliyun.com/articles/58…

歡迎關注我

---

本文由 亦楓 創做並首發於 亦楓的我的博客 ，同步受權微信公衆號：技術鳥（NiaoTech），歡迎關注。