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閱讀 230,578評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,701評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,691評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,974評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,694評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,026評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,015評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,193評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,719評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,442評論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,668評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,151評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,846評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,255評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,592評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,394評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2 380

推薦閱讀更多精彩內容