微信天气小程序项目实战 - 课程总览与项目规划
1. 课程介绍
欢迎来到“微信天气小程序项目实战”课程！
本课程将教学任务分解为四大核心阶段，旨在通过一个完整的、真实的项目，带领同学们从零开始，一步步构建一个功能丰富的天气小程序。我们将使用 uni-app 框架，结合 Vue 3 的组合式API（Composition API）和 uni-ui 组件库来完成开发。
通过本课程，学生将专注于掌握项目架构设计、API数据对接、组件化开发和状态管理等核心工程能力，获得宝贵的实战经验。
关于UI的说明
当前项目的UI是功能性的，保证了核心功能的可用性。课程的重点是后端逻辑、数据流和项目结构。您可以以此为基础，在后续课程或项目中，带领学生进行更深入的UI/UX美化和迭代。
2. 项目核心目标
功能完善：实现实时天气、多日预报、空气质量、生活指数、城市搜索与切换。
架构清晰：建立视图层（Pages/Components）、服务层（Utils）和数据层（Datas/Store）分明的项目结构。
数据真实：对接真实的第三方天气数据API（以和风天气为例），替换项目中的模拟数据。
体验流畅：应用加载迅速，交互响应及时，有良好的用户体验。
3. 技术栈
- 开发框架：
uni-app - 前端语言：
JavaScript (ES6+) - MVVM框架：
Vue.js 3.x(使用<script setup>语法) - UI 组件库：
uni-ui - 核心工具：
本地存储：uni.setStorageSync/uni.getStorageSync
4. 授课与编程流程总图
此图详细展示了从项目搭建到最终发布的完整开发脉络和各阶段的技术点。
graph TD
subgraph "准备阶段"
A1["环境配置 HBuilderX"]
A2["注册和风天气API
获取API Key"] end subgraph "阶段一: 项目基础与组件化" B1["创建 uni-app 项目
Vite + Vue3"] --> B2["配置 `pages.json`
定义首页、城市页等路由"] B2 --> B3["分析首页UI
规划组件层级"] B3 --> B4["创建静态组件
`CurrentEnvironment.vue`
`HourlyForecast.vue`
`DailyForecast.vue`"] B4 --> B5["编写组件的
Template 和 Style"] B5 --> B6["在 `pages/index/index.vue`
引入并组装所有静态组件
完成首页静态布局"] end subgraph "阶段二: 核心服务与状态管理" C1["创建 `utils` 目录
组织核心服务逻辑"] --> C2["编写 `location.js`
实现获取经纬度/IP定位"] C2 --> C3["编写 `api.js`
封装 `uni.request`
统一处理天气API请求"] C3 --> C4["编写 `store.js`
作为简易全局状态
存储天气、位置信息"] C4 --> C5["在 `index.vue` 的 `onLoad` 中
调用 `location.js` 和 `api.js`"] C5 --> C6["将获取到的API数据
存入 `store.js` 并
传递给子组件"] C6 --> C7["子组件接收 `props`
动态渲染真实天气数据"] end subgraph "阶段三: 城市管理功能" D1["创建 `pages/city/city.vue` 页面"] --> D2["使用 `uni-indexed-list`
构建城市选择列表UI"] D2 --> D3["在 `api.js` 中
新增城市搜索API接口"] D3 --> D4["在 `city.vue` 中实现
城市搜索与选择逻辑"] D4 --> D5["用户选择城市后
将新城市信息存入全局 `store.js`
或通过 `uni.setStorageSync` 持久化"] D5 --> D6["调用 `uni.navigateBack`
返回首页"] D6 --> D7["在 `index.vue` 的 `onShow`
生命周期中检查城市变化
并重新获取天气数据"] end subgraph "阶段四: UI优化与项目发布" E1["开发 `LifeIndex.vue` 组件
并结合 `uni-popup` 实现
点击查看详情"] --> E2["改造 `static/SvgIcon`
实现天气图标的动态显示"] E2 --> E3["为 `index.vue` 添加
下拉刷新功能
onPullDownRefresh"] E3 --> E4["代码审查与逻辑优化
例如合并重复函数"] E4 --> E5["配置 `manifest.json`
如AppID、应用图标等"] E5 --> E6["执行 `npm run build:mp-weixin`
进行项目打包"] E6 --> E7["在微信开发者工具中
预览、调试并上传发布"] end %% 依赖关系 A1 & A2 --> B1; B6 --> C1; C7 --> D1; D7 --> E1;
获取API Key"] end subgraph "阶段一: 项目基础与组件化" B1["创建 uni-app 项目
Vite + Vue3"] --> B2["配置 `pages.json`
定义首页、城市页等路由"] B2 --> B3["分析首页UI
规划组件层级"] B3 --> B4["创建静态组件
`CurrentEnvironment.vue`
`HourlyForecast.vue`
`DailyForecast.vue`"] B4 --> B5["编写组件的
Template 和 Style"] B5 --> B6["在 `pages/index/index.vue`
引入并组装所有静态组件
完成首页静态布局"] end subgraph "阶段二: 核心服务与状态管理" C1["创建 `utils` 目录
组织核心服务逻辑"] --> C2["编写 `location.js`
实现获取经纬度/IP定位"] C2 --> C3["编写 `api.js`
封装 `uni.request`
统一处理天气API请求"] C3 --> C4["编写 `store.js`
作为简易全局状态
存储天气、位置信息"] C4 --> C5["在 `index.vue` 的 `onLoad` 中
调用 `location.js` 和 `api.js`"] C5 --> C6["将获取到的API数据
存入 `store.js` 并
传递给子组件"] C6 --> C7["子组件接收 `props`
动态渲染真实天气数据"] end subgraph "阶段三: 城市管理功能" D1["创建 `pages/city/city.vue` 页面"] --> D2["使用 `uni-indexed-list`
构建城市选择列表UI"] D2 --> D3["在 `api.js` 中
新增城市搜索API接口"] D3 --> D4["在 `city.vue` 中实现
城市搜索与选择逻辑"] D4 --> D5["用户选择城市后
将新城市信息存入全局 `store.js`
或通过 `uni.setStorageSync` 持久化"] D5 --> D6["调用 `uni.navigateBack`
返回首页"] D6 --> D7["在 `index.vue` 的 `onShow`
生命周期中检查城市变化
并重新获取天气数据"] end subgraph "阶段四: UI优化与项目发布" E1["开发 `LifeIndex.vue` 组件
并结合 `uni-popup` 实现
点击查看详情"] --> E2["改造 `static/SvgIcon`
实现天气图标的动态显示"] E2 --> E3["为 `index.vue` 添加
下拉刷新功能
onPullDownRefresh"] E3 --> E4["代码审查与逻辑优化
例如合并重复函数"] E4 --> E5["配置 `manifest.json`
如AppID、应用图标等"] E5 --> E6["执行 `npm run build:mp-weixin`
进行项目打包"] E6 --> E7["在微信开发者工具中
预览、调试并上传发布"] end %% 依赖关系 A1 & A2 --> B1; B6 --> C1; C7 --> D1; D7 --> E1;
5. 课程大纲 (四大阶段)
| 阶段 | 核心内容 | 主要产出物 | 关键技术点 |
|---|---|---|---|
| 一 | 项目基础与组件化 | 项目骨架、首页静态UI、组件化概念建立 | uni-app项目结构, pages.json, Vue3组件拆分与Props |
| 二 | 核心服务与状态管理 | 可用的定位和天气服务、中心化的数据流、动态更新的首页 | uni.request, uni.getLocation, Promise与async/await, 简易状态管理 |
| 三 | 城市管理功能实现 | 功能完整的城市搜索、切换、增删与持久化列表 | uni.navigateTo, uni-indexed-list, onShow, uni.setStorageSync |
| 四 | UI优化与项目发布 | 更优的用户体验（加载/错误/刷新）、精美的动态背景、可发布的版本 | uni-popup, onPullDownRefresh, manifest.json, 小程序发布流程 |
教师提示：您可以根据学生的接受程度，灵活调整每个阶段的授课时长。此结构更侧重于按功能模块和技术分层来推进，有助于学生建立更宏观的工程思想。