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

1
2
3
4
5
6
7
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 开源项目,你也可以 FrescoPicasso等其他实现方式。

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 实现了图片的下载与显示:

1
2
3
4
5
6
7
8
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 文件,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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 的地址):

1
mWXSDKInstance.renderByUrl(getLocalClassName(), url, null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);

语法和组件


Weex 有着固定的编程语法,目前也提供了诸如 image、list、input 等常见的 UI 组件,官方文档有很详细的介绍。另外,Weex 团队也提供了一套完整的 Android Demo,可供参考学习:playground,部分效果图如下:

playground.gif

参考链接