Summary
Overview
本课程为微信小程序开发实战教学，聚焦使用 UniApp 框架构建一个车间设备管理小程序。课程从项目初始化开始，引导学员完成需求分析、项目结构搭建与前端界面设计。核心目标是实现一个可展示设备状态（正常/待维修/维护中/已损坏）、支持查看、编辑、新增与删除设备的前端界面，不涉及后端 API 实现。教学强调参照已有项目（D2 车间任务看板）进行 UI 设计，鼓励以列表或卡片形式呈现设备信息，优先完成界面布局再实现交互功能。
Topic (Timeline)
1. 项目启动与 UniApp 环境搭建 [00:08:41 - 00:13:29]
- 讲师引导学员在 HBuilder 中创建新的 UniApp 小程序项目，选择“空项目”模板。
- 禁用 UniCloud 与云开发选项，保留默认 Vue 3 版本。
- 指定项目保存路径为桌面下的“mp test”目录，完成项目创建。
- 指导学员通过 File > Open Directory 打开新建项目，确认项目结构为空。
2. 项目依赖初始化与入口配置 [00:13:33 - 00:19:20]
- 为加速开发，讲师建议直接复制已有的依赖包（如 view、router、penna）至项目目录，避免逐个安装。
- 修正项目入口文件：将默认的
.ts入口文件重命名为.js，确保运行时可正确识别。 - 启动 HBuilder 的运行器（ROM）以安装依赖，指出部分安装失败为正常现象。
- 确认项目已具备完整依赖结构，可进入开发阶段。
3. 车间设备管理需求分析 [00:19:20 - 00:22:23]
- 明确项目功能目标：开发一个用于监控车间设备状态的小程序。
- 定义设备核心数据字段：设备编号、状态（正常/待维修/维护中/已损坏）、责任人、维护时间。
- 假设设备数量为 10 台，作为初始数据规模。
- 功能需求包括：设备列表展示、点击查看详情、编辑状态、新增设备、删除设备。
- 强调当前阶段仅实现前端界面，暂不对接后端服务。
- 宣布上午第一阶段结束，安排休息，鼓励学员思考界面设计。
4. UI 设计指导与参考方案 [00:25:23 - 00:53:28]
- 提醒学员参考此前学习的 D2 车间任务看板代码（已在学员本地存在），作为 UI 布局参考。
- 明确基础要求：实现类似 D2 的列表式设备看板。
- 鼓励进阶实现：有能力者可采用“设备卡片”形式（企业级常见设计），作为加分项。
- 强调开发顺序：优先完成静态 UI 布局，再逐步添加交互逻辑。
- 指出避免过度复杂化，聚焦核心功能实现。
5. 课程结束与自由安排 [00:53:44 - 00:55:53]
- 宣布上午课程结束。
- 学员可选择休息或继续自主开发。
Appendix
Key Principles
- 前端优先：本项目仅实现前端界面，后端 API 不在本次开发范围内。
- 渐进式开发：先完成 UI 布局，再实现交互逻辑。
- 复用参考：鼓励复用已有项目（D2 看板）的结构与样式，提升开发效率。
Tools Used
- HBuilder X：开发环境
- UniApp：跨平台小程序框架
- Vue 3：前端框架版本
- 依赖包（view/router/penna）：通过复制方式引入，避免 npm 安装
Common Pitfalls
- 入口文件扩展名错误（.ts 未改为 .js）导致项目无法启动。
- 过度依赖云服务（UniCloud）导致配置复杂化，本项目已明确禁用。
- 过早实现功能逻辑，忽视 UI 布局优先原则。
Practice Suggestions
- 复现 D2 看板的列表布局，作为基础练习。
- 尝试将列表改为卡片式布局，练习 Flex 或 Grid 样式控制。
- 为每个设备项添加静态数据（如编号、状态、责任人），模拟真实数据渲染。