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），欢迎关注。