微信小程序开发项目实战 教学大纲
一、课程目标任务及基本要求
(一)课程目标
1. 知识目标
1) 掌握微信小程序的概念、特点、生态定位及与微信、微信公众号
的关系。
2) 理解软件开发阶段、软件生命周期及微信小程序项目管理流程。
3) 掌握 WXML、WXSS、JavaScript、JSON 四大核心文件的作用与
语法。
4) 掌握数据绑定、事件处理、网络请求、JSON 解析、前后端接口
对接方法。
5) 掌握微信小程序项目集成、调试工具使用、性能监测与性能优化
方法。
6) 掌握微信小程序后台部署、预览、上传、审核、发布上线全流程。
7) 了解 AI Coding 辅助开发理念、使用方法及技术伦理规范。
2. 能力目标
1) 能独立完成微信小程序静态页面搭建、样式编写与组件使用。
2) 能实现页面数据绑定、列表渲染、事件处理与页面跳转。
3) 能完成后端接口对接、JSON 数据解析与页面动态数据展示。
4) 能使用调试工具排查程序错误、监测性能并进行优化。
5) 能完成微信小程序项目集成、权限配置、体验版发布与正式上线。
6) 能借助 AI Coding 工具高效生成、修正、优化微信小程序代码。
3. 素养目标
1) 培养严谨规范、精益求精的软件开发职业素养。
2) 树立技术伦理、代码安全、质量可控的开发意识。
3) 提升需求分析、团队协作、问题定位与工程实践能力。
4) 养成持续迭代、用户至上、注重体验的产品思维。
(二)课程任务
以“成大通” 微信小程序为主线项目,完成从基础认知→需求设计→静态页
面→数据对接→项目集成→调试优化→发布上线→AI 辅助开发的全流程实战任
务,同时完成学分银行小程序、农产品电商平台小程序等拓展项目。
(三)基本要求
1. 严格遵循微信小程序官方开发规范与平台限制。
2. 按照软件工程流程完成需求分析、设计、编码、测试、部署各阶段产出
物。
3. 代码结构清晰、命名规范、注释完整、无功能性 Bug。
4. 能独立完成真机测试、性能调试、接口联调与问题修复。
5. 明确人机协作边界,开发者对代码质量、业务逻辑、安全规范负最终责
任。
6. 按时完成各项目授课任务,达到可演示、可验收、可上线标准。
二、课程的重点和难点
课程重点:
1. 微信小程序四大文件(WXML/WXSS/JS/JSON)作用与使用。
2. 静态页面实现:WXML 结构搭建与 WXSS 样式应用。
3. 数据驱动、数据绑定、列表渲染与事件绑定机制。
4. 网络请求、后端接口对接与 JSON 数据解析。
5. 微信小程序调试工具使用、性能监测与常见优化方法。
6. 微信小程序预览、上传、审核、发布上线完整流程。
7. AI Coding 辅助代码生成、错误反馈与高效开发方法。
课程难点:
1. 软件生命周期与微信小程序项目管理流程结合应用。
2. WXSS 选择器、样式优先级、Flex 布局理解与使用。
3. 数据驱动原理、异步请求处理与页面数据通信。
4. JSON 业务数据解析与微信小程序 JSON 配置文件的区别。
5. 真机调试、内存泄漏、性能瓶颈定位与优化。
6. 后台服务部署、域名配置、HTTPS 与线上环境兼容。
7. AI 代码纠错、需求边界控制、人机协作责任划分。
三、授课内容及要求
项目 1 微信小程序入门
授课内容:
1. 微信小程序的定义、特点、优势与应用场景。
2. 微信小程序与微信的依赖关系、生态定位。
3. 微信小程序与微信公众号的核心区别。
4. 主流微信小程序案例分析与调查报告撰写。
项目要求:
1. 能理解微信小程序“无需下载、即用即走”的特点。
2. 能进行微信小程序体验开发。
3. 能准确说明微信小程序与公众号在定位、功能、体验上的差异。
4. 能完成常见微信小程序对比分析,并撰写规范调查报告。
项目 2 微信小程序项目的分析与设计
授课内容:
1. 软件开发三大阶段:程序设计、软件设计、软件工程。
2. 软件生命周期六大阶段:可行性研究、需求分析、软件设计、编程、测
试、运行维护。
3. 微信小程序项目管理流程与团队权限分配。
4. 微信小程序需求分析、功能设计、UI 设计流程与方法。
项目要求:
1. 掌握软件生命周期各阶段任务与输出物。
2. 能完成微信小程序项目需求分析(业务、用户、功能)。
3. 能开展微信小程序功能结构设计与 UI 设计流程规划。
项目 3 微信小程序项目页面实现
授课内容:
1. 微信小程序项目结构:全局文件与页面文件组成。
2. WXML 语法:组件使用、页面结构、视图容器。
3. WXSS 语法:选择器、样式、尺寸、布局、样式导入。
4. WXML 与 WXSS 的关系及样式作用机制。
5. 常用组件的熟练使用:view、text、image、swiper、scroll-view 等。
项目要求:
1. 理解 WXML 负责结构、WXSS 负责样式的协作关系。
2. 掌握 WXSS 通过选择器作用于 WXML 组件的方法。
3. 能独立完成“成大通”微信小程序静态页面搭建与布局。
项目 4 微信小程序项目数据对接
授课内容:
1. 数据驱动原理与数据绑定语法{{}}。
2. 事件绑定、事件冒泡、事件捕获相关内容。
3. 发起网络请求,对接后端接口。
4. JSON 数据解析、处理与页面动态渲染。
5. 完成“成大通”微信小程序页面数据对接。
项目要求:
1. 掌握微信小程序与后端接口对接完整逻辑:请求→接收→解析→渲染。
2. 能区分 JSON 数据解析与 JSON 配置文件的用途与差异。
3. 能实现列表数据请求、绑定、展示及页面跳转传参。
项目 5 微信小程序项目集成与调试
授课内容:
1. 项目集成:代码整合、权限管理、版本管理、体验版发布。
2. 运营数据查看:管理后台与数据助手使用。
3. 调试工具的使用:真机调试、调试器、代码质量、FPS 面板、性能面板。
4. 性能调试:启动性能调试、运行性能调试等。
5. 性能优化:代码体积、setData、渲染、资源加载、页面切换优化等。
项目要求:
1. 掌握微信小程序项目集成包含的主要方面。
2. 能使用调试工具排查错误、分析内存与性能问题。
3. 能说出并实施微信小程序常用性能优化方法。
项目 6 微信小程序发布上线
授课内容:
1. 后台服务发布准备:服务器、网络、域名、HTTPS、环境部署等。
2. 微信小程序发布前检查、预览效果。
3. 微信小程序代码上传、提交审核、发布上线全流程。
4. 拓展项目:学分银行、农产品电商平台微信小程序发布。
5. 上线后运营反馈、迭代优化与精益求精理念。
项目要求:
1. 掌握微信小程序发布上线前必须完成的准备工作。
2. 能完整描述并实操发布流程:预览→上传→审核→发布。
3. 能完成后台服务部署与微信小程序正式上线。
项目 7 基于 AI Coding 的“成大通”微信小程序功能实现
授课内容:
1. AI Coding 概念、发展历程、优势与使用场景。
2. Trae 工具下载、安装、界面与开发模式使用。
3. 自然语言生成代码、错误反馈、优化修正。
4. 人机协作开发:开发者主导的关键环节。
项目要求:
1. 能借助 AI 工具完成微信小程序代码生成、调试与优化。
2. 能通过人机协作完成项目初始化、错误调试、资源管理等环节。
3. 能说明提供完整错误日志与需求边界对避免 AI 生成偏差的重要性。