微信小程序开发之报错TypeError: Cannot read property ‘addEventListener‘ of undefined&&调试基础库修改步骤

最新推荐文章于 2025-06-12 14:07:49 发布
原创 最新推荐文章于 2025-06-12 14:07:49 发布 · 2.2w 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #微信开发者工具 #编程语言

本文解决了微信小程序开发过程中遇到的调试器错误问题，通过调整微信开发者工具的基础库版本，成功解决了TypeError等错误。
【TypeError: Cannot read property 'addEventListener' of undefined】
【VM697:1 Unhandled promise rejection TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Module object】
【VM697:1 TypeError: Cannot read property 'invoke' of undefined】
【Wed May 19 2021 10:44:07 GMT+0800 (中国标准时间) 渲染层错误】
最近心血来潮想玩玩微信小程序开发，但是在笔者开发第二个小项目时，调试器出现了上面的错误 如下图所示： 
 TypeError: Cannot read property 'addEventListener' of undefined：无法读取未定义属性。
【`笔者找了很久丶addEventListener。`】
【`百度上也没有解决办法``】
【`只能一句句的注释掉代码，但这个错误还是存在`。`】
【`最后没办法只能新建个工程‘`】
【`愣住了！`】
【`这个错误依然存在`】
【解决：修改微信开发者工具的调试基础库】
【原因：基础库的版本过高了。】
【修改调试基础库步骤】

1.在微信开发者工具中找到详情 点击 ， 如下图所示：

在这里插入图片描述
2.选中本地设置 点击，如下图所示：
在这里插入图片描述
3.调试基础库，选中版本号下拉，选择低版本，如下图所示：

