项目名称：edu_demo

技术：Vue2 + uni-app + uView2

环境：HBuilderX、微信开发者工具

当日用时：2h（40min 知识点 + 70min 敲代码 + 10min 整理问题）

【今日目标】新建项目、创建首页 + 个人中心页面、配置导航栏、模拟器正常运行

一、当日核心知识点手写笔记

1. uni-app 项目整体目录结构释义

1. pages：所有页面存放目录，一个子文件夹对应一个页面，页面后缀.vue，项目所有页面必须在pages.json注册路由，否则无法访问。
2. static：静态资源目录，存放图片、UI 框架、css、字体等静态文件，打包资源不编译。
3. components：自定义复用组件目录，公共抽离页面代码放此处。
4. pages.json：全局配置核心文件，控制页面路由、导航栏样式、底部 tab 栏、全局窗口样式，是 uni-app 最重要配置文件。
5. manifest.json：项目打包配置，配置小程序 AppID、应用名称、图标、权限，发布上线使用。
6. App.vue：项目入口根组件，全局样式、全局生命周期配置。
7. main.js：项目 JS 入口，全局注册插件（uView、全局变量、全局过滤器）。

2. pages.json 配置规则

1. "pages":[]数组：数组内字符串是页面路径，数组第一项路径 = 项目默认启动首页。
2. "globalStyle"：全局导航、页面背景统一配置，所有页面默认继承。
3. "navigationBarTitleText"：导航栏文字；
4. "navigationBarBackgroundColor"：导航背景色；
5. "navigationBarTextStyle"：导航文字颜色（仅 black/white 可选）。

3. 运行逻辑：HBuilder 编辑保存→自动编译→微信开发者工具实时预览。

二、分步实操步骤（一步一操作，逐条执行）

步骤 1：新建 uni-app 项目

1. 打开 HBuilderX 软件，顶部菜单栏：【文件】→【新建】→【项目】。
2. 左侧选择【uni-app】→【默认模板】，项目名称填写：edu_demo，存储路径自选英文无中文路径。
3. 点击【创建】，等待自动生成基础目录。

默认创建好的项目结构如下图：

步骤 2：新建两个业务页面（首页 index、个人中心 mine）

1. 在项目pages文件夹上右键→【新建页面】。
2. 页面名称输入mine，勾选【自动在 pages.json 注册页面路径】，生成个人中心页。
3. 注：首页index是项目创建时默认创建的，如果没有的话，可以按照mine页面的创建方法自行创建。

步骤 3：修改 pages.json 全局导航配置

1. 双击打开项目根目录pages.json文件，删除默认冗余配置，替换为注释版代码。
2. 保存文件，HBuilder 自动编译。

下面这张图是创建项目默认的pages.json文件内容

pages.json完整代码+逐行详细注释

{
	// pages数组：注册项目所有页面路由，新增页面必须在此配置路径，否则系统找不到指定的页面
	"pages": [
		{  // 数组的第一个路径：程序默认首页，程序打开优先加载此页面
			"path": "pages/index/index",
			"style": {
				//  导航栏文字，如果为空则显示globalStyle中配置的navigationBarTitleText
				"navigationBarTitleText": ""
			}
		},
		{  // 第二个页面：个人中心页面路径
			"path": "pages/mine/mine",
			"style": {
				"navigationBarTitleText": ""
			}
		}
	],
	// globalStyle：全局窗口样式配置，项目所有页面默认共用此导航配置
	"globalStyle": {
		// 导航栏字体颜色：仅支持black（黑色）/white（白色）两个固定值
		"navigationBarTextStyle": "black",
		// 全默认导航标题文字，没有单独配置标题的页面统一显示该文字
		"navigationBarTitleText": "初高中教务管理系统",
		// 导航栏背景颜色：十六进制颜色码，#ffffff代表纯白色
		"navigationBarBackgroundColor": "#fffffff",
		// 页面下拉时背景底色，页面滚动露出空白处的颜色，#F5F5F5：浅灰白色 / 高级浅灰（网页常用背景灰）
		"backgroundColor": "#F5F5F5"
	},
	"uniIdRouter": {}
}

步骤 4：运行项目到微信开发者工具

1. HBuilder 顶部菜单【运行】→【运行到小程序模拟器】→【微信开发者工具】。
2. 提前打开微信开发者工具，开启服务端口，等待自动载入项目，查看模拟器顶部导航文字。

启动成功显示下面界面：

三、补充：自动生成的 index.vue 初始代码 + 逐行注释（首页默认页面）

<template>
	<!--template标签：页面DOM结构区域，所有页面标签必须写在该标签内部，uni-app根标签统一用view相当于HTML中的div-->
	<view class="content">
		<!--空白区域，后续添加文字、图片代码-->
	</view>
</template>

<script>
	// script标签：JS逻辑区域，控制页面数据、方法、生命周期
	export default {
		// data函数：Vue2页面数据定义固定写法，return{}中定义页面所有变量
		data(){
			return{
				
			}
		},
		// onLoad：页面生命周期函数，页面加载完成自动执行，当前无逻辑，先空置
		onLoad() {
			
		}
	}
</script>

<style scoped>
	/* style标签：页面样式，scoped代表样式仅用于当前index.vue页面，不会污染其他页面样式 */
	.content{
		padding: 20rpx;
	}
</style>

四、当日作业 & 打卡项

1. 运行项目后，模拟器顶部导航统一显示：初高中教务管理系统 □完成
2. 项目无报错、控制台无红色异常信息 □完成
3. 可以在模拟器顶部下拉，查看页面底色 #F5F5F5 浅灰色 □完成

五、备注

1. rpx：uni-app 专属自适应单位，自动适配不同手机屏幕宽度，开发统一使用 rpx，不用 px。
2. 后续所有练习均在 edu_demo 项目中迭代，不新建新项目。