ReferenceError: wx is not defined

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

var windWidth = wx.getSystemInfoSync().windowWidth;

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

---

✅ 正确的解决方式

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

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

✅ 修改方式如下：

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'

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

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

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

---

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

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

你在使用：

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() 生命周期中再执行

---