Weex 探索系列（二）Android 整合

亦楓發表於2016-12-23
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，表示全屏。編譯執行，手機顯示效果如圖：

Weex 探索系列（二）Android 整合

這裡是本地 js 檔案的載入，如果 js 檔案放置在遠端伺服器上，可以使用下面的方法載入（url 引數為遠端 js 的地址）：

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

語法和元件

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

Weex 探索系列（二）Android 整合
playground.gif

參考連結

歡迎關注我

本文由 亦楓 創作並首發於 亦楓的個人部落格 ，同步授權微信公眾號：技術鳥（NiaoTech），歡迎關注。

Weex 探索系列（二）Android 整合

相關文章