H5页面跳转微信小程序时:wx.miniProgram.navigateTo 报错 ‘wx‘ is not defined no-undef

news2025/7/7 23:53:07

有一个功能,需要从H5页面跳转到微信小程序,查了微信官方文档:只需要引入js文件,然后直接使用即可:

1:引用:

 当然也可以下载下来直接引用项目具体位置的js文件

2: 使用:

然后一直报错: Line 161:  'wx' is not defined  no-undef

查了网上的一些解决方法,基本是以下几种(最好用的在最后):

1:eslint校验配置去掉对wx这个变量no-undef的校验

解决方法:在 .eslintrc.js 文件里加入以下内容,就不会报错了

module.exports = {
    // 省略其他配置...
    globals: {
        wx: true
    }
}

2:禁用eslint的no-undef校验

在.eslintrc.js中rules的规则如下:

rules: {
    "no-undef": "off"
}
规则值:
"off"或者0     //关闭检测规则
"warn"或者1    //打开并把打开的检测规则作为警告(不影响退出代码)
"error"或者2   //打开并把检测规则作为一个错误(退出代码触发时为1)
————————————————
"no-undef": 1,//不能有未定义的变量

3:定义全局变量

修改vue.config.js文件:
在configureWebpack下的externals中定义全局变量即可。
参考如下:

configureWebpack: {
  // 全局常量定义
  externals: {
    X2JS: 'X2JS'
  }
},
 

4:直接import使用
例如将原本<script>的引入方式:
<script language="javascript" src="/static/js/xml2json.js" ignore>
改为import导入具体位置的文件:
import X2JS from '@/assets/js/xml2json.js'
照常使用,就无需定义全局变量了!
 

5:项目没有eslintrc.js文件,但是可以在package.json中配置eslint规则
在这里插入图片描述
在rules规则下,添加"no-undef": "off"即可

 

但我的工程中没有eslintrc.js文件,改了package.json也没生效,最后找到一种最简单有效的方法,在当前报错文件的最上面加一行代码:

/* eslint-disable */

就像这样:

 

 禁用当前页面的eslint检查,亲测好用

收工

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405719.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue3 hooks使用

vue3 hooks使用 今天我们稍微说一下 vue3 项目中的 hooks 的使用&#xff0c;其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的&#xff0c;学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉&#xff0c;就算没用过也一定了解过&#xff0c;也就是混入&#xff0c;通过 mixin …

useDark的使用方法以及Element-Plus深色主题切换案例(vue3)

useDark 顾名思义&#xff0c;是否使用深色模式&#xff0c;useDark它是通过读取localStorage/sessionStorage的存储值&#xff08;key 是可自定义的&#xff09;。从而设置html的class。VueUse的官方案例使用了Tailwind CSS 偏好的暗模式。因为我们不一定都用得到Tailwind CSS…

vue实现本地预览word(docx)、excel(xlsx)、pdf文件

vue实现本地预览word(docx)、excel(xlsx)、pdf文件 实现效果&#xff1a; 通过点击预览&#xff0c;浏览器打开新标签页展示文件内容 word效果&#xff1a; pdf效果&#xff1a; excel效果&#xff1a; 前期准备&#xff1a; word插件&#xff1a; npm install --save …

【TFS-CLUB社区 第5期赠书活动】〖Python OpenCV从入门到精通〗等你来拿,参与评论,即可有机获得

文章目录❤️‍&#x1f525; 赠书活动 - 《Python OpenCV从入门到精通》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 内容提要❤️‍&#x1f525; 赠书活动 → 获奖名单❤️‍&#x1f525; 赠书活动 - 《Python OpenCV从入门到精通》 内容简介&#xff1a; 《Python O…

【uniapp】页面下拉刷新

目录 一、全局 二、局部 1、一个页面一个下拉刷新 2、一个页面多个下拉刷新&#xff08;切换时滚动条回到顶部&#xff09; 3、一个页面多个下拉刷新&#xff08;切换时恢复滚动条位置&#xff09; 一、全局 修改pages.json的"enablePullDownRefresh": true, …

【Node.js实战】一文带你开发博客项目之登录(前置知识)

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿多个前端 offer&#xff08;秋招&#xff09; &#x1f680;未…

微信小程序自定义组件(超详细)

&#x1f48c;写在开头&#xff1a; 哈喽呀&#xff0c;亲爱的宝子们。 今天要介绍的是关于小程序自定义组件的相关内容。 主要分以下几个部分&#xff1a;组件的创建&#xff0c;组件的结构&#xff0c;组件的引用&#xff0c;组件样式&#xff0c;组件的生命周期等。 文章目录…

【蓝桥杯真题】当蓝桥杯开设Web组之后,对几题能拿省一?

