[WEB]初识uni-app之IDE微信小程序开发及配置部署（1）

目录

一、引言

二、在HBuilderX中运行uni-app项目

三、在VS Code运行uni-app项目

三、总结

---

一、引言

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app项目目录结构如下：

今天，主要介绍通过命令行方式安装uni-app项目，通过HBuilder和VS Code编辑器开发微信小程序安装和配置等过程。

二、在HBuilderX中运行uni-app项目

1. 通过命令行方式安装

        1.1. 确保已经安装node.js（https://nodejs.org/zh-cn）

        1.2. 安装pnpm软件包管理器（https://www.pnpm.cn/installation）

        1.3. 创建uni-app Vue3/Vite版

                1.3.1. 创建以 typescript 开发的工程：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

                1.3.2. 如下载失败，直接访问gitee下载模板：https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip

        1.4. 在manifest.json微信小程序配置中添加appid

        1.5. 将Vue编译成微信小程序

                1.5.1. 执行依赖包：pnpm i

                1.5.2. 执行编译器脚本：pnpm dev:mp-weixin

                1.5.3. 将编译完成的微信小程序块导入到微信开发者工具中

2. HBuilderX 和 VS Code的区别

        2.1. HBuilderX对TS类型支持暂不完善

        2.2. VS Code对TS类型支持友好，熟悉的编辑器

三、在VS Code运行uni-app项目

1. 确保已安装VS Code 编辑器

2. 导入上述uni-preset-vue-vite-ts项目

3. 添加VS Code插件

        3.1. 安装uni-app插件

                3.1.1. uni-create-view插件：快速创建uniapp视图与组件

                3.1.2. uni-helper插件：代码提示

                3.1.3. uniapp小程序扩展插件：鼠标悬浮查询属性文档

        3.2. 配置ts类型校验

                3.2.1 安装类型声明文件：

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

                3.2.2. 配置tsconfig.json：

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-app-types"
    ]
  },
  "vueCompilerOptions": {
         // 2024之前，experimentalRuntimeMode 已废弃，现调整为 nativeTags，请升级 Volar 插件至最新版本 
        // "nativeTags": ["block", "component", "template", "slot"] 
        // 2024之后，“nativeTags”废弃
        "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
    },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

        3.3. 解决json注释报错问题

4. 将编译完成的微信小程序块导入到微信开发者工具中，即可开始开发。

三、总结

本文介绍了uni-app在HBuilderX 和 VS Code开发过程中，uni-app项目的安装、微信小程序编译，IDE编辑器插件安装和项目配置等内容，读者可基于本文章初识uni-app项目，并且通过IDE进行开发和代码调试。