Weex Component 擴(kuò)展

wee x版本 >= 0.19.0

變更說明

WXDomObject 和 Layout 引擎被下沉到 WeexCore 中使用 C++ 實(shí)現(xiàn)，移除 Java 代碼中的 WXDomObject。此次變更涉及 WXComponent 和 WXDomObject 的適配。

遷移指南

setMeasureFunction 遷移

WXDomObject 中的 setMeasureFunction() 方法遷移至 WXComponent 中：

protected void setMeasureFunction(final ContentBoxMeasurement contentBoxMeasurement);

詳見：com.taobao.weex.layout.ContentBoxMeasurement.java

ContentBoxMeasurement 示例請參考：WXText.java / setMeasureFunction() 注意：ContentBoxMeasurement 只支持葉子節(jié)點(diǎn)。

WXComponent 接口變更

getDomObject [移除]

由于 WXDomObject 下沉至 WeexCore 中，所以 getDomObject() 方法已被刪除。

構(gòu)造方法 [參數(shù)變更]

WXComponent 的構(gòu)造方法刪除了類型為 WXDomObject 的參數(shù)，新增了類型為 BasicComponentData 的參數(shù)，其余參數(shù)保持不變：

public WXComponent(WXSDKInstance instance, WXVContainer parent, int type, BasicComponentData basicComponentData);

public WXComponent(WXSDKInstance instance, WXVContainer parent, BasicComponentData basicComponentData);

WXDomObject 接口變更

你無法在Java代碼中訪問和繼承 WXDomObject，（ ImmutableDomObject 接口也已被刪除）

WXDomObject 的部分方法被遷移至 WXComponent中，如需使用，如下：

WXDomObject.getType() -> WXComponent.getComponentType() [遷移]

WXDomObject 中 的 getType() 方法用于獲取組件類型（如：list、div、text、img...），遷移到 WXComponent 后，更名為：

public String getComponentType();

獲取 Layout 結(jié)果的相關(guān)方法 [遷移]

獲取 Layout 結(jié)果的6個方法從 WXDomObject 遷移至 WXComponent：

public float getCSSLayoutTop();
public float getCSSLayoutBottom();
public float getCSSLayoutLeft();
public float getCSSLayoutRight();
public float getLayoutWidth();
public float getLayoutHeight();

移除兩個廢棄接口：

public float getLayoutY();
public float getLayoutX();

weex_sdk 版本 < 0.19.0

1. Component 擴(kuò)展類必須繼承 WXComponent.
2. Component 對應(yīng)的設(shè)置屬性的方法必須添加注解 @WXComponentProp(name=value(value is attr or style of dsl))
3. Weex sdk 通過反射調(diào)用對應(yīng)的方法，所以 Component 對應(yīng)的屬性方法必須是 public，并且不能被混淆。請?jiān)诨煜募刑砑哟a ?-keep public class * extends? ?com.taobao.weex.ui.component.WXComponent{*;}?
4. Component 擴(kuò)展的方法可以使用 int, double, float, String, Map, List 類型的參數(shù)
5. 完成 Component 后一定要在初始化時注冊? WXSDKEngine.registerComponent("richText", RichText.class);?

示例如下:

public class RichText extends WXComponent<TextView> {

    public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent) {
        super(instance, dom, parent);
    }

    @Override
    protected TextView initComponentHostView(@NonNull Context context) {
        TextView textView = new TextView(context);
        textView.setTextSize(20);
        textView.setTextColor(Color.BLACK);
        return textView;
    }

    @WXComponentProp(name = "tel")
    public void setTel(String telNumber) {
        getHostView().setText("tel: " + telNumber);
    }
}

注冊你的組件：

WXSDKEngine.registerComponent("richText", RichText.class);

JS 調(diào)用如下：

<template>
  <div>
    <richText tel="12305" style="width:200;height:100">12305</richText>
  </div>
</template>

組件方法支持

從WeexSDK 0.9.5開始，你可以定義組件方法

• 在組件中如下聲明一個組件方法

@JSMethod
public void focus(){
 //method implementation
}

• 注冊組之后，你可以在weex 文件中調(diào)用 <template> <mycomponent ref='mycomponent'></mycomponent> </template> <script> module.exports = { created: function() { this.$refs.mycomponent.focus(); } } </script>

注:工程要添加依賴 ?compile? ?'com.squareup.picasso:picasso:2.5.2'?