统计
  • 建站日期:2019-12-01
  • 文章总数:1696 篇
  • 评论总数:1883 条
  • 分类总数:21 个
  • 最后更新:5月20日
文章 未分类

微信小程序使用ChatJS报错:TypeError: Cannot read property ‘node‘ of null

程序员阿鑫
首页 未分类 正文
官方推荐

微信小程序原生开发中使用Chart.js报错问题记录

报错内容

WAServiceMainContext.js?t=wechat&s=1660287711817&v=2.25.0:1 TypeError: Cannot read property 'node' of null
    at Object.<anonymous> (Chart.umd.min.js? [sm]:formatted:1)
    at Function.<anonymous> (WAServiceMainContext.js?t=wechat&s=1660287711817&v=2.25.0:1)
    at :52460/appservice/<SelectorQuery callback function>
    at WAServiceMainContext.js?t=wechat&s=1660287711817&v=2.25.0:1
    at WAServiceMainContext.js?t=wechat&s=1660287711817&v=2.25.0:1
    at Array.forEach (<anonymous>)
    at WAServiceMainContext.js?t=wechat&s=1660287711817&v=2.25.0:1
    at WAServiceMainContext.js?t=wechat&s=1660287711817&v=2.25.0:1
    at WASubContext.js?t=wechat&s=1660287711817&v=2.25.0:1
    at J (WASubContext.js?t=wechat&s=1660287711817&v=2.25.0:1)(env: Windows,mp,1.06.2206090; lib: 2.25.0)

对应代码


微信小程序使用ChatJS报错:TypeError:Cannotreadproperty‘node‘ofnull
-程序员阿鑫-带你一起秃头
-第1
张图片

看下代码

.wxml

<canvas style="width:100%;height:300px" type="2d" id="mychat" bindtouchstart="touchHandler"></canvas>

.js


var Chart = require('../../utils/Chart.umd.min.js');
Page({

  data: {
    chart: {}
  },

  touchHandler(options) {
    this.chart = {};
        this.chart.config = createConfig();
        console.log(this.chart)
    this.chart.instance = new Chart('mychat', this.chart.config)
    function createConfig() {
            const data = {
                labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
                datasets: [{
                    label: 'Dataset 1',
                    data: [10, 2, 3, 1, 2],
                    backgroundColor: 'rgba(123,0,0,0.3)',
                    fill: false,
                }]
            };
            return {
                type: 'pie',
                data: data,
                options: {
                    responsive: true,
                },
            }
        }
  },

})

排查时踩过的坑

  1. 更换版本(无效)
  2. 更换开发工具基础库(无效)

    问题原因

    最后研究他人demo:将demo导入开发工具,可以运行,对比代码没有太大出入,但是我的代码始始终报错。

之后在我的工程中新建page,将demo代码移动过来, 还是报TypeError: Cannot read property 'node' of null。

将我的代码移动到demo的工程里,居然可以运行成功。

后来经过一番分析发现demo中chatJS的代码写在了page中,而我的是写在了Component,然后在index.wxml引用过的这个Component,代码如下:

index.json

微信小程序使用ChatJS报错:TypeError:Cannotreadproperty‘node‘ofnull
-程序员阿鑫-带你一起秃头
-第2
张图片
index.wxml

微信小程序使用ChatJS报错:TypeError:Cannotreadproperty‘node‘ofnull
-程序员阿鑫-带你一起秃头
-第3
张图片

总结

不能在Component中使用chatJS,改用其他图表组件

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

-- 展开阅读全文 --
这篇文章最后更新于2022-10-4,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
【站长亲测】《Lost In Play》一起迷失在想象力的海洋中吧
« 上一篇
网易云LOOK直播场控机器人(国庆版)
下一篇 »

发表评论