【微信】【Windows端】开启2024最新版微信小程序Devtools调试窗口

前言

搭建uni-app项目（以下是使用命令安装）

npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

项目安装完成后

1、修改manifest.json文件

2、安装依赖&运行项目（推荐使用pnpm）

# 安装pnpm
npm install pnpm -g
# 安装依赖
pnpm install
# 运行项目
pnpm dev:mp-weixin

3、导入微信开发者工具

用 VS Code 开发 uni-app 项目

1、安装uni-app插件

2、安装类型声明文件（进行TS类型校验）

pnpm i -D @types/wechat-minirogram @uni-helper/uni-app-types

2-1、配置tsconfig.json

{
  "compilerOptions": {
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "@types/wechat-miniprogram",
      "@uni-helper/uni-ui-types", // uni-ui 组件类型
      "@uni-helper/uni-app-types" // uni-app 组件类型
    ]
  },
  //加入配置，将标签视为原始组件
  "vueCompilerOptions": {
    "nativeTags": [
      "block",
      "component",
      "template",
      "slot"
    ]
  }
}

3、page.json文件添加注释

解决vscode改动代码微信开发者工具能实时更新

Vs Code改动（取消自动保存）

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c11f63e957154159b326b32a6ec87c5f.png

微信开发者工具改动如下：

Vs Code 出现类型“{ class: string; }”的参数不能赋给类型错误时

解决方法（使用Vue - Official2.012版本）

相关文章

基于ElementUi再次封装基础组件文档

基于ant-design-vue再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档