微信基础开发及实战 15

《微信小程序开发》课程单元教学设计授课单元单元3：小程序开发技术基础（一）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.识记并说出微信开发者工具各主要功能区（编辑器、模拟器、调试器）的作用。

2.解释小程序标准项目目录结构中各文件夹（pages,utils,images等）和核心文件（app.js/json/wxss,project.config.json）的用途。

3.阐述技术选型（如使用WXML/WXSS代替传统HTML/CSS）对小程序的必要性与优势。1.能熟练使用微信开发者工具创建、导入、编译和预览小程序项目。

2.能根据项目结构规范，在“明德E医”和“云惠视听”项目中正确创建页面及资源文件夹。

3.能配置项目成员，体验团队协作开发的初始流程。1.培养规范、清晰的工程项目文件管理习惯。

2.树立团队协作意识，理解项目成员管理在协同开发中的重要性。

3.体会微信小程序技术选型背后的设计哲学（如跨平台、高性能），建立技术选型的初步思考能力。教学重难点教学重点1.微信开发者工具的基本操作与核心功能使用。

2.小程序标准项目目录结构的理解与创建。教学难点1.理解project.config.json项目配置文件的作用及各配置项含义。

2.从传统Web开发（HTML/CSS/JS）到小程序开发（WXML/WXSS/JS）技术选型思维的转变。教学策略教学组织采用“功能演示-动手操作-对比分析-团队协作”的组织流程，讲练结合。教学方法任务驱动法、演示教学法、对比学习法、小组协作法。教学准备环境准备1.已安装微信开发者工具的计算机。

2.已注册并获取AppID的微信小程序账号（个人或测试号）。资料准备1.《微信小程序开发项目实战教程》教材“项目2任务1”。

2.授课计划表“第3周”内容与作业要求。资源准备1.“明德E医”项目初始源码压缩包。

2.“云惠视听”项目原型图或需求文档。

3.微信官方文档《小程序框架》、《开发者工具界面与功能指南》。

4.对比表格：小程序技术栈（WXML/WXSS/JS）vs传统Web技术栈（HTML/CSS/JS）。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：观看教材配套的“开发者工具入门”慕课视频，并阅读微信官方《小程序框架》文档简介部分。

2.提出思考题：“为什么微信小程序不直接用HTML和CSS，而要发明WXML和WXSS？”1.在学习平台发布预习资源和引导性问题。

2.提醒学生检查开发环境是否就绪。1.观看视频，了解开发者工具界面。

2.阅读文档，尝试回答思考题，记录疑问。1.前置学习：利用配套慕课视频进行翻转课堂准备，提高课堂效率。[citation:教材文前.pdf]

2.启发思考：引导学生从“为什么”的角度思考技术设计，培养探究精神。课中研学环节一：情境导入与工具精讲(25分钟)

回顾上单元已完成的账号注册，提出：“有了账号和AppID，我们如何开始真正的编码工作？”引出本单元核心工具——微信开发者工具。

内容精讲1：开发者工具详解

系统介绍编辑器、模拟器、调试器、云开发控制台等核心面板的功能与使用技巧（如代码补全、实时预览、网络请求查看）。

内容精讲2：技术选型解析

对比讲解WXML与HTML、WXSS与CSS的异同，强调小程序技术栈为性能优化和跨平台一致性所做的设计（如组件化、rpx单位）。1.屏幕共享，逐一演示开发者工具各面板的核心操作。

2.通过对比表格，直观展示技术选型的差异，解释小程序设计初衷（更快的渲染、更一致的用户体验）。

3.素质引导：阐述规范的工具使用和清晰的技术认知是专业开发者高效工作的基础，是“工匠精神”在工具层面的体现。1.跟随教师讲解，在自己的开发者工具中尝试切换不同面板，熟悉界面。

2.理解技术选型背后的原因，思考“跨平台”和“高性能”对用户体验的意义。1.工具赋能：熟练掌握开发工具是提高后续编码效率的关键，本环节为实践扫清障碍。

2.突破难点：通过对比，帮助学生跨越从Web到小程序的认知门槛，理解技术架构的演进。

3.思政融入（工匠精神）：将规范使用工具、深入理解技术原理作为专业素养的一部分进行强调，培养严谨、求实的职业态度。环节二：核心实践——项目创建与结构解析(60分钟)

