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


相关推荐
Nan_Shu_6141 天前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
尘似鹤2 天前
微信小程序学习(三)补充
学习·微信小程序
老华带你飞2 天前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
涛声依旧2 天前
基于springBoot鲜花商城小程序
java·spring·微信小程序
卷Java2 天前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
卷Java2 天前
小程序原生导航栏返回键实现
spring boot·云原生·微信小程序·uni-app
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
小咕聊编程2 天前
【含文档+PPT+源码】基于微信小程序的房屋租赁系统
微信小程序·小程序·房屋租赁
云起SAAS2 天前
菜谱食谱抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·菜谱食谱
Stanford_11063 天前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台