uniapp学习【项目创建+项目结构解析】
1.项目创建
打开 HBuilderX，点击 “文件> 新建 > 项目”。
选择 “Uniapp 项目”，填写以下信息：
项目名称：自定义（例：
uniapp-miniprogram-demo）。目录：选择本地文件夹（建议新建一个专门的开发文件夹，避免路径含中文）。
模板：选择 “默认模板（Vue3）”（务必选 Vue3，否则后续无法使用 Vue3 语法）。
勾选 “启用 TypeScript”（可选，小白建议先不勾，用 JavaScript 更易上手）。
勾选 “创建 git 仓库”（可选，用于版本管理）。
点击 “创建”，项目初始化完成（首次创建会自动下载依赖，需等待 1-2 分钟）。
项目创建完成后，点击 HBuilderX 工具栏的 “运行> 运行到小程序模拟器 > 微信开发者工具”。
此时会自动启动微信开发者工具，并加载项目（首次运行可能需要授权，点击 “允许” 即可）。
若微信开发者工具显示 “编译成功”，页面出现 Uniapp 默认的 “Hello World”，则项目运行成功。
2.项目结构解析
uniapp-miniprogram-demo/
├── pages/ # 页面文件夹（核心！所有页面放在这里）
│ └── index/ # 首页文件夹（每个页面一个单独文件夹）
│ ├── index.vue # 首页组件（页面核心，含模板、逻辑、样式）
│ ├── index.json # 首页配置（单独配置当前页面的导航栏、标题等）
│ ├── index.js # 首页逻辑（若用JavaScript，可选，可合并到.vue文件）
│ └── index.wxss # 首页样式（若需单独写微信小程序样式，可选）
├── static/ # 静态资源文件夹（存放图片、字体等，不会被编译）
├── components/ # 自定义组件文件夹（存放复用的组件，如弹窗、卡片）
├── utils/ # 工具函数文件夹（存放通用函数，如请求封装、日期格式化）
├── App.vue # 全局根组件（控制全局样式、全局生命周期）
├── main.js # 入口文件（初始化Vue实例、引入全局依赖）
├── pages.json # 全局页面配置（核心！配置所有页面路径、全局导航栏、tabBar等）
├── manifest.json # 应用配置（配置小程序AppID、名称、权限等）
└── uni.scss # Uniapp全局样式文件（定义全局变量、混入等）2.1 pages.json（全局页面配置）
{"pages": [// 页面路径配置：第一个页面为首页{"path": "pages/index/index", // 页面路径（对应pages文件夹下的目录）"style": {"navigationBarTitleText": "首页", // 当前页面导航栏标题"navigationBarBackgroundColor": "#ffffff", // 导航栏背景色"navigationBarTextStyle": "black" // 导航栏文字颜色（仅支持black/white）}},// 新增页面需在这里添加路径（例：详情页）{"path": "pages/detail/detail","style": {"navigationBarTitleText": "详情页"}}],"globalStyle": {// 全局样式配置（所有页面默认继承）"navigationBarBackgroundColor": "#ffffff", // 全局导航栏背景色"navigationBarTextStyle": "black", // 全局导航栏文字颜色"backgroundColor": "#f5f5f5" // 页面背景色},"tabBar": {// 底部tab栏配置（若小程序需要多tab页面，需配置此项）"color": "#666666", // 未选中tab文字颜色"selectedColor": "#007aff", // 选中tab文字颜色"backgroundColor": "#ffffff",// tab栏背景色"list": [// tab项配置（最少2项，最多5项）{"pagePath": "pages/index/index", // tab对应的页面路径"text": "首页", // tab文字"iconPath": "static/tab/home.png",// 未选中图标路径（建议尺寸：40x40px）"selectedIconPath": "static/tab/home-selected.png"// 选中图标路径},{"pagePath": "pages/my/my","text": "我的","iconPath": "static/tab/my.png","selectedIconPath": "static/tab/my-selected.png"}]}
}2.2 manifest.json（应用配置）
关键配置：小程序 AppID（必须配置，否则无法真机调试和发布）。
打开
manifest.json，点击 “微信小程序配置”。填写 “AppID”：登录微信公众平台，进入 “开发> 开发设置”，复制 “小程序 AppID”（个人账号也可获取，测试号不可用于发布）。
其他配置（如小程序名称、描述）可根据需求填写。
2.3 App.vue（全局根组件）
控制全局样式和全局生命周期
<template><!-- 全局页面容器（所有页面都会嵌套在这个容器里） --><div id="app"><router-view /> <!-- 页面路由出口（Uniapp自动管理，无需修改） --></div>
</template><script setup>
// 全局生命周期钩子（Uniapp特有）
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'// 小程序初始化完成时触发（全局只触发一次）
onLaunch(() => {console.log('小程序初始化完成')
})// 小程序显示时触发（如从后台切到前台）
onShow(() => {console.log('小程序显示')
})// 小程序隐藏时触发（如切到后台）
onHide(() => {console.log('小程序隐藏')
})
</script><style>
/* 全局样式（所有页面都会继承） */
/* 注意：不要在App.vue中写scoped样式，否则不会生效 */
body {margin: 0;padding: 0;box-sizing: border-box;
}
</style>2.4 页面组件（如 index.vue）
每个页面的核心文件，包含 “模板（Template）”“逻辑（Script）”“样式（Style）” 三部分
<template><!-- 模板：页面UI结构，只能有一个根节点（通常用view） --><view class="index-page"><text class="title">Hello Uniapp+Vue3!</text><button @click="handleClick">点击我</button></view>
</template><script setup>
// 逻辑：页面交互逻辑（Vue3 setup语法糖，无需写export default）
// 1. 引入需要的API或组件（若有）
import { ref } from 'vue'// 2. 响应式数据（Vue3特有，ref用于基本类型，reactive用于对象/数组）
const count = ref(0) // 定义响应式变量count，初始值0// 3. 事件处理函数
const handleClick = () => {count.value += 1 // 修改ref变量需用.valueuni.showToast({ title: `点击了${count.value}次` }) // Uniapp弹窗API
}// 4. 页面生命周期钩子（Uniapp页面特有，比Vue3生命周期更常用）
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'// 页面加载时触发（只触发一次，可接收路由参数）
onLoad((options) => {console.log('页面加载，路由参数：', options)
})// 页面显示时触发（每次页面切换到前台都会触发）
onShow(() => {console.log('页面显示')
})// 页面初次渲染完成时触发（可操作DOM）
onReady(() => {console.log('页面渲染完成')
})
</script><style scoped>
/* 样式：页面样式，scoped表示样式只作用于当前页面（避免污染其他页面） */
.index-page {padding: 20rpx; /* Uniapp推荐用rpx做单位（自适应不同屏幕），1rpx=0.5px */
}
.title {font-size: 32rpx;color: #333;margin-bottom: 30rpx;display: block;
}
button {background-color: #007aff;color: #fff;
}
</style>