wx is not defined JS里出这个错,是因为没包含微信JSSDK文件

今天上线到服务器时,点击分享,出错

wx is not defined 

搞半天,资料,原来是忘记了包含这个文件 

 

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>

在 Vue3 项目中使用 `qqmap-wx-jssdk.js` 时,现 `'qq' is not defined` 或类似未定义的误,通常是由于 SDK 文件未正确加载或全局变量未正确注入导致的。以下是解决此问题的具体方法: ### 引入 SDK 的方式 1. **通过 CDN 引入** 在 `index.html` 中添加以下脚本标签,确保 SDK 在 Vue 应用初始化之前加载: ```html <script src="https://mapapi.qq.com/mapApi/jsApiV2/1.0.0/qqmap-wx-jssdk.js"></script> ``` 这样可以保证全局变量 `qq` 已经存在,Vue 组件可以直接访问它。 2. **将 SDK 拷贝到本地并手动引入** 将 `qqmap-wx-jssdk.js` 下载到项目中的 `public` 目录(例如 `/public/js/qqmap-wx-jssdk.js`),然后在 `index.html` 中引用: ```html <script src="/js/qqmap-wx-jssdk.js"></script> ``` ### 声明全局变量 在 TypeScript 项目中,需要为 `qq` 添加类型声明以避免编译报。可以在 `src/declarations.d.ts` 文件中添加如下声明: ```ts declare const qq: any; ``` 并在 `tsconfig.json` 中确认该文件包含在 `include` 列表中,例如: ```json { "include": ["src/**/*", "src/declarations.d.ts"] } ``` ### 使用 SDK 实例化 在组件中使用 SDK 时,建议在 `onMounted` 生命周期钩子中调用相关 API,确保 DOM 和脚本已经加载完成: ```vue <script setup> import { onMounted } from 'vue'; onMounted(() => { const map = new qq.maps.Map(document.getElementById('container'), { center: new qq.maps.LatLng(39.9042, 116.4074), zoom: 12 }); }); </script> <template> <div id="container" style="width: 100%; height: 500px;"></div> </template> ``` ### 注意事项 - 确保 SDK 加载顺序优先于 Vue 应用的初始化,否则可能会因全局变量未定义而报。 - 如果使用 Webpack 或 Vite 构建工具,不推荐通过 `import` 方式直接导入 `qqmap-wx-jssdk.js`,因为该 SDK 是为小程序环境设计的,可能与浏览器环境存在兼容性问题[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值