山东省建设工程 评估中心网站河南专业网站建设

在本系列第一篇中，我们将从项目初始化开始，搭建基本的目录结构，并完成四个主页面的创建与 TabBar 设置。
（tip：你可能会觉得有点 ai 化，因为这个文案是我自己写了一遍文案之后让 ai 去优化输出的）

---

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

---

一、创建项目与规范目录结构

1. 打开 HBuilderX，创建一个新的 uni-app 项目。在创建时请选择 Vue 2 版本。

2. 项目创建完成后，建议提前划分好目录结构。

虽然部分目录在初期可能暂未使用，但良好的结构有助于后续开发的规范和扩展。
推荐的目录结构如下：

/uni-app-wxschool/              # 项目根目录
├── /components/                # 公共组件（如卡片、导航栏等）
│   └── ...
│
├── /pages/                     # 页面目录
│   ├── /home/                  # 首页
│   │   └── index.vue
│   ├── /services/              # 校园服务
│   │   └── index.vue
│   ├── /forum/                 # 校园论坛
│   │   └── index.vue
│   ├── /profile/               # 用户中心
│   │   └── index.vue
│   └── /login/                 # 登录注册页
│       └── index.vue
│
├── /store/                     # Vuex 状态管理
│   └── index.js
│
├── /utils/                     # 工具函数（如请求封装、表单验证等）
│   └── ...
│
├── /common/                    # 通用配置（样式、常量、mixin 等）
│   └── ...
│
├── /static/                    # 静态资源（图片、图标等）
│   └── ...
└── config.js                   # 项目配置（如接口地址、环境变量等）
│ 	...													# 项目自带的其他文件

💡 注意事项：如果你手动创建了某些页面文件，记得检查 pages.json 是否正确引入了这些页面路径，否则页面将无法被识别。

二、配置四个 Tab 页面与底部导航栏

2.1 添加图标资源

在 /static/tabbar/ 目录中添加四个页面的图标，分别为选中与未选中状态，例如：

static/
└── tabbar/├── 11.png   # 首页默认图标├── 12.png   # 首页选中图标├── 21.png   # 服务默认图标├── 22.png   # 服务选中图标├── 31.png   # 论坛默认图标├── 32.png   # 论坛选中图标├── 41.png   # 我的默认图标└── 42.png   # 我的选中图标

👉 图标推荐来源：阿里巴巴矢量图标库（iconfont）

2.2 页面结构准备

确保以下页面结构已创建：

/pages/
├── /home/        → 首页
├── /services/    → 校园服务
├── /forum/       → 校园论坛
├── /profile/     → 用户中心

每个目录下至少应有一个 index.vue 页面文件。

2.3 配置 pages.json

在 pages.json 中添加页面配置与底部 tabBar 设置：

{"pages": [{"path": "pages/home/index","style": {"navigationBarTitleText": "首页"}},{"path": "pages/services/index","style": {"navigationBarTitleText": "校园服务"}},{"path": "pages/forum/index","style": {"navigationBarTitleText": "校园论坛"}},{"path": "pages/profile/index","style": {"navigationBarTitleText": "我的"}}],"tabBar": {"color": "#999999","selectedColor": "#007AFF","backgroundColor": "#FFFFFF","borderStyle": "black","list": [{"pagePath": "pages/home/index","text": "首页","iconPath": "static/tabbar/11.png","selectedIconPath": "static/tabbar/12.png"},{"pagePath": "pages/services/index","text": "服务","iconPath": "static/tabbar/21.png","selectedIconPath": "static/tabbar/22.png"},{"pagePath": "pages/forum/index","text": "论坛","iconPath": "static/tabbar/31.png","selectedIconPath": "static/tabbar/32.png"},{"pagePath": "pages/profile/index","text": "我的","iconPath": "static/tabbar/41.png","selectedIconPath": "static/tabbar/42.png"}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "校园生活平台","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}
}

✅ 总结

至此，我们完成了：
● 项目的初始化
● 合理的目录结构划分
● 四个一级页面的创建
● 底部导航栏（TabBar）的配置
在下一篇中，我们将开始实现数据库搭建，请求方式的封装，后端的搭建