前端培训 - kevin-qwqb-resize-sgq-20260123-103259

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 样式控制。
• 为每个设备项添加静态数据（如编号、状态、责任人），模拟真实数据渲染。