Weex Extend

扩展

Weex 提供了扩展机制，可以根据自己的业务进行定制自己的功能。
主要分为两类扩展：

• Module 扩展 非 UI 的特定功能。例如 sendHttp、openURL 等。
• Component 扩展 实现特别功能的 Native 控件。例如：RichTextview，RefreshListview 等。
• Adapter 扩展 Weex 对一些基础功能实现了统一的接口，可实现这些接口来定制自己的业务。例如：图片下载等。

1. Module 扩展

1.1 什么是Module

module 是完成一个操作的方法集合，在 Weex 的页面中，允许开发者 require 引入，调用 module 中的方法，WeexSDK 在启动时候，已经注册了一些内置的 module。

1. Module 扩展必须继承 WXModule 类。
2. 扩展方法必须加上@JSMethod (uiThread = false or true) 注解。Weex 会根据注解来判断当前方法是否要运行在 UI 线程，和当前方法是否是扩展方法。
3. Weex是根据反射来进行调用 Module 扩展方法，所以Module中的扩展方法必须是 public 类型。（不太理解，反射不是为所欲为的吗。）
4. 同样因为是通过反射调用，Module 不能被混淆。
   为了防止我们的应用程序被反编译，这时用到了混淆。混淆增大了反编译难度， 类和成员会被随机命名。因此， 涉及到这些反射调用的方法， 应避免混淆。
5. Module 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
6. 完成 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

1. Component 扩展类必须继承 WXComponent.
2. Component 对应的设置属性的方法必须添加注解
   @WXComponentProp(name=value(value is attr or style of dsl))
3. Weex sdk 通过反射调用对应的方法，所以 Component 对应的属性方法必须是 public，并且不能被混淆。请在混淆文件中添加代码 -keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
4. Component 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
5. 完成 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{*;}