目录 &#x1f3c6;难度分析 &#x1f3c6;一、水果拼盘 &#x1f3c6;二、展开你的扇子 &#x1f3c6;三、和手机相处的时光 &#x1f3c6;四、灯的颜色变化 &#x1f3c6;五、冬奥大抽奖 &#x1f3c6;六、蓝桥知识网 &#x1f3c6;七、布局切换 &#x1f3c6;八、购…

vue3,使用watch监听props中的数据

情况一&#xff1a;监听 props 中基本数据类型 父组件中对传入数据的处理 const handleClick () > {testStr.value P }子组件中监听传入的数据 watch(() > props.testStr,(newVal, oldVal) > {console.log(监听基本类型数据testStr)console.log(new, newVal)cons…

Vue 和 React 有什么不同?

大家好&#xff0c;我是前端西瓜哥。今天的文章简单探讨一下 Vue 和 React 的不同。 本人 Vue2 和 React 都用过&#xff0c;但不熟悉 Vue3&#xff0c;没用它做过项目。 其实我对这两大框架也没有认真钻研过它们的细节&#xff0c;也就是工作上用它们写一些简单业务&#xf…

解决npm ERR! Cannot read properties of null (reading ‘pickAlgorithm‘)报错问题

在vue项目中&#xff0c;使用npm i 命令安装node modules时&#xff0c;出现报错。 第一句&#xff1a; npm ERR! Cannot read properties of null (reading pickAlgorithm) 搜索的话也是有很多答案的&#xff0c;比如&#xff1a; 在终端中运行命令&#xff1a;npm cache cle…

Vue使用axios进行get请求拼接参数的几种方式

前言 本文主要介绍如何在Vue使用axios进行get请求拼接参数的两种方式 我们就以github上的一个开源接口举例&#xff1a; https://api.github.com/search/users?qxxx 这是github给开发人员提供的一个接口&#xff0c;是get请求。我们可以直接通过浏览器访问 很明显&#xff0…

ECharts 饼图颜色设置教程 - 4 种方式设置饼图颜色

本文首发&#xff1a;《ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色》 ECharts 饼状图颜色设置教程 方法一&#xff1a;在 series 内配置饼状图颜色方法二&#xff1a;在 option 内配置饼状图颜色方法三&#xff1a;在 data 内配置饼状图颜色方法四&#xff1a;配置 E…

UE4 利用WEBUI插件完成UE与JS的交互 (UE4嵌入WEB)

目录 一、UE4显示Echart图表 二、UE调用JS&#xff08;修改Echart图表数据&#xff09; 三、JS调用UE&#xff08;UE4中打印js传递过来的数据&#xff09; 一、UE4显示Echart图表 步骤&#xff1a; 1.下载WEBUI插件 我的UE编辑器版本是4.24.3对应版本的插件下载地址是 链…

全站最简单 “数据滚动可视化大屏” 【JS基础拿来即用】

源码获取方式&#xff1a; 数据滚动大屏源码&#xff0c;原生js实现超级简单-Javascript文档类资源-CSDN下载原生js实现的数据滚动大屏案例&#xff0c;实现应该是全网最简单的&#xff0c;拿来直接使用即可&#xff0c;没有会员的小伙伴去我文章主更多下载资源、学习资料请访问…

聊一聊浏览器打印 - window.print

前言 一般信息填写类的需求页面&#xff0c;都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图&#xff0c;而打印则是基于预览来生成 PDF 文件。 浏览器原生 API window.print() 可以用于打印当前窗口&#xff08;window.document&#xff09;视图…

CSS中animation动画-详解

1、animation有什么组成&#xff1f; Animations由两部分组成&#xff1a;css动画的配置&#xff0c;以及一系列的keyframes&#xff08;用来描述动画的开始、过程、结束状态&#xff09;。不需要了解任何Js技术即可完成动画的制作 2、关键帧应该怎么表示&#xff1f; 0%表示…

CSS的hover属性

1.hover的定义 :hover在鼠标移到链接上时添加的特殊样式 :hover适用于任何元素 2.hover的使用方法 用法1:控制自身的样式 鼠标悬浮在元素上改变元素样式,改变本身的背景颜色,例如: 用法2&#xff1a;通过hover控制其他块的样式 &#xff08;1&#xff09;控制子元素的样式…

【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;React专栏 之前学习了react-router-dom5版本的相关内容 参考文章&#x1f449;&#x1f3fb;React路由组件传参的三种方式和 【React路由】编程式路由导航 回顾上篇文章&#x1f449…

nvm管理node版本

nvm 使用 1. nvm介绍 nvm 全英文也叫 node.js version management&#xff0c;是一个 nodejs 的版本管理工具 nvm 和 npm 都是 node.js 版本管理工具&#xff0c;为了解决 node.js 各种版本存在不兼容现象可以通过它可以安装和切换不同版本的 node.js 2. 安装与配置 2-1 nv…