本文基于Mac系统，结合Android Studio进行Weex SDK的配置与使用。
基础配置
npm version 5.6.0
Android Studio 3.0.1
Gradle Version 2.14.1
Android Plugin Version 2.2.3
Gradle配置
项目build.gradle配置，classpath和subprojects需要在项目跟目录的build.gradle中配置。
classpath依赖配置
1 | classpath 'com.taobao.android:weexplugin-gradle-plugin:1.3' |
版本统一管理(非必须)
1 | subprojects { |
添加Gradle插件
1 | apply plugin: 'com.taobao.android.weex.plugin.gradle' |
添加依赖包
1 | compile 'com.taobao.android:weex_sdk:0.16.0' |
SDK初始化
在Application的onCreate方法中进行SDK初始化，添加图片适配器，注册扩展module和注册扩展component。1
2
3
4
5
6
7
8
9
10
11
12
13
public void onCreate() {
super.onCreate();
InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
WXSDKEngine.initialize(this, config);
try {
WXSDKEngine.registerModule("clickEvent", ClickEventModule.class);
WXSDKEngine.registerModule("phoneInfo", PhoneInfoModule.class);
WXSDKEngine.registerComponent("richText", RichText.class, false);
} catch (WXException e) {
e.printStackTrace();
}
}
图片加载
加载图片需要实现IWXImgLoaderAdapter接口来完成，setImage方法返回了图片的地址和ImageView对象。1
2
3
4
5
6
7
8public class ImageAdapter implements IWXImgLoaderAdapter {
public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
Picasso.with(WXEnvironment.getApplication())
.load(url)
.into(view);
}
}
页面渲染
在Activity实例化WXSDKInstance对象，注册registerRenderListener监听，通过render方法实现渲染1
2
3
4
5
6
7
8
9
10
11
12
13
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mWXSDKInstance = new WXSDKInstance(this);
mWXSDKInstance.registerRenderListener(this);
//加载本地index.js，加载远程js使用renderByUrl方法
mWXSDKInstance.render("SimpleName", WXFileUtils.loadAsset("index.js", this), null, null, WXRenderStrategy.APPEND_ASYNC);
}
public void onViewCreated(WXSDKInstance instance, View view) {
setContentView(view);
}
点击事件
Module的注册与获取
Android端需要在应用初始化的时候通过WXSDKEngine来注册,注意Module必须是WXModule的子类1
WXSDKEngine.registerModule("clickEvent", ClickEventModule.class);
Weex端需要在script标签内获取module1
const modal = weex.requireModule('clickEvent');
weex端触发事件
页面层即template标签内触发点击事件1
<image :src="logo" class="logo" ="testClick"/>
逻辑层即script标签内调用module对象中的方法，即执行Android端ClickEventModule的clickEvent方法1
2
3
4
5methods: {
testClick() {
clickEvent.clickEvent();
},
}
android端执行事件
事件的执行可以通过JSMethod注解来指定运行的线程环境1
2
3
4
5
6public class ClickEventModule extends WXModule{
(uiThread = true)
public void clickEvent() {
Toast.makeText(mWXSDKInstance.getContext(), "item clicked", Toast.LENGTH_SHORT).show();
}
}
数据传递 android => weex
Module的注册与获取
Android端需要在应用初始化的时候通过WXSDKEngine来注册,注意Module必须是WXModule的子类1
WXSDKEngine.registerModule("phoneInfo", PhoneInfoModule.class);
Weex端需要在script标签内获取module1
const phoneInfo = weex.requireModule('phoneInfo');
weex端触发事件
页面层即template标签内触发点击事件1
<text class="greeting" @click="getPhoneInfo">The environment is ready!</text>
逻辑层即script标签内调用module对象中的方法，即执行Android端PhoneInfoModule的getPhoneInfo方法1
2
3
4
5
6
7
8
9
10methods: {
getPhoneInfo() {
phoneInfo.getPhoneInfo(function (e) {
modal.alert({
message: JSON.stringify(e),
duration: 0.3
})
});
}
}
android端执行事件
事件的执行可以通过JSMethod注解来指定运行的线程环境1
2
3
4
5
6
7
8
9
10
11
12
13
14
15public class PhoneInfoModule extends WXModule {
/**
* 获取 Phone 相关信息，并回调给 weex
*/
(uiThread = false)
public void getPhoneInfo(JSCallback callback) {
Map<String, String> infos = new HashMap<>();
infos.put("board", Build.BOARD);
infos.put("brand", Build.BRAND);
infos.put("device", Build.DEVICE);
infos.put("model", Build.MODEL);
callback.invoke(infos);
}
}
数据传递 weex => android
Component的注册与获取
Android端需要在应用初始化的时候通过WXSDKEngine来注册,注意Component必须是WXComponent的子类1
WXSDKEngine.registerComponent("richText", RichText.class, false);
weex端指定数据源
页面层即template标签内指定数据源,标签名称必须要跟注册的时候moduleName对应。1
<richText tel="10086" style="width:200px;height:100px"></richText>
android端获取weex数据展示
我们使用一个TextView组件来展示一段文本,通过WXComponentProp注解来获取页面指定的内容1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18public class RichText extends WXComponent<TextView> {
public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent) {
super(instance, dom, parent);
}
protected TextView initComponentHostView(@NonNull Context context) {
TextView textView = new TextView(context);
textView.setTextSize(20);
return textView;
}
(name = "tel")
public void setTel(String number) {
getHostView().setText(number + "哈哈哈");
}
}
SDK混淆规则
1 | -keep class com.taobao.weex.WXDebugTool{*;} |
