ReferenceError: wx is not defined

Emma歌小白2025-06-04 16:49

这段代码报错的核心原因出在以下这行：

ini 复制代码

var windWidth = wx.getSystemInfoSync().windowWidth;

这行代码在组件外部顶层直接调用了 wx.getSystemInfoSync()，而 在组件被初始化之前、或者不是在微信小程序环境中执行这段代码时，wx 是未定义的，所以就抛出了 ReferenceError: wx is not defined。

✅ 正确的解决方式

✅ 方法一：将 `wx.getSystemInfoSync()` 放入组件的生命周期或 `attached()` 生命周期中执行

微信组件初始化时才能确保 wx 是定义好的，避免在顶层作用域使用：

✅ 修改方式如下：

php 复制代码

Component({
  properties: {
    canvasWidth: {
      type: Number,
      value: 0  // 先设置为 0，稍后在 attached 中设置
    },
    ...
  },
  data: {
    show_tip: true
  },
  lifetimes: {
    attached() {
      const windWidth = wx.getSystemInfoSync().windowWidth;
      this.setData({
        canvasWidth: windWidth * 0.4
      });
    }
  },
  methods: {
    ...
  }
});

✅ 方法二：在调用之前判断 `typeof wx !== 'undefined'`

如果一定要保留顶层代码（不推荐），可以做个安全判断：

ini 复制代码

var windWidth = (typeof wx !== 'undefined') ? wx.getSystemInfoSync().windowWidth : 375;

但是更推荐的方法还是：不要在组件外部或组件定义顶层作用域中直接使用 wx。

🔧 补充：canvas 使用小程序 2D 环境注意事项

在你这段 canvas-ring.js 中，如果你使用的是 canvas 标签（不是 canvas-id） + type="2d" 的方式来绘图，确保使用了自定义组件 + canvas 2d 环境并启用了 2D 接口。

你在使用：

kotlin 复制代码

query.select('#myCanvas')
  .fields({ node: true , size: true})
  .exec(this.init.bind(this));

说明你是使用了 canvas 的 node 接口，这就必须保证：

你的小程序基础库版本 ≥ 2.9.0
<canvas type="2d" /> 用在 wxml 中
component: true 设置在页面或组件配置中（如果使用自定义组件）

✅ 总结

错误来源：

在组件外直接调用 wx.getSystemInfoSync()，而此时微信小程序环境尚未准备好。

解决办法：

✅ 把 wx.getSystemInfoSync() 放到 attached() 生命周期中再执行