扩展
Weex 提供了扩展机制,可以根据自己的业务进行定制自己的功能。
主要分为两类扩展:
- Module 扩展 非 UI 的特定功能。例如 sendHttp、openURL 等。
- Component 扩展 实现特别功能的 Native 控件。例如:RichTextview,RefreshListview 等。
- Adapter 扩展 Weex 对一些基础功能实现了统一的接口,可实现这些接口来定制自己的业务。例如:图片下载等。
1. Module 扩展
1.1 什么是Module
module 是完成一个操作的方法集合,在 Weex 的页面中,允许开发者 require 引入,调用 module 中的方法,WeexSDK 在启动时候,已经注册了一些内置的 module。
- Module 扩展必须继承
WXModule
类。 - 扩展方法必须加上
@JSMethod (uiThread = false or true)
注解。Weex 会根据注解来判断当前方法是否要运行在 UI 线程,和当前方法是否是扩展方法。 -
Weex
是根据反射来进行调用 Module 扩展方法,所以Module中的扩展方法必须是public
类型。(不太理解,反射不是为所欲为的吗。) - 同样因为是通过反射调用,
Module
不能被混淆。
为了防止我们的应用程序被反编译,这时用到了混淆。混淆增大了反编译难度, 类和成员会被随机命名。因此, 涉及到这些反射调用的方法, 应避免混淆。 -
Module
扩展的方法可以使用int
,double
,float
,String
,Map
,List
类型的参数 - 完成
Module
后一定要在初始化时注册
在自己定义的Application
中进行注册
// 注册方式
WXSDKEngine.registerModule("MyModule", MyModule.class);
// js 调用如下
weex.requireModule('MyModule').printLog("I am a weex Module");
1.2 内置Module
registerModule("modal", WXModalUIModule.class, false);
registerModule("instanceWrap", WXInstanceWrap.class, true);
registerModule("animation", WXAnimationModule.class, true);
registerModule("webview", WXWebViewModule.class, true);
registerModule("navigator", WXNavigatorModule.class);
registerModule("stream", WXStreamModule.class);
registerModule("timer", WXTimerModule.class, false);
registerModule("storage", WXStorageModule.class, true);
registerModule("clipboard", WXClipboardModule.class, true);
registerModule("globalEvent",WXGlobalEventModule.class);
registerModule("picker", WXPickersModule.class);
registerModule("meta", WXMetaModule.class,true);
registerModule("webSocket", WebSocketModule.class);
1.3 自定义Module注册方式
public static <T extends WXModule> boolean registerModule(String moduleName, Class<T> moduleClass,boolean global) throws WXException
- moduleName 前端代码中module的名称
- moduleClass 是该module的Class, 需要提供一个默认的构造函数。
- global 是否是全局唯一, true为全局唯一, false表示和WXSDKInstance绑定。
2. Component 扩展
2.1
- Component 扩展类必须继承 WXComponent.
- Component 对应的设置属性的方法必须添加注解
@WXComponentProp(name=value(value is attr or style of dsl))
- Weex sdk 通过反射调用对应的方法,所以 Component 对应的属性方法必须是 public,并且不能被混淆。请在混淆文件中添加代码 -keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
- Component 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
- 完成 Component 后一定要在初始化时注册
WXSDKEngine.registerComponent("richText", RichText.class);
JS 调用如下
<template>
<div>
<richText tel="12305" style="width:200;height:100">12305</richText>
</div>
</template>
2.2 注册方式
2.2.1 方式一
// 效率最高
public static boolean registerComponent(IFComponentHolder holder, boolean appendTree, String ... names) throws WXException
参数含义:
- holder 为一个抽象组件工厂,用于创建component,可使用 SimpleComponentHolder 来快速的构建该对象。
- appendTree 为一个扩展标记位,目前暂无意义。
- names 表示该 component 在前端代码中名称,可把多个前端组件名称映射成一个 component 。
实例:
// 在WXSDKEngine中的register()可见
registerComponent(
new SimpleComponentHolder(
WXText.class,
new WXText.Creator()
),
false,
WXBasicComponentType.TEXT
);
2.2.2 方式二
public static boolean registerComponent(String type, Class<? extends WXComponent> clazz, boolean appendTree) throws WXException
参数含义:
- type 组件的名字, 也是JS的标签名
- clazz 是组件的class文件
- appendTree 为一个扩展标记位,目前暂无意义。
为什么方式一效率最高?
因为方式二会转换成方式一进行注册。中间无形之中多了一些不需要的步骤。
2.3 Component方法支持
从WeexSDK 0.9.5开始,你可以定义组件方法
- 在组件中如下声明一个组件方法
@JSMethod
public void focus() {
//method implementation
}
@JSMethod
是一定必须要的。
- 声明之后, 在vue文件中即可调用
<template>
<mycomponent ref='mycomponent'></mycomponent>
</template>
<script>
module.exports = {
created: function() {
this.$refs.mycomponent.focus();
}
}
</script>
注:工程要添加依赖 compile 'com.squareup.picasso:picasso:2.5.2'
Adapter扩展
内置的Adapter
,以下代码摘自InitConfig.Builder
IWXHttpAdapter httpAdapter; // default DefaultWXHttpAdapter
IWXImgLoaderAdapter imgAdapter; // defualt null
IDrawableLoader drawableLoader; // default null
IWXUserTrackAdapter utAdapter; // default null
IWXDebugAdapter debugAdapter; // default null
IWXStorageAdapter storageAdapter; // default DefaultWXStorage
IWXSoLoaderAdapter soLoader; // default null
URIAdapter mURIAdapter; // default DefaultUriAdapter
IWXJSExceptionAdapter mJSExceptionAdapter; // default null
IWXHttpAdapter
: 用来处理网络请求的接口,常常处理请求一系列过程,默认实现DefaultWXHttpAdapter. 用的是HttpURLConnection
IWXImgLoaderAdapter
: 用来处理View加载图片接口,可以实现其控制如何加载远程和本地图片.
接口定义如下
public interface IWXImgLoaderAdapter {
void setImage(String url, ImageView view, WXImageQuality quality,WXImageStrategy strategy);
}
WXImageQuality 表示图片的质量,WXImageQuality 取如下值 LOW, NORMAL, HIGH, ORIGINAL 图片质量依次变高。默认为 LOW。
WXImageStrategy 为扩展类,表示了图片是否可以裁剪 (isClipping) 锐化 (isSharpen) 占位符 (placeHolder) 等。
-
IWXUserTrackAdapter
: 用来处理日志信息接口,常常拿来做一些用户埋点统计. -
IWXStorageAdapter
: 用来处理存储接口,例如SQLite存储,默认实现DefaultWXStorage. -
IWXDebugAdapter
: 用来处理调试接口,通常实现其接口来在Chrom上做一些页面的调试. -
WXDomManager
: 专门用来管理Dom节点一些操作,如创建节点对应对象,但真正操作是委托给其他的对象,
混淆
如果在项目中使用到了混淆, 则需要添加如下配置
-keep class com.taobao.weex.WXDebugTool{*;}
-keep class com.taobao.weex.devtools.common.LogUtil{*;}
-keepclassmembers class ** {
@com.taobao.weex.ui.component.WXComponentProp public *;
}
-keep class com.taobao.weex.bridge.**{*;}
-keep class com.taobao.weex.dom.**{*;}
-keep class com.taobao.weex.adapter.**{*;}
-keep class com.taobao.weex.common.**{*;}
-keep class * implements com.taobao.weex.IWXObject{*;}
-keep class com.taobao.weex.ui.**{*;}
-keep class com.taobao.weex.ui.component.**{*;}
-keep class com.taobao.weex.utils.**{
public <fields>;
public <methods>;
}
-keep class com.taobao.weex.view.**{*;}
-keep class com.taobao.weex.module.**{*;}
-keep public class * extends com.taobao.weex.common.WXModule{*;}
-keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
-keep class * implements com.taobao.weex.ui.IExternalComponentGetter{*;}