任务1：创建与导入项目

演示两种方式：①使用AppID创建全新的“明德E医”项目；②导入教师提供的“明德E医”初始源码包。重点讲解project.config.json中项目设置的含义。

任务2：解析与创建目录结构

结合导入的项目，讲解标准目录结构（app.js/json/wxss,pages,utils,images等），并指导学生为“云惠视听”项目手动创建相同的目录结构。

任务3：项目成员管理

演示如何在微信公众平台邀请他人成为项目成员（开发者、体验者等），并解释不同角色的权限。1.分步演示创建和导入项目，强调project.config.json中appid、projectname等关键配置项。

2.使用树状图分析项目结构，解释每个文件夹和文件的职责。

3.演示成员管理流程，强调团队开发中权限管理和沟通协作的重要性。

4.发布同步操作任务清单。1.在自己的电脑上，使用自己的AppID创建“明德E医”项目（或导入初始包）。

2.参照“明德E医”结构，为“云惠视听”项目手动创建pages、utils等目录和app.js/json/wxss文件。

3.与邻座同学组成临时小组，尝试互加为项目体验者。1.​“做中学”核心实践：通过亲手创建和解析项目，将抽象的结构概念具体化，形成深刻的肌肉记忆和项目认知。[citation:教材文前.pdf]

2.建立规范：从一开始就引导学生建立标准、清晰的项目文件管理习惯，这是企业级开发的基本要求。

3.培养协作意识：通过简单的成员管理操作，提前植入团队协作和版本管理的概念，对接“岗位能力”中的团队协作要求。环节三：知识巩固与问题排查(35分钟)

活动1：常见问题诊断

收集并演示创建项目中常见错误（如AppID错误、目录选择错误、编译失败等），引导学生使用调试器查看报错信息并解决。

活动2：“找不同”游戏

展示一个结构混乱的小程序项目目录，让学生找出其与标准结构的差异，并说明可能带来的问题。

活动3：技术选型讨论

简要讨论：小程序的技术选型（如自研渲染引擎）如何体现了腾讯作为中国科技企业的技术创新与生态建设能力？1.巡回指导，解决学生个性化问题，并收集共性问题进行集中演示解决。

2.组织“找不同”活动，对标准结构进行强化认知。

3.引导学生从技术自立、生态构建的角度讨论小程序技术栈的意义，肯定中国企业在移动互联网基础技术领域的贡献。1.根据错误提示，尝试自主排查和解决项目创建与编译中的问题。

2.积极参与“找不同”游戏，巩固对规范目录结构的理解。

3.参与讨论，理解技术选型不仅是技术问题，也关乎企业战略和产业生态。1.问题解决能力：培养学生面对报错时的自主排查能力，这是“问题排查能力”的初步训练。[citation:教材文前.pdf]

2.强化认知：通过趣味游戏，加深对规范重要性的理解。

3.思政融入（服务社会/职业素养）：将小程序技术栈的选择，上升到中国科技企业自主创新、构建服务亿级用户的技术底座的高度，激发学生的技术自信和行业认同感。课后拓展基础作业（来自授课计划）：创建“明德E医”与“云惠视听”两个项目，并配置项目成员。

拓展思考：调研并简述除微信小程序外，其他主流小程序平台（如支付宝、百度、字节跳动）在技术框架上有何异同？提供作业提交的截图要求（需显示项目列表及成员管理界面）。在学习平台分享相关调研资料链接。1.独立完成两个项目的创建和基础目录搭建，并邀请至少一位同学作为体验者。

2.进行拓展调研，形成简短报告。1.巩固技能：通过独立完成双项目创建，强化对开发工具和项目结构的熟练度。

2.拓展视野：引导学生了解行业全景，培养技术对比和趋势分析的能力，为未来技术选型打下基础。教学评价1.过程性评价：课堂实践任务的完成度与规范性；小组协作（互加体验者）的参与情况。

2.成果性评价：课后提交的两个项目创建截图及目录结构是否完整、规范。

3.素养评价：在“找不同”游戏和技术讨论中体现出的规范意识、问题解决能力和行业认知。反思诊改1.亮点：将工具使