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'
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"
}
}
<uses-permission android:name="android.permission.INTERNET" />
注意:图片加载接口是您必须要实现并进行配置的,否则将无法展现图片。
在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);
}
}
下面是具体实现:
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
中。
下面是具体实现:
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。 如果部署在服务器端,那么,我们就不用经常发布版本了。
在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);
}
此时,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);
}