Weex Component 扩展

wee x版本 >= 0.19.0

变更说明

WXDomObject 和 Layout 引擎被下沉到 WeexCore 中使用 C++ 实现，移除 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 只支持叶子节点。

WXComponent 接口变更

getDomObject [移除]

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

构造方法 [参数变更]

WXComponent 的构造方法删除了类型为 WXDomObject 的参数，新增了类型为 BasicComponentData 的参数，其余参数保持不变：

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 结果的相关方法 [迁移]

获取 Layout 结果的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 扩展类必须继承 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);​

示例如下:

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 调用如下：

<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 文件中调用 <template> <mycomponent ref='mycomponent'></mycomponent> </template> <script> module.exports = { created: function() { this.$refs.mycomponent.focus(); } } </script>

注:工程要添加依赖 ​compile​ ​'com.squareup.picasso:picasso:2.5.2'​