Android组件Component如何传值给Weex vue

最新推荐文章于 2023-02-27 09:56:07 发布

原创最新推荐文章于 2023-02-27 09:56:07 发布 · 632 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#weex

本文介绍如何在Android中创建一个可滚动TextView组件，并实现点击事件将值传递给Weex的Vue实例。通过自定义TextVirticls组件，设置点击监听并在Vue中接收传递的数据，别忘了在WXApplication中完成注册。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：做一个可以垂直滚动的TextView组件提供给Weex,还要能够点击把值也传给Weex。
android中组件的点击事件只要在组件中实现就可以点击了。

TextVirticls 组件代码

package com.weex.app;

import android.content.Context;
import android.support.annotation.NonNull;
import android.util.Log;

import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.WXSDKManager;
import com.taobao.weex.annotation.JSMethod;
import com.taobao.weex.common.Constants;
import com.taobao.weex.ui.action.BasicComponentData;
import com.taobao.weex.ui.component.WXComponent;
import com.taobao.weex.ui.component.WXVContainer;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * Created by txb on 2019/9/10.
 * Weex自动上下滚动的TextView
 */
public class TextVirticls extends WXComponent<VerticalScrollTextView> {

  private VerticalScrollTextView mVerticalScrollTextView;
  private List<String> mList;
  private Context mContext;
  Map<String, Object> params = new HashMap<>();
  public static final String INDEX = "index";

  public TextVirticls(WXSDKInstance instance, WXVContainer parent, BasicComponentData basicComponentData) {
    super(instance, parent, basicComponentData);
    Log.v("txb", "ScrollTextView构造方法调用了");
  }

  @Override
  protected VerticalScrollTextView initComponentHostView(@NonNull Context context) {
    mContext=context;
    mVerticalScrollTextView = new VerticalScrollTextView(context);
    appleStyleAfterCreated();
    Log.v("txb", "VerticalScrollTextView........");
    return mVerticalScrollTextView;
  }

  private void appleStyleAfterCreated() {
//    WXEvent event = getEvents();
    final String ref = getRef();

    mVerticalScrollTextView.setTextStillTime(3000);//设置停留时长间隔
    mVerticalScrollTextView.setAnimTime(300);//设置进入和退出的时间间隔
    mVerticalScrollTextView.startAutoScroll();
    mVerticalScrollTextView.setOnItemClickListener(new VerticalTextview.OnItemClickListener() {
      @Override
      public void onItemClick(int position) {
        //通过fireEvent方法把值发送给weex
        params.put(INDEX, mList.get(position));
        WXSDKManager.getInstance().fireEvent(getInstanceId(), ref,
          Constants.Event.CHANGE, params);
      }
    });
  }

  @JSMethod
  public void setListText(List<String> list) {
    mList=list;
    Log.v("txb", "setListText........");
    mVerticalScrollTextView.setTextList(list);
  }


  //用属性的方式传值
  /*  @WXComponentProp(name = "tel")
  public void setTextList(List<String> list) {
    Log.v("txb", "WXComponentProp........");
    mVerticalScrollTextView.setList(list);
  }*/


}

Vue接收

<template>
  <div class="wrapper">
    <image class="img" src="../assets/images/loading.gif" />
    <textviewv class="textv" ref="mycomponent" :tel="listdata" @change="text"></textviewv>
    <customload class="loading" ref="myloading"></customload>
    <text @click="onClickto">close</text>
    <text @click="onClick">testMyModule</text>
    <text class="m">{{message}}</text>
    <text class="icon">&#xe6a1;</text> 
    <!-- <text class="icon">Lorem ipsum</text> -->
  
    <web class="web" ref="web" src="file:///android_asset/html/index.html"></web>
  </div>
  
</template>

<script>

// const textList = ["我太难了","运行行不行","凉凉"];

export default {
  data() {
    return {
      // listdata:["我太难了","运行行不行","凉凉"],
      message: "正在检测更新...",
      loaded: false
    };
  },

  // beforeCreate() {
  //   if (!weex) return;
  //   // 添加字体
  //   const domModule = weex.requireModule('dom');
  //   domModule.addRule('fontFace', {
  //     fontFamily: 'baFont',
  //     // src: "url('http://at.alicdn.com/t/font_1369729_qunj1umx4x9.ttf')"
  //     src: "url('local:///assets/fonts/iconfont.ttf')"
  //   });
  // },
  created() {
    this.checkUpdate();
  },
  mounted(){
    this.$nextTick(_ => {
      this.$refs.mycomponent.setListText(["我太难了","运行行不行","凉凉"]);
      // this.$refs.myloading.show();
    });
  },
  methods: {
      onClick: function() {
        weex.requireModule('mymodule').wxShare("大长腿",null);
        // weex.requireModule('loading').show();
        this.$refs.myloading.show();
      },
      onClickto:function(){
        this.$refs.myloading.hide();
      },
      text(evt){
          this.$toast(JSON.stringify(evt))
      },
    checkUpdate() {
      const url =
        "https://kitsu.io/api/edge/anime?filter%5Bstatus%5D=current&sort=-userCount&page%5Blimit%5D=20";

      this.$fetch
        .get(
          url,
          {},
          {
            progress(res) {
              console.log(res);
            }
          }
        )
        .then(res => {
          console.log("Success: ", res);
          this.message = "更新成功";
        })
        .catch(err => console.log("Error: ", err));
        //  weex.requireModule('mymodule').wxShare("大长腿",null);
        //  weex.requireModule('loading').show();
    }
  }
};
</script>

<style scoped>
.wrapper {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.img {
  width: 100px;
  height: 100px;
}
.web {
  flex: 1;
  width: 750px;
  height: 500px;
}
.icon {
  font-family: baFont;
  font-size: 60px;
  color: #b22222;
}

.textv{
width: 150px;
height: 50px;
}
.loading{
  height: 300px;
  width: 300px;
}
</style>

最后还要记得在WXApplication中注册

WXSDKEngine.registerComponent("textviewv", TextVirticls.class);