第一步：开发环境准备

1. 安装Node.js：访问Node.js官网，下载并安装长期支持版（LTS）。安装完成后，在命令行输入 `node -v` 和 `npm -v` 检查是否安装成功。

2. 安装开发工具：

HBuilderX：DCloud官方推出的IDE，对Uni-app开发有深度优化和快捷提示，是优选。从官网下载安装即可。

微信开启者工具：用于小程序的真机预览、调试和上传。从微信开放平台下载安装。

3. 创建Uni-app项目：

打开HBuilderX，点击“文件” -> “新建” -> “项目”。

选择“uni-app”类型，输入项目名称，选择模板（推荐使用“默认模板”），点击创建。

第二步：项目结构与配置

创建后的项目主要目录结构如下：

`pages`：存放所有小程序页面，每个页面由`.vue`文件（或.js/.json/.css文件）组成。

`static`：存放静态资源，如图片、字体。

`App.vue`：应用根组件，可设置全局样式和生命周期。

`main.js`：项目入口文件。

`manifest.json`：应用配置文件，用于配置应用名称、AppID、启动图、各平台特有设置等。

`pages.json`：页面配置文件，用于注册页面路由、设置全局导航栏样式、底部Tab栏等。

关键配置（manifest.json）：在此文件中正确填写从微信公众平台申请到的小程序AppID。

第三步：编写页面与组件

1. 创建页面：在`pages.json`的`pages`数组中添加新页面路径，HBuilderX会自动在`pages`目录下生成页面文件。

2. 编写Vue单文件：一个页面通常是一个`.vue`文件，包含三部分：

`