Weex 探索系列（二）Android 集成

2016-11-11

在 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 工具的话，也可以直接克隆：

1	git clone https://github.com/alibaba/weex

打开自己的安卓工程，依次点击 File -> New -> Import Module… ，选择 Weex SDK (路径：weex_dev/android/sdk)。然后在 app/build.gradle 文件中添加 Library 依赖：

1	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，表示全屏。编译运行，手机显示效果如图：