美文网首页
android下weex自定义组件

android下weex自定义组件

作者: 圈圈猫 | 来源:发表于2017-02-14 20:32 被阅读2176次

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

相关文章

  • android下weex自定义组件

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

  • Weex富文本WXRichLabel实践

    在上篇的基础上处理: Weex自定义WXRichText组件实践Weex 富文本 Weex协议 Weex链接 WX...

  • weex集成到Android

    weex集成到Android是指在Android里面加载weex页面; 1、app module下添加依赖 2、a...

  • weex-28-自定义AR组件

    本节学习目标 如何自定义一个组件 什么时候该自定义组件? 当weex提供给我们的默认组件满足不了我们的需求的时候这...

  • Weex:Js与Native的交互

    介绍 weex的前端实现是通过Js+Css+Weex自定义组件完成的。那么事必存在Js与Native的扩展和交互存...

  • 自定义AlertDialog对话框(1)-简单实现

    说明### 很多情况下,由于Android系统自带组件不够美观我们需要自定义自己的组件。实现自定义对话框有几种方法...

  • 第一个weex任务:图片显示改为串行

    问题 公司接入weex大概也有半年多的时间了,sdk的版本是0.6.4,自定义的组件一大堆。不过image这个组件...

  • 2020-11-04

    自定义视图组件(自定义View)https://developer.android.google.cn/guide...

  • Android自定义模版View

    Android自定义模版View Android开发中有许多需要复用的组件,那么要如何才能自定义一个自定义的模版呢...

  • Android架构组件实现MVVM模式的应用

    Image组件 weex的list组件和image组件非常容易出问题,企鹅电竞本身又存在很多无限列表的weex页面...

网友评论

      本文标题:android下weex自定义组件

      本文链接:https://www.haomeiwen.com/subject/ivjzbttx.html