【微信小程序】selectComponent得到null分析

已于 2023-06-30 16:01:26 修改
阅读量3.4k 收藏
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
于 2023-03-27 17:57:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MinfCONS/article/details/129800357
版权

小程序中无法像网页中轻易的获取DOM元素，需要依靠

  • this.selectComponent(#id)
  • this.selectAllComponents(#id)

本文主要针对 this.selectComponent 获取DOM元素失败的原因

id为纯数字导致失败

在这里插入图片描述
上图为我的业务代码，由图可知，通过for循环遍历渲染card自定义组件，每个组件的id都为666

在这里插入图片描述
这里获取一下DOM元素并打印，打印结果看下图

在这里插入图片描述
显然，失败了，得到的DOM元素是null，我们并没有获取到想要的DOM元素

现在我们更改一下，将id改为 d666，即不要数字开头

在这里插入图片描述

最低0.47元/天 解锁文章
小程序组件生命周期和获取组件实例
m0_69876298的博客
08-27 1239
微信小程序组件生命周期和获取组件实例使用组件中的方法
小程序引用自定义组件报错组件内容为空或者this.selectComponent为空
X_W123的博客
08-22 4536
写项目的过程中经常遇到弹框，今天刚好遇到俩个一样的弹框，只是弹框的title不一样，就突发奇想分装个自定义模态框，嗯，上网百度了，感觉也不难，但是中途遇到个bug，弄了一个下午加上午也没完成，最后在老大的帮助下，成功解决这个问题。 一开始单写个demo发现点击能够出现弹框，但是放在写有其他内容的页面中死活报错， 主要是 can not read popup of null,也就是组件的内容为空，说...
微信小程序：selectComponent返回null的问题
最新发布
一些平时在开发过程中遇到的常见问题，分享给大家
01-04 3946
当小程序自带的组件无法满足所有需求的时候，我们可以参考很多自定义组件。我们这次排查问题就拿比较常用的vant-weapp作为示例：使用selectComponent获取自定义组件对象时，返回null的问题
微信小程序selectComponent返回null的问题排查与分析
生擒嫦娥炖玉兔的博客
12-26 1万+
要想小程序界面好看，还原UI妹纸设计的界面，小程序自带的组件肯定是无法满足所有需求的。那想要还原比较炫酷好看的UI的时候就必不可少需要自定义组件了。写过许多自定义组件了，也遇到过许多坑，这里说一个比较头大的坑，就是引入自定义组建的时候，使用selectComponent获取自定义组件对象时，返回null的问题。 简单示例 因为这里我们说的主要是selectCom...
微信小程序selectcomponent 返回null
dancy_xinyun的博客
01-16 1281
问题：界面中使用了wx:if和wx:else包裹自定义组件后，js使用this.selectcomponent(’#id’)方法获取值为null 修复：可以外层套一个view，设置hidden属性来控制组件的显示和隐藏。wx:if导致组件没渲染出来selectComponent返回的就是null。 ...
微信小程序 selectComponent 获取组件为 null
Sport_18的博客
01-18 2587
最近在做一个需求时偶尔发现一个 bug ，排查很久后发现是因为调用 this.selectComponent 时没有获取到组件的问题。 分析 没有在父组件渲染时的生命周期中调用，所以不会是页面和组件的渲染流先后问题 在其地方调用时能获取到，所以不会是组件的问题 只有在某些时间点调用才会是 null ，分析那些时间点所做的操作 原因 在那个时间点里改变的一个值的判断，而组件使用 wx:if 来判断是否显示组件，而当不显示组件时，调用 this.selectComponent 为 null 总结 .
微信小程序 this.selectComponent 返回值为 null 的问题
dizzysunshine的博客
01-18 1万+
this.selectComponent(string) 可以返回所使用组件的实例对象 报错原因排查步骤 json 文件中引入了该组件 { "usingComponent": { "header": "../../components/hedader" } } 父组件 wxml 文件中使用了这个组件并且设置了一个 id 或者是 class 类样式 wxml..
微信小程序中使用ECharts 异步加载数据的方法
08-27
微信小程序中使用ECharts 异步加载数据的方法 微信小程序中使用ECharts 异步加载数据的方法是指在微信小程序中使用ECharts 库异步加载数据的方法，该方法可以实现在小程序中加载数据并渲染图表。这种方法主要用于...
微信小程序在ios下Echarts图表不能滑动的问题解决
12-10
在微信小程序中，开发者经常遇到的一个问题是iOS设备下Echarts图表无法正常滑动的问题。这个问题主要体现在用户尝试在包含Echarts图表的页面上下滑动时，手指接触到图表区域时页面无法滚动。这个问题的原因在于微信...
微信小程序 | 小程序组件化开发
CoderHing的博客~
12-26 1万+
​ 🖥️ 微信小程序 专栏：小程序组件化开发 🧑‍💼 个人简介：一个不甘平庸的平凡人🍬 ✨ 个人主页：CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ ​
微信小程序 API selectComponent 获取组件返回 null 的记录
爱开车的彬哥的优快云博客
07-29 1201
问题描述 /** 在Page 生命周期 onready 获取组件实例 */ onReady(){ this.targetComponet = this.selectComponent('#targetCompoent'); } /** wxml **/ <targetCompoent id="targetCompoent"></targetCompoent> bindEvent(e){ this.targetComponent.fun(); /** this.tar
MacBook微信小程序使用selectComponent获取自定义组件时，返回null的解决方案
ljw_Josie的博客
01-25 1744
最近换了MacBook开发小程序，发现this.selectComponent 获取到的自定义组件为null，代码没有做任何改动，但就是拿不到值。 网上查了一下有大部分人都说把this.selectComponent写在onShow里面，因为onLoad可能没有加载完dom，拿不到组件。 But！！我放在onShow也没有用，仔细排查了一下代码发现，是因为我在组件外层加了wx:if的判断，去掉就好了。 真的蛮奇怪的，其他同事和windows电脑都没有这个问题=.= 记下来，帮大家排坑吧 ...
小程序使用selectComponent获取自定义组件时，返回null（分析和解决方法）
热门推荐
Honiler的博客
01-09 1万+
一、原因：        组件所在的布局层级不同，该组件被创建的时间会有所不同，意味着ready（组件生命周期函数，组件布局完成后执行）被调用的时间有所不同。由于组件创建完成的时间晚于页面创建完成，即组件生命周期函数的ready被执行的时间晚于页面生命周期函数的onReady，无论在页面生命周期的onLoad函数还是onReady函数中，组件还没有创建完成就使用selectComponent去获取...
微信小程序---组件通信---使用selectComponent获取组件实例
m0_48546501的博客
03-20 9209
微信小程序---组件通信---使用selectComponent获取组件实例
微信小程序wx_calendar组件，在 bindload 事件后执行 selectComponent(‘#calendar‘) 操作。
weixin_44004835的博客
01-03 1781
文章目录前言一、使用场景二、使用步骤设置虚假的load函数三、总结 前言 想必各位大佬对wx_calendar组件也有一定的了解，本文主要讲述一下【在 bindload 事件后执行 selectComponent(’#calendar’) 操作。】的一些骚操作 一、使用场景 我们用日历组件作为一个简易的日期选择组件。例如，点击了某一天以后，就将这一天作为项目的开始日期。 那么，我们进入日历页面时，就会想设定好默认跳转到开始日期，那应该怎么做呢？ 在wx_calendar的文档中，我们看到作者不希望我们在加
微信小程序selectComponent的坑
xiuxiuxiubiubiubiu的博客
01-06 1万+
之前把selectComponent不能写到onLoad开发者工具里面运行完全没有问题， 后来线上测试一直页面报错。一直找不到原因。就用真机测试模式，发现selectComponent的结果是null。排查了很久以为是单词拼写错误，最后发现是小程序生命周期的原因。看下面官方的生命周期图。可以发现在onLoad的时候，页面开始创建，但是页面元素还没有渲染，而selectComponent这时获取不...
微信小程序 - wx:for 循环渲染多个 “重复“ 子组件（仅子组件 id 不同，this.selectComponent 使用时依然能准确找到子组件）将子组件 id 设为动态每个子组件都是独立的！
王二红
02-21 2867
微信小程序子组件id怎么是变量，微信小程序中selectComponent的使用(wx:for组件内使用id)，微信小程序循环渲染子组件，微信小程序如何让组件的id变成动态的，微信小程序怎么将循环体内插入子组件，微信小程序把组件id设为动态,然后用selectComponent再找到微信小程序子组件的id如何绑定变量，微信小程序将子组件设置动态id后，父组件怎么selectComponent调用呢，循环数组wx:for中使用this.selectComponent获取子组件，微信小程序父组件循环使
《十一》微信小程序中自定义组件的 Component()
花铛
11-23 8285
Behavior()：注册一个 behavior，接受一个 Object 类型的参数。// 定义 behavior// 引入的其它 behavior// 属性},// 数据data: {},// 数据字段监听器// 生命周期声明对象// 所在页面的生命周期声明对象// 方法methods: {})
微信小程序图表小工具类源码解析
资源摘要信息:"微信小程序源码-小工具类：图表" 微信小程序已经成为当下非常流行的一种应用程序形态，它能够运行在微信内部，为用户提供便捷的服务和体验。微信小程序的开发涉及到前端、后端以及微信官方API等多个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值