codecamp

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'


Weex Module 注册
Weex Component 注册
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Weex 调试

Weex 集成Devtool到Android

Weex 集成Devtool到IOS

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }