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” ,如果是就成功了。小白踩坑,如有不对还望指正,谢谢。