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

已于 2023-06-30 16:01:26 修改
阅读量2.7k 收藏
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
于 2023-03-27 17:57:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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，即不要数字开头

在这里插入图片描述在这里插入图片描述

在这里插入图片描述获取成功了

显然，id不可以数字开头，一个很细小的点，官方文档没有写，容易踩坑~特此记录

获取页面中自定义组件节点时，该组件节点未引入

2023-6-30，今天又在犯蠢了。。。在这个地方折腾了半个钟，最后发现是因为我没引入该组件。。。原来即时没有引入组件，页面DOM元素也能看到这个节点存在，注意避雷

少年歌行s
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序 实例汇总 完整项目源代码
16:selectComponent 修改组件内获取的对象或方法的内容
weixin_41987908的博客
08-12 1084
在component中创建pages/component/getobjfromcomponent/getobjfromcomponent getobjfromcomponent.js： incrementfromcomponent这个名字随便定只要test.js中调用名一致就行 Component({ data:{ counter:0 }, //组件的方法列表 methods:{ incrementfromcomponent(num){ this.setData({
WX小程序-获取子组件的数据
最新发布
weixin_49352307的博客
04-06 193
获取子组件的数据方法： this.selectComponent(" "),可以根据类名或id获取。
微信小程序selectComponent的坑
xiuxiuxiubiubiubiu的博客
01-06 1万+
之前把selectComponent不能写到onLoad开发者工具里面运行完全没有问题， 后来线上测试一直页面报错。一直找不到原因。就用真机测试模式，发现selectComponent的结果是null。排查了很久以为是单词拼写错误，最后发现是小程序生命周期的原因。看下面官方的生命周期图。可以发现在onLoad的时候，页面开始创建，但是页面元素还没有渲染，而selectComponent这时获取不...
小程序使用selectComponent获取自定义组件时，返回null（分析和解决方法）
热门推荐
Honiler的博客
01-09 1万+
一、原因：        组件所在的布局层级不同，该组件被创建的时间会有所不同，意味着ready（组件生命周期函数，组件布局完成后执行）被调用的时间有所不同。由于组件创建完成的时间晚于页面创建完成，即组件生命周期函数的ready被执行的时间晚于页面生命周期函数的onReady，无论在页面生命周期的onLoad函数还是onReady函数中，组件还没有创建完成就使用selectComponent去获取...
微信小程序 - wx:for 循环渲染多个 “重复“ 子组件（仅子组件 id 不同，this.selectComponent 使用时依然能准确找到子组件）将子组件 id 设为动态每个子组件都是独立的！
王佳斌
02-21 2407
微信小程序 子组件id 怎么是变量，微信小程序中 selectComponent的使用(wx:for组件内使用id)，微信小程序循环渲染子组件，微信小程序如何让组件的id变成动态的，微信小程序怎么将循环体内插入子组件，微信小程序把组件id设为动态,然后用selectComponent再找到微信小程序子组件的id如何绑定变量，微信小程序将子组件设置动态id后，父组件怎么 selectComponent调用呢，循环数组wx:for中使用this.selectComponent获取子组件，微信小程序 父组件循环使
微信小程序selectComponent返回null的问题排查与分析
生擒嫦娥炖玉兔的博客
12-26 1万+
要想小程序界面好看，还原UI妹纸设计的界面，小程序自带的组件肯定是无法满足所有需求的。那想要还原比较炫酷好看的UI的时候就必不可少需要自定义组件了。写过许多自定义组件了，也遇到过许多坑，这里说一个比较头大的坑，就是引入自定义组建的时候，使用selectComponent获取自定义组件对象时，返回null的问题。 简单示例 因为这里我们说的主要是selectCom...
微信小程序---组件通信---使用selectComponent获取组件实例
m0_48546501的博客
03-20 6871
微信小程序---组件通信---使用selectComponent获取组件实例
微信小程序 this.selectComponent 返回值为 null 的问题
dizzysunshine的博客
01-18 1万+
this.selectComponent(string) 可以返回所使用组件的实例对象 报错原因排查步骤 json 文件中引入了该组件 { "usingComponent": { "header": "../../components/hedader" } } 父组件 wxml 文件中使用了这个组件并且设置了一个 id 或者是 class 类样式 wxml..
微信小程序：selectComponent返回null的问题
一些平时在开发过程中遇到的常见问题，分享给大家
01-04 1614
当小程序自带的组件无法满足所有需求的时候，我们可以参考很多自定义组件。我们这次排查问题就拿比较常用的vant-weapp作为示例：使用selectComponent获取自定义组件对象时，返回null的问题
uniapp中使用selectComponent
YZ_ZZZ24的博客
11-19 2829
普通的组件引用无法用selectComponent获取组件实例。
微信小程序 小程序官方Demo (源码)
05-31
微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)
微信小程序 豆瓣电影 (源码)
05-30
微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序
微信小程序调研分析报告.docx
05-28
微信小程序调研分析报告.docx微信小程序调研分析报告.docx微信小程序调研分析报告.docx微信小程序调研分析报告.docx微信小程序调研分析报告.docx微信小程序调研分析报告.docx微信小程序调研分析报告.docx微信小程序调研分析报告.docx
微信小程序下拉刷新组件
01-17
自己做的小程序下拉组件，有两种下拉样式，根据要求返回各种值,参数说明见页面 自己做的小程序下拉组件，有两种下拉样式，根据要求返回各种值,参数说明见页面
微信小程序中身份证信息识别源代码
05-21
微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小...
微信小程序笔记
qq_41910413的博客
05-07 571
1.JSON配置 2.WXML语法 2.1.数据绑定 WXML 中的动态数据均来自对应 Page 的 data。 数据绑定使用 Mustache 语法（双大括号）将变量包起来； <view wx:if="{{condition}}"> </view> <view wx:for="{{list}} " wx:for-index="index" wx:for-item="itemName"> {{item}} </view> 属性等都需要放在双引号中间，
微信小程序echarts饼图
07-27
你想了解关于微信小程序中使用 ECharts 绘制饼图的方法吗？是的话，我可以为你提供一些基本的指导。首先，你需要在微信小程序中引入 ECharts 库。你可以通过在项目的 JSON 配置文件中添加依赖来实现： ```json "usingComponents": { "ec-canvas": "path/to/ec-canvas/ec-canvas" } ``` 接下来，你需要在页面的 WXML 文件中添加一个 `ec-canvas` 组件来渲染饼图： ```html <view class="container"> <ec-canvas id="chart" canvas-id="chart-canvas"></ec-canvas> </view> ``` 然后，在页面的 JS 文件中，你可以使用 ECharts 的 API 来配置和绘制饼图： ```javascript import * as echarts from 'path/to/echarts'; Page({ data: { chart: null }, onLoad: function() { this.initChart(); }, initChart: function() { this.data.chart = echarts.init(this.selectComponent('#chart').canvasContext); const option = { series: [{ type: 'pie', data: [ { value: 335, name: 'A' }, { value: 310, name: 'B' }, { value: 234, name: 'C' }, { value: 135, name: 'D' }, { value: 1548, name: 'E' } ] }] }; this.data.chart.setOption(option); } }); ``` 通过上述代码，你可以创建一个简单的饼图，并在微信小程序中显示出来。你也可以根据自己的需求进行更多的配置和样式调整。 希望这些信息对你有所帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值