android下weex自定义组件

weex在很多情况下没法满足我们的需求，于是就出现了自定义组件，本人理解就是实例化nativie的一些控件。

1、weex官网中介绍实现自定义组件：

1、需要实现的组件比较继承WXComponent、WXVContainer
2、Component对应的设置属性的方法必须添加注解@WXComponentProp(name = value)
3、Weex的SDK通过反射调用对应的方法，所以Component对应的属性方法必须是public， 并且不能被混淆。
4、Component扩展的方法可以使用int、double、float、String、Map、List类型的参数
5、一定要记得在初始化的时候注册WXSDKEngine.registerComponent("richtext", RichText.class);

2、下面看看如何实现的。

这里只是简单的入门而已,在这里我命名估计不是很规范，大家自己改下就行了。我这是用TextView的，而不是cardView。抱歉

1、先看看card.we文件如何写的

<template>
  <div>  
    <cardview class="mycomponent" showmsg = "{{name}}"></cardview>    
  </div>
</template>

<style>  
  .mycomponent {
    font-size: 30;
    height: 50;
    width: 750;  
  }
</style>

<script>
  require('weex-components');   
  module.exports = {
    data: {     
      name: '自定义组件textView',
    },
    created: function() {    
    },    
  }
</script>

这里有个地方需要注意，一般学前端的CSS的样式 应该就不用说了。这里cardview标签的showmsg这个需要和前面第二点一样就是@WXComponentProp(name = value)这里的name需要一致。

2、接下来看WXCardView.java

public class WXCardView extends WXComponent<TextView> {

private TextView view;

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

@Override
protected TextView initComponentHostView(@NonNull Context context) {
    view = new TextView(context);
    view.setMovementMethod(LinkMovementMethod.getInstance());
    view.setBackgroundColor(context.getResources().getColor(R.color.colorAccent));
    return view;
}

@WXComponentProp(name="showmsg")
public void elevation(String elevation){
    Log.e("123", "jinlaile ");
    view.setText(elevation);
}

}

3、初始化的时候注册

WXSDKEngine.registerComponent("cardview", WXCardView.class);

这里的cardview就是card.we的标签<cardview></cardview>

到这直接将编译好的js文件放入到本地，然后调用js，运行查看界面上是否会出现粉色的背景，输出的文字为“自定义组件textView” ，如果是就成功了。小白踩坑，如有不对还望指正，谢谢。