Android项目中集成Weex
1.1、参考

参考文档一

参考文档二

1.2、使用Android Studio创建一个Android工程
1.3、配置依赖
1.3.1、依赖aar

Weex的维护者会在jCenter上定期发布稳定版本。如果您在正式项目中使用,那么最好使用这种方式。

build.gradle文件中加入如下的依赖配置:

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'
1.3.2、依赖源代码

Weex源代码无法保证稳定性,但是却可以使用最新的功能。如果您是学习或者对于稳定性的要求不高,可以使用这种方式。

1、下载源码:

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

2、将sdk目录直接复制到我们创建的Android工程中:

cp -r weex/android/sdk ProjectName/weex_sdk

3、在build.gradle文件中加入如下的依赖配置:

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 ('path:weex_sdk')

4、在build.gradle文件中加入如下的ndk的配置:

defaultConfig {
    ndk{
        abiFilters "x86"
        abiFilters "armeabi"
    }
}
1.4、在AndroidManifest.xml中配置访问网络的权限
<uses-permission android:name="android.permission.INTERNET" />
1.5、编写一个类,实现com.taobao.weex.adapter.IWXImgLoaderAdapter接口

注意:图片加载接口是您必须要实现并进行配置的,否则将无法展现图片。

Android中,我们通常使用Glide或者Picasso这样的图片加载库。

这里我们使用Glide实现,这也是Google官方推崇的图片加载框架。

build.gradle文件中加入Glide的依赖配置:

compile 'com.github.bumptech.glide:glide:3.7.0'

下面是具体实现:

package com.fpliu.weexandroidtest;

import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.taobao.weex.adapter.IWXImgLoaderAdapter;
import com.taobao.weex.common.WXImageStrategy;
import com.taobao.weex.dom.WXImageQuality;

public final class WeexImageAdapter implements IWXImgLoaderAdapter {

    @Override
    public void setImage(String url, ImageView imageView, WXImageQuality quality, WXImageStrategy strategy) {
        Glide.with(imageView.getContext())
                .load(url)
                .diskCacheStrategy(DiskCacheStrategy.ALL)//缓存整张
                .placeholder(R.drawable.ic_launcher)//设置加载中占位图
                .error(R.drawable.ic_launcher)//设置加载失败占位图
                .crossFade()
                .into(imageView);
    }
}
1.6、编写一个类,继承自android.app.Application类

下面是具体实现:

package com.fpliu.weexandroidtest;

import android.app.Application;

import com.taobao.weex.InitConfig;
import com.taobao.weex.WXSDKEngine;

public final class MyApp extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        InitConfig config = new InitConfig.Builder().setImgAdapter(new WeexImageAdapter()).build();
        WXSDKEngine.initialize(this, config);
    }
}

将该类配置到AndroidManifest.xml中。

1.7、编写一个Activity类

下面是具体实现:

package com.fpliu.weexandroidtest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

import com.taobao.weex.IWXRenderListener;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.common.WXRenderStrategy;
import com.taobao.weex.utils.WXFileUtils;

import java.util.Map;

public class MainActivity extends AppCompatActivity implements IWXRenderListener {

    private WXSDKInstance mWXSDKInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);

        //开始渲染Weex界面
        render();
    }

    private void render() {

    }

    @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();
        }
    }
}

这里有两个方法可以使用,WXSDKInstance类的render方法加载assets目录中的经过转换后的js, 而WXSDKInstance类的renderByUrl方法用于加载部署在服务器端的经过转换后的js。 如果部署在服务器端,那么,我们就不用经常发布版本了。

1.7.1、部署在本地

app模块中的src/main目录中创建assets目录, 将.we文件转换后的js文件复制到assets目录中。

cp ~/WeexTest/weex_tmp/h5_render/weex-bootstrap.js assets/hello.js

此时,render方法的实现如下:

private void render() {
    /**
     * WXSample 可以替换成自定义的字符串,针对埋点有效。
     * template 是.we transform 后的 js文件。
     * option 可以为空,或者通过option传入 js需要的参数。例如bundle js的地址等。
     * jsonInitData 可以为空。
     * width 为-1 默认全屏,可以自己定制。
     * height =-1 默认全屏,可以自己定制。
     */
    String pageName = "WXSample";
    String template = WXFileUtils.loadFileContent("hello.js", this);
    Map options = null;
    String jsonInitData = null;
    int width = -1;
    int height = -1;
    WXRenderStrategy flag = WXRenderStrategy.APPEND_ASYNC;
    mWXSDKInstance.render(pageName, template, options, jsonInitData, width, height, flag);
}
1.7.2、部署在服务器

此时,render方法的实现如下:

private void render() {
    /**
     * WXSample 可以替换成自定义的字符串,针对埋点有效。
     * url 是.we transform 后的部署在服务器的 js文件。
     * option 可以为空,或者通过option传入 js需要的参数。例如bundle js的地址等。
     * jsonInitData 可以为空。
     * width 为-1 默认全屏,可以自己定制。
     * height =-1 默认全屏,可以自己定制。
     */
    String pageName = "WXSample";
    String url = "http://192.168.1.102:8081/weex_tmp/h5_render/weex-bootstrap.js";
    Map options = null;
    String jsonInitData = null;
    int width = -1;
    int height = -1;
    WXRenderStrategy flag = WXRenderStrategy.APPEND_ASYNC;
    mWXSDKInstance.renderByUrl(pageName, url, options, jsonInitData, width, height, flag);
}