微信小程序 selectComponent 获取组件为 null

最新推荐文章于 2024-08-15 10:45:09 发布

Sport_18

最新推荐文章于 2024-08-15 10:45:09 发布

阅读量2.3k

点赞数

分类专栏：小程序 Web前端文章标签：小程序 javascript

本文链接：https://blog.csdn.net/Sport_18/article/details/112763903

版权

Web前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

小程序

2 篇文章 0 订阅

订阅专栏

最近在做一个需求时偶尔发现一个 bug ，排查很久后发现是因为调用 this.selectComponent 时没有获取到组件的问题。

分析

没有在父组件渲染时的生命周期中调用，所以不会是页面和组件的渲染流先后问题
在其地方调用时能获取到，所以不会是组件的问题
只有在某些时间点调用才会是 null ，分析那些时间点所做的操作

原因

在那个时间点里改变的一个值的判断，而组件使用 wx:if 来判断是否显示组件，而当不显示组件时，调用 this.selectComponent 为 null

总结

当使用 this.selectComponent 获取组件前，应该检查组件是否有使用 wx:if ，如果有使用的话应该考虑是否存在上面的问题，然后再单独处理。

其他可能原因

参考传送门
参考传送门

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Sport_18

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

小程序组件生命周期和获取组件实例

m0_69876298的博客

08-27

869

微信小程序组件生命周期和获取组件实例使用组件中的方法

微信小程序：selectComponent返回null的问题

一些平时在开发过程中遇到的常见问题，分享给大家

01-04

2693

当小程序自带的组件无法满足所有需求的时候，我们可以参考很多自定义组件。我们这次排查问题就拿比较常用的vant-weapp作为示例：使用selectComponent获取自定义组件对象时，返回null的问题

1 条评论您还未登录，请先登录后发表或查看评论

小程序使用selectComponent获取自定义组件时，返回null（分析和解决方法）

weixin_43320867的博客

06-02

3240

https://blog.csdn.net/Honiler/article/details/86143703

微信小程序selectcomponent 返回null

dancy_xinyun的博客

01-16

1208

