ReferenceError: wx is not defined

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

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));

说明你是使用了 canvasnode 接口,这就必须保证:

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

✅ 总结

错误来源:

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

解决办法:

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


相关推荐
赣州云智科技的技术铺子9 小时前
【一步步开发AI运动APP】十三、如何进行运动开始前的站位预检,提升用户体验
微信小程序·小程序·云开发·智能小程序
TiAmo zhang1 天前
微信小程序开发案例 | 简易登录小程序
微信小程序·小程序·1024程序员节
黑马源码库miui520861 天前
场馆预定系统小程序
微信·微信小程序·小程序·1024程序员节
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生2 天前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
從南走到北2 天前
JAVA无人自助共享系统台球室源码自助开台约球交友系统源码小程序
java·微信·微信小程序·小程序·1024程序员节
菜鸟una3 天前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
從南走到北3 天前
JAVA国际版一对一视频交友视频聊天系统源码支持H5 + APP
java·微信·微信小程序·小程序·音视频·交友
從南走到北3 天前
同城派送小程序
微信·微信小程序·小程序