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{*;}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容