一、uniapp项目

  uniapp项目是基于uni-app框架开发的跨平台应用项目。它使用Vue.js语法，可一次编写代码，编译到微信小程序、H5、App等多端，实现代码复用与高效开发，降低维护成本，适合多平台发布需求。

二、安装开发工具

1.  HBuilderX（可选）

    创建运行 uni-app 项目有两种方式，其一是在HBuilderX中创建，其二是使用命令行创建，可以自行选择创建运行方式。

    官网链接：HBuilderX-高效极客技巧。

    跳转到官网，下载安装包安装就可以，HBuilderX注册用户账户按照个人需求选择，不登陆也可以实现开发需求。

2.微信开发者工具

2.1 注册小程序用户

    注册链接：公众号。点击“前往注册”按钮，安装指导完成注册即可。

2.2 安装微信开发者工具

    微信开发者工具链接：下载。安装包有三个版本，稳定版、预发布版、开发版，开发中一般推荐使用稳定版本，能保证开发过程的稳定性和可靠性，适合个人开发练习。

三、创建uni-app项目

3.1 在HBuilderX中创建uni-app项目

3.1.1 选择模板

    新建uni-app项目一般选择“默认模板”，此次模板选择Vue版本选择Vue3。

3.1.2 安装uni-app(Vue3)插件

    点击导航栏“工具”，选择“插件安装”，点击“安装新插件”，安装uni-app(Vue3)插件。

3.1.3 运行uni-app项目

    点击导航栏“工具”，选择“设置”，点击“运行配置”并下滑至“微信开发者工具路径”，选择下载的微信开发者工具安装路径。

    点击导航栏“运行”，选择“运行到小程序模拟器”中的“微信开发者工具”，运行项目。

    运行成功会自动跳转到“微信开发者工具”页面。点击“分离窗口”，选择模拟器页面的制定窗口，即可实现修改过程中浏览效果。

3.2 在VSCode中运行uni-app项目

3.2.1 命令行新建uni-app项目

1.安装degit
npm install -g degit

2.创建 uni-app项目
degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

3.安装依赖
npm install

3.2.2 运行项目

    安装成功后，可以在“package.json”文件查看需要运行的环境。此项目选择“dev:mp-weixin”模式运行。

运行代码
npm run dev:mp-weixin

3.2.3 微信小程序“分离窗口”

    运行成功后，在微信小程序中选择导入项目 ，导入的项目路径是 dist →dev → mp-weixin，要选中 mp-weixin 这个目录。

3.2.4 安装 uni-app 相关插件

    在VSCode软件运行，uni-app相关插件。

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

3.3 ts 类型校验

3.3.1 安装 ts 类型校验

1. 安装ts类型校验
npm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

3.3.2 配置 tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "outDir": "dist",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "ignoreDeprecations": "5.0",
    "verbatimModuleSyntax": true,
    "types": ["@dcloudio/types","@types/wechat-miniprogram","@uni-helper/uni-app-types"]
  },
    "vueCompilerOptions": {
      "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
    },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

四、出现的问题

4.1 软件访问权限

    在运行uni-app项目选择微信开发者工具方式浏览遇到软件访问权限问题，可以右击“微信开发者工具.exe”，查看“兼容性”的“以管理员身份运行此程序”是否勾选。

4.2 页面类型“{ class: string; }”的参数不能赋给类型

    这是因为@uni-helper/uni-app-types包的版本在0.5.13版本开始使用 plugins 写法，以前的写法是nativeTags。将 tsconfig.json 页面的 vueCompilerOptions 里的 nativeTags 修改为 plugins

注意：修改之后一定要重启！！

tsconfig.ts文件

    "vueCompilerOptions": {
      "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
    },

4.3 选项'importsNotUsedAsValues'已弃用

    选项'importsNotUsedAsValues'已弃用，并将在TypeScript 5.5中停止工作。指定compilerOption '" ignoreprecations ": "5.0"'来消除这个错误。使用'verbatimModuleSyntax'代替。

tsconfig.ts文件的compilerOptions里面添加

"ignoreDeprecations": "5.0",

 五、项目总结

    uni-app项目依赖版本不同，里面的配置有所改变。