统计
  • 建站日期:2021-03-10
  • 文章总数:699 篇
  • 评论总数:733 条
  • 分类总数:10 个
  • 最后更新:12月4日
文章 前端知识

微信小程序使用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)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

-- 展开阅读全文 --
【站长亲测】《Lost In Play》一起迷失在想象力的海洋中吧
« 上一篇
网易云LOOK直播场控机器人(国庆版)
下一篇 »
为了防止灌水评论,登录后即可评论!
注册登录

HI ! 请登录
注册会员,享受下载全站资源特权。
登陆 注册
上号,带你一起秃头!

IP地址

热门文章

1
抖音无限礼物模拟小工具分享
2
QQ假红包引流QQ群教程及代码
4
卡QQ永久大会员方法

最新文章

标签