微信天气小程序项目实战 - 课程总览与项目规划
1. 课程介绍
欢迎来到“微信天气小程序项目实战”课程！
本课程将教学任务分解为四大核心阶段，旨在通过一个完整的、真实的项目，带领同学们从零开始，一步步构建一个功能丰富的天气小程序。我们将使用 uni-app 框架，结合 Vue 3 的组合式API（Composition API）和 uni-ui 组件库来完成开发。
通过本课程，学生将专注于掌V握项目架构设计、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 - 🔗 核心工具：
utils/api.js: 封装uni.request用于API请求。utils/location.js: 封装uni.getLocation用于地理位置获取。utils/store.js: 简易的全局状态管理中心。
- 🗄️ 本地存储：
uni.setStorageSync/uni.getStorageSync
4. 授课与编程流程总图
此图详细展示了从项目搭建到最终发布的完整开发脉络和各阶段的技术点。
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, 小程序发布流程 |
教师提示 您可以根据学生的接受程度，灵活调整每个阶段的授课时长。此结构更侧重于按功能模块和技术分层来推进，有助于学生建立更宏观的工程思想。