使用vsCode来开发uniapp微信小程序

前言

本文原创作者：wocwin，本人仅做记录保存。

用uni-app Vue3+ts+vite技术栈开发；而官方推荐使用HBuilderX开发，而考虑到我对VsCode更熟悉，故此总结了一下uniapp项目使用vscode代替HBuilderX开发。以下是由微信小程序项目为例：

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

具体你查看官方文档

先根据官网vue-cli创建模式，将项目模板建立起来。

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、导入微信开发者工具

项目运行成功后会生成dist文件 

 

 

4、若出现如下报错

http://****** 不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html(env: Windows,mp,1.06.2401020; lib: 3.4.3)

 解决

 用 VS Code 开发 uni-app 项目

 HbuilderX 对 TS 类型支持暂不完善
VS Code 对 TS 类型支持友好，熟悉的编辑器

1、安装uni-app插件 

uni-create-view ---->可快速创建uni-app页面
uni-helper ----->uni-app代码提示
uniapp小程序扩展 ------->鼠标悬停查看文档 

 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 出现类型“{ class: string; }”的参数不能赋给类型错误时 

类型“{ class: string; }”的参数不能赋给类型“ComponentPublicInstanceConstructor<CreateComponentPublicInstance<Readonly<ExtractPropTypes<Partial<{ hoverClass: string; hoverStopPropagation: boolean; hoverStartTime: number; hoverStayTime: number; }>>>, … 18 more …, {}>, … 4 more …, MethodOptions> & … 4 more … & Record<…>”的参数。
不能将类型“{ class: string; }”分配给类型“ComponentPublicInstanceConstructor<CreateComponentPublicInstance<Readonly<ExtractPropTypes<Partial<{ hoverClass: string; hoverStopPropagation: boolean; hoverStartTime: number; hoverStayTime: number; }>>>, … 18 more …, {}>, … 4 more …, MethodOptions>”。
类型“{ class: string; }”提供的内容与签名“new (…args: any[]): CreateComponentPublicInstance<Readonly<ExtractPropTypes<Partial<{ hoverClass: string; hoverStopPropagation: boolean; hoverStartTime: number; hoverStayTime: number; }>>>, … 18 more …, {}>”不匹配。ts-plugin(2345)

 

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