擴展
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{*;}