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 配置项中添加相关依赖包：

说明：由于 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：

Week SDK 的初始化需要一些配置，其中 setImgAdapter() 用于设置网络图片的加载和显示。Weex 的核心在于 UI 渲染，完成 JS 中的内容与 Native Widget 的显示映射，渲染之外的事情由开发人员自己完成。好在 Weex 提供了一套默认的 Http 请求适配器，即 DefaultWXHttpAdapter ，我们也可以通过 setHttpAdapter() 方法设置自己的请求方式。但是对于图片加载，Weex 没有提供默认方式，需要自己实现，比如这里的 ImageAdapter 类，我用 Glide 实现了图片的下载与显示：

如果没有设置图片适配器的话，应用也不会崩溃，只是图片不会显示而已。另外，不要忘了在 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 文件，代码如下：

可以看到，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，部分效果图如下：

参考链接

• https://esmeetu.gitbooks.io/weex/content/advanced/integrate-to-android.html

• https://yq.aliyun.com/articles/58743

热门推文

★ Android 你应该知道的的应用冷启动过程分析和优化方案

★ Android 阅读 Office 文档，所有你能想到的解决方案都在这啦

★ Android 突破64K方法数的限制

★ ［译］开发安卓Apps，我所努力学习到的三十多条宝贵经验

★ 这「非常7+1」条小贴士，助你Coding水平再提一阶！

★ 推荐｜一张思维导图，告诉你Android新手如何快速入门

阅读原文 See【YiFeng ' Zone】