问题：界面中使用了wx:if和wx:else包裹自定义组件后，js使用this.selectcomponent(’#id’)方法获取值为null 修复：可以外层套一个view，设置hidden属性来控制组件的显示和隐藏。wx:if导致组件没渲染出来selectComponent返回的就是null。 ...

微信小程序selectComponent的坑

热门推荐

xiuxiuxiubiubiubiu的博客

01-06

1万+

之前把selectComponent不能写到onLoad开发者工具里面运行完全没有问题，后来线上测试一直页面报错。一直找不到原因。就用真机测试模式，发现selectComponent的结果是null。排查了很久以为是单词拼写错误，最后发现是小程序生命周期的原因。看下面官方的生命周期图。可以发现在onLoad的时候，页面开始创建，但是页面元素还没有渲染，而selectComponent这时获取不...

微信小程序 this.selectComponent 返回值为 null 的问题

dizzysunshine的博客

01-18

1万+

this.selectComponent(string) 可以返回所使用组件的实例对象报错原因排查步骤 json 文件中引入了该组件 { "usingComponent": { "header": "../../components/hedader" } } 父组件 wxml 文件中使用了这个组件并且设置了一个 id 或者是 class 类样式 wxml..

小程序引用自定义组件报错组件内容为空或者this.selectComponent为空

X_W123的博客

08-22

4410

写项目的过程中经常遇到弹框，今天刚好遇到俩个一样的弹框，只是弹框的title不一样，就突发奇想分装个自定义模态框，嗯，上网百度了，感觉也不难，但是中途遇到个bug，弄了一个下午加上午也没完成，最后在老大的帮助下，成功解决这个问题。一开始单写个demo发现点击能够出现弹框，但是放在写有其他内容的页面中死活报错，主要是 can not read popup of null,也就是组件的内容为空，说...

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

Minf的博客

03-27

3256

获取DOM元素失败原因分析

微信小程序selectComponent返回null的问题排查与分析

生擒嫦娥炖玉兔的博客

12-26

1万+

要想小程序界面好看，还原UI妹纸设计的界面，小程序自带的组件肯定是无法满足所有需求的。那想要还原比较炫酷好看的UI的时候就必不可少需要自定义组件了。写过许多自定义组件了，也遇到过许多坑，这里说一个比较头大的坑，就是引入自定义组建的时候，使用selectComponent获取自定义组件对象时，返回null的问题。简单示例因为这里我们说的主要是selectCom...

MacBook微信小程序使用selectComponent获取自定义组件时，返回null的解决方案

ljw_Josie的博客

01-25

1660

最近换了MacBook开发小程序，发现this.selectComponent 获取到的自定义组件为null，代码没有做任何改动，但就是拿不到值。网上查了一下有大部分人都说把this.selectComponent写在onShow里面，因为onLoad可能没有加载完dom，拿不到组件。 But！！我放在onShow也没有用，仔细排查了一下代码发现，是因为我在组件外层加了wx:if的判断，去掉就好了。真的蛮奇怪的，其他同事和windows电脑都没有这个问题=.= 记下来，帮大家排坑吧 ...

微信小程序 API selectComponent 获取组件返回 null 的记录

爱开车的彬哥的CSDN博客

07-29

1114

问题描述 /** 在Page 生命周期 onready 获取组件实例 */ onReady(){ this.targetComponet = this.selectComponent('#targetCompoent'); } /** wxml **/ <targetCompoent id="targetCompoent"></targetCompoent> bindEvent(e){ this.targetComponent.fun(); /** this.tar

微信小程序在ios下Echarts图表不能滑动的问题解决

12-10

为了解决原生组件层级过高的问题，微信小程序提供了`cover-view`和`cover-image`组件，它们是原生组件，可以覆盖在其他原生组件之上。然而，尽管将`view`替换为`cover-view`可以覆盖`canvas`，但在iOS设备上仍然无法...

微信小程序签名组件

zzaixiao的博客

06-10

2215

微信小程序在线签名

微信小程序开发中的数据可视化与图表展示

最新发布

wx_linying1029的博客

08-15

316

你可以根据自己的需求，使用微信小程序自带的图表组件或者第三方图表库，来展示不同类型的图表。你可以根据第三方库的使用文档，调整配置项和数据，实现不同类型的图表展示。你可以根据自己的需求，调整配置项和数据，实现不同类型的图表展示。微信小程序提供了一个基础的图表组件，可以用来展示柱状图、折线图、饼图等常见的图表类型。除了微信小程序自带的图表组件，还有一些第三方的图表库可以帮助我们更丰富地展示数据。在需要展示图表的页面的wxml文件中，添加图表组件。在需要展示图表的页面的wxml文件中，添加图表组件。

微信小程序瀑布流自定义组件，2种写法

沐光之辰

09-29

1280

第一种：递归方式，每次添加一个内容，就进行比较计算；第二种：计算图片高度方式，一次性先计算完，然后在显示注意滚动触底每次加载一页数据不用合并原先的数据。直接传递新加载数据就好图示：组件代码 wxml： <scroll-view scroll-y="{{true}}" lower-threshold="{{200}}"> <div class="activity_recommend"> <div class="recommend_content cl

Cannot read property 'init' of null 小程序中使用components方法selectComponent遇到的问题

牛哞哞杂记

09-20

7972

在小程序中使用components遇到了两个问题：问题描述： Cannot read property ‘init’ of null ，为null 出现原因：出现的原因是，我在wxml里有if判断，而此时num还没有等于1，所以造成null <ec-canvas wx:if="{{num==1}}" id="mychart" ec="{{ ec }}"> </ec-canva...

微信小程序转uniapp：3）微信this.selectComponent获取组件实例不适用uniapp。

sziitjin的博客

11-17

5751

在使用微信小程序获取子组件实例对象时，我们通常会使用this.selectComponent("#id")，然而在uniapp上是无法获取到组件对象的。该如何解决这个问题呢？我推荐大家使用 $refs ，顺便介绍一下uni-app $refs的基本用法。 $refs的基本用法：一个对象(Object)，持有注册过 ref 特性的所有 DOM 元素和组件实例。简单的说就是通过ref="id"去注册组件，然后使用this.$refs.id获取组件的实例，进而可以使用组建的方法。代码实现：微信实

微信小程序 子组件如何获取父组件实例

07-27

在微信小程序中，子组件可以通过使用 `this.parent` 来获取父组件的实例。以下是一个示例：在父组件中，可以通过 `this.selectComponent()` 方法来获取子组件的实例，并将其传递给子组件的 `parent` 属性： ```javascript // 父组件.js Component({ methods: { getChildInstance() { const child = this.selectComponent("#child"); child.setParent(this); } } }) ``` 在子组件中，可以通过 `this.parent` 来访问父组件的实例： ```javascript // 子组件.js Component({ properties: { parent: { type: null, value: null } }, methods: { setParent(parent) { this.setData({ parent }); }, getParentInstance() { console.log(this.parent); // 父组件实例 } } }) ``` 在父组件的模板中，通过调用 `getChildInstance` 方法来获取子组件实例，并将其传递给子组件的 `parent` 属性： ```html  <child-component id="child" parent="{{parent}}"></child-component> ``` 当需要在子组件中获取父组件的实例时，可以调用子组件的 `getParentInstance` 方法。