【 最终编译无误！】
【关注微信公众号一起来交流】
微信开发者工具：Cannot read property 'addEventListener' of undefined 报错
m0_50080847的博客
05-14 651
点击右上角详情 有个调试基础库 当前为2.17.0 调为2.14.1 解决 记得点赞评论噢(0.0)
当遇到 TypeError: Cannot read property ‘addListener‘ of undefined
p1767158841的博客
03-09 1773
切换一下 调试基础库 让程序重新编译这样就好了。之后每次遇到这个问题，都切换一下基础库就可以了
小程序报错：TypeError: Cannot read property ‘addEventListener‘ of undefined
椰卤工程师的个人博客
06-10 1773
报错如下 解决办法 将调试基础库由2.17.0 -> 2.14.1 解决问题
【问题解决】微信开发者工具引入组件时报错Uncaught TypeError: Cannot read property ‘addListener‘ of undefined
JohnMin的博客
02-27 3367
解决办法：关闭微信开发者工具，重启即可。 这个Bug跟代码没有关系，是微信开发者工具IDE自己的Bug，官方不做实际的业务，没有足够复杂的示例测试，是发现不了这个问题的，建议官方认真对待，这个问题挺严重的，特别影响开发。 建议切换编译器，用VSCode或者HBuilder下载相应的插件编码。 ...
uni-app 小程序 Cannot read property ‘addEventListener‘ of undefined, mounted hook
小妖666个人笔记
06-12 821
uni-app 小程序 Cannot read property 'addEventListener' of undefined, mounted hook
[Ionic]为什么会报Cannot read property 'addEventListener' of undefined at new OrbitControls?
moxiaomomo的专栏
12-10 2129
开发环境 Ionic4 + Angular8 + Threejs(r111) Ubuntu18.04 Visual Studio Code 错误提示 项目中使用到了threejs库, 在添加了OrbitControls之后构建出现了如下错误: VM1988 vendor.js:40772 ERROR TypeError: Cannot read property 'addEventListen...
报错 Cannot read properties of undefined（reading‘addEventListener‘）如何解决
2301_79420857的博客
06-22 2540
无法读取未定义的属性(读取' addEventListener ')问题：这是我给一个input输入框绑定的监听事件出现的报错。
TypeError: Cannot read property 'addEventListener' of undefined
10-15
- 但在 **微信小程序 / App / 快应用等非浏览器环境** ❌ `document` 不存在，所以调用 `.addEventListener` 就会报错：`Cannot read property 'addEventListener' of undefined` 而你在 `uni.$on('onPageScroll', ...
uniapp TypeError: Cannot read property 'addEventListener' of undefined
03-20
在开发过程中遇到 `'Cannot read property addEventListener of undefined'` 这类错误通常表明尝试访问的对象未被正确定义或初始化。以下是可能的原因以及解决方案： #### 可能原因 1. **对象未定义** 如果代码...
app.js错误: TypeError: Cannot read property 'wx' of undefined
10-16
在app.js文件中出现 `TypeError: Cannot read property 'wx' of undefined` 错误，通常意味着代码尝试访问一个未定义对象的 `wx` 属性。可以从以下几个方面进行检查和解决： ### 检查 `wx` 对象是否正确引入 在小...
[Vue warn]: Unhandled error during execution of onLaunch at <App> 11:55:41.539 TypeError: Cannot read property 'addEventListener' of undefined 11:55:41.539 App Show at App.vue:28
最新发布
11-22
根据错误日志，这次出现的是 `TypeError: Cannot read property 'addEventListener' of undefined`。这个错误通常发生在尝试在一个值为 `undefined` 的变量上调用 `addEventListener` 方法。在之前的解决方案中，...
微信小程序使用npm方式增加jsencrypt rsa加密验证
mollerlala的博客
05-19 7954
目录 一、npm安装jsencrypt 二、微信小程序构建npm 三、修改构建后的jsecnrypt文件 四、使用jsencrypt进行rsa加密 五、相关步骤的注意事项，下午更新 一、npm安装jsencrypt 1.cmd切换到小程序的目录 2.执行npm init，按照具体情况在cmd里面填写相关的字段，之后小程序会多这两个文件 3.执行mkdir node_modules，创建node_modules文件夹 4.npm install jsencrypt，安装jsencryp
Uncaught TypeError: Cannot read property ‘addEventListener‘ of undefined原因
ferrysoul的博客
11-05 1万+
I think the easiest approach would be to just check that el is not null before adding an event listener: var el = document.getElementById('overlayBtn'); if(el){ el.addEventListener('click', swap...
Uncaught (in promise) TypeError: Cannot readproperties of null (reading “addEventListener“)
weixin_46015333的博客
10-19 3887
Uncaught (in promise) TypeError: Cannot readproperties of null (reading "addEventListener")
uniapp运行到手机报错TypeError: Cannot read property ‘addEventListener‘ of undefined
lingliu0824的博客
03-15 6162
注意！！！！手机端不支持window对象 之前项目在app端运行的好好的，突然就不行了，报错 TypeError: Cannot read property ‘addEventListener’ of undefined 但是我并没有使用addEventListener啊？？ 后来在全局搜索，发现我使用的一个npm包中使用了window.addEventListener方法，然后又在页面中引入了该包，所以就一直报错。 解决：如果要在APP端使用的npm包不能包含操作window对象,所以在app端使用np
报错“Cannot read properties of null (reading ‘addEventListener‘)“
qq_42101569的博客
08-19 1万+
控制台报错"Cannot read properties of null (reading 'addEventListener')"因为 JavaScript 中操作元素的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出 "undefined" 错误。
TypeError： Cannot read property ‘addEventListener’ of null
qq_45915957的博客
11-28 533
我的错误原因： 粗心 .getElementById()中的id多加了一个空格 修改后：
[已解决]“TypeError: Cannot read property ‘xxx‘ of undefined“报错情况分析
热门推荐
五花漏的博客
11-09 20万+
1、如果是vue，先看看你的data写对了没，我有一次手误打成了 date ，检查了一下午才看出来o(╥﹏╥)o 2、如果这个数据“xxx”是从后台异步获取的，那就最好在data中先给他个默认值 比如， data() { return { obj1: '', obj2: null. obj3: {}, obj4: [] } } mounted(){ // 获取后台数据给obj们赋值等等各种异步操作 } 或者 当“xxx”是一个嵌套两层的
微信小程序使用echarts报错TypeError: Cannot read property 'getAttribute' of undefined
08-22
<think>我们正在处理的是微信小程序中集成ECharts时出现的错误：`TypeError: Cannot read property 'getAttribute' of undefined`。根据引用[1]和引用[2]的内容，这个错误通常与ECharts初始化时传递的参数不正确或初始化时机不当有关。下面我们将结合引用内容，分析可能的原因并提供解决方案。 ### 错误原因分析 1. **初始化图表时传递了错误的参数**：在初始化图表时，可能没有正确传递`canvas`、`width`、`height`等参数，导致这些参数为`undefined`，进而导致在调用`getAttribute`时出错（引用[1]）。 2. **未正确设置图表初始化回调**：在`ec-canvas`组件中，我们通过`ec`对象中的`onInit`属性来指定初始化图表的函数。如果这个函数没有正确绑定，可能导致初始化失败（引用[1]）。 3. **初始化时机问题**：如果在页面渲染完成之前就尝试初始化图表，此时canvas元素可能还未创建，导致获取到的canvas为`undefined`（引用[2]）。 ### 解决方案 #### 1. 确保正确传递初始化参数 在ECharts的微信小程序组件`ec-canvas`中，初始化图表的函数（即`onInit`指定的函数）会自动接收三个参数：`canvas`、`width`、`height`。我们不需要手动传递这些参数。因此，在定义初始化函数时，确保按照以下方式定义： ```javascript initChart(canvas, width, height) { // 使用canvas, width, height初始化图表 const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: wx.getSystemInfoSync().pixelRatio // 可选的，获取设备像素比 }); // ... 设置图表选项 return chart; } ``` #### 2. 正确设置`ec`对象中的`onInit`回调 在页面的`data`中定义`ec`对象时，将`onInit`属性设置为初始化函数的引用，并确保函数内的`this`指向正确。通常，我们在页面的`onReady`生命周期中设置`ec`对象，因为此时页面已经准备好，可以安全地操作canvas。 在页面的js文件中： ```javascript Page({ data: { ec: { // 注意：这里不要直接调用initChart，而是将函数引用赋值给onInit onInit: null } }, onReady() { // 在onReady中设置onInit，确保页面渲染完成 this.setData({ ec: { onInit: this.initChart.bind(this) // 使用bind确保this指向当前页面实例 } }); }, initChart(canvas, width, height) { // 初始化图表 // ... 同上 } }); ``` #### 3. 确保在页面渲染完成后再初始化图表 微信小程序页面的生命周期中，`onReady`表示页面初次渲染完成，此时可以安全地操作页面上的元素。因此，将初始化图表的操作放在`onReady`中是最安全的（引用[2]中提到在Vue中类似问题，将初始化放在`mounted`中，相当于小程序的`onReady`）。 ### 完整示例代码 **页面JS文件（例如：pages/index/index.js）** ```javascript import * as echarts from '../../components/ec-canvas/echarts'; Page({ data: { ec: { onInit: null } }, onReady() { this.setData({ ec: { onInit: this.initChart } }); }, initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: wx.getSystemInfoSync().pixelRatio }); // 设置图表配置 const option = { // ... 你的图表配置 }; chart.setOption(option); return chart; } }); ``` **页面WXML文件（例如：pages/index/index.wxml）** ```html <view class="container"> <ec-canvas id="mychart" canvas-id="mychart" ec="{{ ec }}"></ec-canvas> </view> ``` **页面JSON文件（例如：pages/index/index.json）** ```json { "usingComponents": { "ec-canvas": "../../components/ec-canvas/ec-canvas" } } ``` ### 注意事项 - 确保`ec-canvas`组件的路径正确，并且在页面的json文件中正确引入。 - 如果使用分包，请确保`ec-canvas`组件和`echarts.js`文件位于分包目录中，并在分包中正确配置（参考之前的回答）。 - 避免在`onLoad`或`onShow`中初始化图表，因为此时页面可能还未渲染完成。 通过以上步骤，应该可以解决`TypeError: Cannot read property 'getAttribute' of undefined`错误。如果问题仍然存在，请检查canvas元素是否成功创建，以及`ec-canvas`组件是否正确使用。 §§相关问题§§ 1. 微信小程序中如何动态更新ECharts图表的数据？ 2. 如何优化微信小程序中ECharts图表的性能？ 3. 微信小程序中使用ECharts时如何适配不同屏幕尺寸？</think>### 微信小程序集成 ECharts 报错 `TypeError: Cannot read property 'getAttribute' of undefined` 解决方案 此错误通常发生在 ECharts 初始化时无法正确获取 canvas 元素或参数传递错误。以下是完整解决方案： #### 1. 核心问题原因分析 - **canvas 参数未正确传递**：初始化函数未收到必要的 `canvas, width, height` 参数（引用[1]） - **初始化时机错误**：在页面渲染完成前尝试操作 canvas（引用[2]） - **组件绑定错误**：`ec` 对象中的 `onInit` 属性未正确绑定初始化函数（引用[1]） #### 2. 完整解决方案 ##### 步骤1：正确绑定初始化函数 在页面 `data` 中定义 `ec` 对象时，使用 `bind` 绑定初始化函数： ```javascript Page({ data: { ec: { onInit: null // 先设为null } }, onReady() { // 使用onReady确保渲染完成 this.setData({ ec: { onInit: this.initChart.bind(this) // 关键绑定 } }) }, initChart(canvas, width, height) { // 自动接收三个参数 const chart = echarts.init(canvas, null, { width, height, devicePixelRatio: wx.getSystemInfoSync().pixelRatio }); // 设置图表配置项 chart.setOption({ /*...*/ }); return chart; } }) ``` ##### 步骤2：确保 WXML 正确使用组件 ```html <!-- 确保ec-canvas在页面结构中 --> <ec-canvas id="chart" canvas-id="chart" ec="{{ ec }}" <!-- 传递ec对象 --> ></ec-canvas> ``` ##### 步骤3：检查 JSON 配置 ```json { "usingComponents": { "ec-canvas": "/components/ec-canvas/ec-canvas" } } ``` #### 3. 常见错误场景及修复 | 错误场景 | 错误代码 | 正确代码 | |---------|---------|---------| | **初始化时机** | `onLoad()` 中初始化 | 使用 `onReady()` | | **参数传递** | `initChart()` 无参数 | 声明 `(canvas, width, height)` | | **函数绑定** | `onInit: this.initChart` | `onInit: this.initChart.bind(this)` | | **组件渲染** | 使用 `wx:if` 控制显示 | 改用 `hidden` 属性 | #### 4. 高级调试技巧 ```javascript initChart(canvas, width, height) { // 添加参数验证 if (!canvas) { console.error("Canvas is undefined!"); return; } // 打印关键参数 console.log("Canvas:", canvas, "Width:", width, "Height:", height); // ...其余初始化代码 } ``` #### 5. 分包场景特殊处理（参考上次回答） ```javascript // 分包页面中确保使用相对路径 import * as echarts from '../../../components/ec-canvas/echarts'; // 使用预加载确保资源可用 wx.preloadSubpackage({ root: 'subpackages/charts', success: () => this.initChart() }) ``` > **关键点**：此错误 90% 源于 `onInit` 绑定不正确或初始化时机过早。确保使用 `onReady` 生命周期 + `bind(this)` 绑定可解决大多数情况（引用[1]）[^1]
评论 18
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sf9090

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值