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


相关推荐
郭邯4 小时前
小程序中自定义组件的样式隔离
微信小程序
每天开心6 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
老华带你飞12 小时前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽12 小时前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
半生过往1 天前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw1 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者1 天前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮1 天前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
The_era_achievs_hero1 天前
UniappDay03
vue.js·微信小程序·uni-app
Python大数据分析2 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app