一、环境搭建
1.1 搭建工程结构
在WeexApp目录下创建一个新的Android工程，命名为WeexApp，包名为com.demo.lizejun.weexapp，以下是创建的普通工程：
普通工程
1.2 配置开发环境
安装Node.js和npm，到官网安装到最新的Node.js稳定版本，下载地址为 http://nodejs.cn/download/，安装后的Node.js版本为v8.9.3，npm在安装Node.js的时候也会自动安装，其版本号为5.6.0，下载完之后进行链接：
>> sudo ln -s /home/lizejun/Software/node-v8.9.3-linux-x64/bin/node /usr/local/bin/node
>> sudo ln -s /home/lizejun/Software/node-v8.9.3-linux-x64/bin/npm /usr/local/bin/npm
使用下面的命令验证是否安装正常：
Node.js 和 npm 版本信息
安装weex开发套件，weex-toolkit
>> sudo npm install -g weex-toolkit
执行完这一步之后，在/home/lizejun/Software/node-v8.9.3-linux-x64/bin目录下就会创建weex，之后对命令进行链接：
>> sudo ln -s /home/lizejun/Software/node-v8.9.3-linux-x64/bin/weex /usr/local/bin/weex
通过下面的命令 校验是否安装成功：
>> sudo weex
sudo weex 结果
1.3 初始化 Weex 工程
在WeexApp目录中执行下面的命令，进行 初始化工程，工程名称为WeexPageFolder
>> sudo weex init WeexPageFolder
之后在WeexPageFolder中会自动创建下面的这些文件：
初始化工程
通过npm进行安装：
>> sudo npm install
之后会多创建出一个node_modules文件夹则表示安装成功：
新增 node_modules 文件夹
1.4 编译 index.js 文件
在WeexPageFolder/src下创建index.vue文件，输入下面的内容：
<template>
<div>
<text class="text">{{text}}</text>
</div>
</template>
<style>
.text {
font-size: 50;
}
</style>
<script>
export default {
data () {
return {
text: 'Hello World.'
}
}
}
</script>
通过下面的命令可以实时预览效果：
>> npm run dev & npm run serve
保存该文件后，进入到WeexPageFolder根目录下，使用下面的命令编译index.vue，并将编译后的index.js拷贝到app/main/assets下，之后打包到App当中。
>> sudo weex compile src/ ../app/src/main/assets/
也可以使用
sudo npm run build命令，运行该命令后将会在WeexPageFolder/dist目录下生成index.js文件，然后将该文件拷贝过去。
最终，在app/src/main/res/assets目录下生成.js文件
生成 index.js 文件
1.5 导入 Weex 的 Android SDK 并运行本地 .js 文件
准备好index.js文件之后，最后一步就是接入Weex的Android SDK，首先修改app/build.gradle文件，添加依赖项目：
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:recyclerview-v7:25.3.1'
compile 'com.android.support:support-v4:25.3.1'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
compile 'com.taobao.android:weex_sdk:0.17.0@aar'
compile 'com.alibaba:fastjson:1.2.9'
compile 'com.github.bumptech.glide:glide:3.7.0'
testCompile 'junit:junit:4.12'
}
自定义Application和ImageAdapter：
public class WeexApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
InitConfig config = new InitConfig.Builder().setImgAdapter(new CommentSDKWeeXImageAdapter()).build();
WXSDKEngine.initialize(this, config);
}
}
public class CommentSDKWeeXImageAdapter implements IWXImgLoaderAdapter {
public CommentSDKWeeXImageAdapter() {}
@Override
public void setImage(final String url, final ImageView view,
WXImageQuality quality, final WXImageStrategy strategy) {
WXSDKManager.getInstance().postOnUiThread(new Runnable() {
@Override
public void run() {
if (view == null || view.getLayoutParams() == null) {
return;
}
if (TextUtils.isEmpty(url)) {
view.setImageBitmap(null);
return;
}
if (url.startsWith("file://")) {
Glide.with(WXEnvironment.getApplication()).load(url).into(view);
return;
}
String temp = url;
if (url.startsWith("//")) {
temp = "http:" + url;
}
Glide.with(WXEnvironment.getApplication()).load(temp).asBitmap().into(new WeeXImageTarget(strategy, url, view));
}
}, 0);
}
private class WeeXImageTarget extends SimpleTarget<Bitmap> {
private WXImageStrategy mWXImageStrategy;
private String mUrl;
private ImageView mImageView;
WeeXImageTarget(WXImageStrategy strategy, String url, ImageView imageView) {
mWXImageStrategy = strategy;
mUrl = url;
mImageView = imageView;
}
@Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
mImageView.setImageBitmap(resource);
}
@Override
public void onLoadFailed(Exception e, Drawable errorDrawable) {}
}
}
在主Activity中加载预置的index.js文件：
public class HomeActivity extends AppCompatActivity {
WXSDKInstance mWXSDKInstance;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
mWXSDKInstance = new WXSDKInstance(this);
mWXSDKInstance.registerRenderListener(mIWXRenderListener);
mWXSDKInstance.render("WXSample",
WXFileUtils.loadAsset("index.js", this),
null, null, -1, -1,
WXRenderStrategy.APPEND_ASYNC);
}
@Override
protected void onStart() {
super.onStart();
if (mWXSDKInstance != null) {
mWXSDKInstance.onActivityStart();
}
}
@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();
}
}
private IWXRenderListener mIWXRenderListener = new IWXRenderListener() {
@Override
public void onViewCreated(WXSDKInstance instance, View view) {
ViewGroup rootView = (ViewGroup) getWindow().getDecorView().findViewById(android.R.id.content);
rootView.addView(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) {
}
};
}
1.6 源码路径
整个工程的源码路径为 https://github.com/imZeJun/WeexApp。
二、相关资料
Weex 官网 - 搭建开发环境
Weex 官网 - Android Demo
Weex 官网 - 手册
Weex 项目实战
