微信小程序开发项目实战教程 全套教案 林世鑫 单元1-18：小程序开发准备（一）-课程总结与项目答辩

《微信小程序开发》课程单元教学设计授课单元单元1：小程序开发准备（一）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述小程序双线程（渲染层与逻辑层）技术架构与运行原理。

2.说明“明德E医”项目的开发背景、社会价值与核心业务需求。

3.识记小程序的基本业务架构与核心模块组成。1.能辨析小程序与原生App、H5应用的技术差异与适用场景。

2.能解读“明德E医”项目原型与需求文档，形成初步的项目认知。1.建立规范的技术学习路径与严谨的项目思维。

2.理解“互联网+医疗健康”政策导向，树立“技术服务于社会民生”的职业价值观。教学重难点教学重点1.小程序的技术架构与运行原理。

2.“明德E医”项目的业务需求与架构分析。教学难点双线程架构（渲染层、逻辑层）的抽象理解与通信机制。教学策略教学组织采用“案例导入-原理剖析-需求分析-总结归纳”的递进式组织方式。教学方法案例教学法、讲授法、图示法、小组讨论法。教学准备环境准备机房实训室、可流畅访问网络的计算机。资料准备1.《微信小程序开发项目实战教程》教材“项目1任务1”。

2.授课计划表“单元1”内容。

3.“明德E医”项目低保真原型图或功能列表。资源准备1.“小程序技术架构图”可视化PPT。

2.国家“互联网+医疗健康”发展规划等相关政策文件节选。

3.微信官方文档。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目1任务1，思考“轻应用”的特点。

2.推送资料：国家“互联网+医疗健康”相关政策新闻摘要。1.在学习平台发布任务和资料。

2.提出引导性问题：“小程序如何让就医更方便？”1.阅读教材与资料，记录疑问。

2.在线讨论区初步交流看法。1.激发兴趣：从政策与民生角度切入，建立学习意义感。

2.培养习惯：引导学生养成课前预习、自主探究的习惯。课中研学环节一：情境导入(20分钟)

展示“掌上医院”、“粤省事”等小程序案例，引出小程序“触手可及、用完即走”的特性。对比其与APP的优劣，提出核心问题：“小程序技术是如何支撑这些便捷服务的？”1.演示各类小程序案例，引导学生观察体验。

2.组织小组讨论，对比不同应用形态的优缺点。

3.总结归纳，引出本节课核心课题。1.扫码体验教师展示的小程序案例。

2.参与小组讨论，发表个人见解。

3.明确本节课的学习目标与核心问题。1.联系实际：从学生熟悉的场景导入，降低认知门槛。

2.启发思考：通过对比分析，培养学生辩证的技术选型思维。环节二：新知探究(40分钟)

内容1：小程序技术架构

详解双线程模型（渲染层-WebView，逻辑层-JSCore），通过架构图说明通信方式（Native、数据/事件）。

内容2：“明德E医”项目认知

介绍项目背景（便民就医）、核心价值与八大业务模块（用户、首页、挂号、缴费、报告等）。1.播放/绘制动态架构图，分步讲解双线程分工与通信流程。

2.类比“前台（UI）”与“后台（逻辑）”帮助学生理解。

3.展示“明德E医”项目原型，串讲各模块功能与用户旅程。1.观看图示，理解渲染层与逻辑层的分离设计。

2.根据教师讲解，尝试绘制简化的架构示意图。

3.查看原型，跟随讲解梳理项目业务流，明确模块关联。1.突破难点：将抽象架构可视化、拟人化，助力学生理解核心技术原理。

2.建立全景：在课程伊始即呈现完整项目蓝图，塑造“项目开发者”身份，明确学习路线图。

3.思政融入（服务社会）：结合“明德E医”项目，阐述技术如何解决“看病难”痛点，引导学生树立“用技术服务社会”的职业追求。环节三：任务深化与思政融入(30分钟)

任务：绘制“明德E医”业务架构图

引导学生以小组为单位，根据所学，绘制项目的业务模块关系图或技术架构简图。

思政融合点深入​：结合架构中的“安全控制”与“数据流转”，强调《网络安全法》与《个人信息保护法》在小程序开发中的基础性与强制性。1.布置小组协作任务，提供绘图工具（白板/纸笔/软件）。

2.巡回指导，解答学生在绘图过程中对业务逻辑的疑问。

3.重点强调​：在架构中必须体现“安全审核”、“用户授权”、“数据加密”等节点，讲解其法律与伦理重要性。1.小组协作，共同绘制业务或技术架构图，厘清模块关系。

2.在图中标注出涉及用户隐私和数据安全的关键环节。

3.小组代表准备简要分享。1.巩固应用：通过绘图任务，将接收的知识内化为结构化理解，培养系统思维。

2.思政融入（政策法规/职业素养）：将《网络安全法》等法规要求无缝嵌入技术架构分析中，使学生深刻认识到“合规开发是底线”，培养法律意识与职业道德。实现“技能传授”与“价值引领”同频共振。环节四：总结评价(30分钟)

1.邀请1-2个小组展示其绘制的架构图并讲解。

2.教师进行总结点评，重申小程序架构核心与项目全貌。

3.布置课后作业，并预告下周实践内容。1.组织小组展示，引导其他学生提问和评价。

2.教师总结本单元知识要点，强调架构思维和项目思维的重要性。

3.清晰说明课后作业要求。1.小组代表上台展示成果，阐述对项目与架构的理解。

2.参与互评，听取教师总结，查漏补缺。

3.记录课后任务及预习要求。1.检验成果：通过展示与互评，检验学习效果，锻炼表达与协作能力。

2.强化认知：“画一遍胜过听十遍”，总结环节再次巩固核心概念。

3.承前启后​：建立从“认知”到“实践”的预期，为下周环境搭建做好铺垫。课后拓展环节一：情境导入(20分钟)

展示“掌上医院”、“粤省事”等小程序案例，引出小程序“触手可及、用完即走”的特性。对比其与APP的优劣，提出核心问题：“小程序技术是如何支撑这些便捷服务的？”1.演示各类小程序案例，引导学生观察体验。

2.组织小组讨论，对比不同应用形态的优缺点。

3.总结归纳，引出本节课核心课题。1.扫码体验教师展示的小程序案例。

2.参与小组讨论，发表个人见解。

3.明确本节课的学习目标与核心问题。1.联系实际：从学生熟悉的场景导入，降低认知门槛。

2.启发思考：通过对比分析，培养学生辩证的技术选型思维。教学评价1.过程性评价：课堂小组讨论的参与度、架构图绘制的准确性与协作情况。

2.成果性评价：课后提交的业务架构图与需求理解报告的质量。

3.思政成效评价：学生在作业及讨论中体现出的对技术合规性、社会价值的认识程度。反思诊改1.亮点：案例导入贴近生活，双线程架构讲解采用可视化策略，有效降低了理解难度；思政点与业务架构分析自然融合，无说教感。

2.可能不足：学生对业务建模可能初次接触，部分小组绘图可能流于表面。

3.改进措施：可提前提供一个基础架构图模板（留白关键部分）给薄弱小组作为脚手架；下次课开始前，花5分钟对优秀作业进行快速展示点评。《微信小程序开发》课程单元教学设计授课单元单元2：小程序开发准备（二）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.列举小程序个人开发者与企业开发者的资质要求与区别。

2.陈述服务器域名配置的原理与注意事项。

3.阐述小程序开发过程中的主要安全机制。1.能独立完成个人小程序账号的注册与开发者工具的安装配置。

2.能根据项目需求，正确配置小程序的服务器域名信息。1.树立规范操作、安全第一的开发意识与职业习惯。

2.强化遵守《网络安全法》等法规的法治观念，培养负责任的技术开发者角色认知。教学重难点教学重点1.小程序开发账号的注册流程与开发者工具的基本使用。

2.小程序服务器域名的配置方法与规范要求。教学难点1.理解SSL证书、备案等安全资质要求背后的技术逻辑与法律依据。

2.域名配置中常见错误（如协议错误、未备案）的分析与解决。教学策略教学组织采用“要点精讲—同步操作—问题诊断—小组互查”的组织形式。教学方法任务驱动教学法、演示操作法、案例分析法。教学准备环境准备1.可流畅访问互联网的多媒体机房。

2.学生需准备个人手机号（用于注册账号）。资料准备1.《微信小程序开发项目实战教程》教材“项目1任务2”。

2.授课计划表“第2周”内容与作业要求。资源准备1.提前录制的“开发者工具安装与配置”微课视频。

2.微信公众平台、微信开发者工具官方网站链接。

3.《中华人民共和国网络安全法》相关条款解读资料。

4.“明德E医”与“云惠视听”两个项目的初始域名配置清单。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目1任务2，并思考“个人与企业的AppID在使用上有何不同？”

2.分享资料：《中华人民共和国网络安全法》中关于网络运营者责任与用户信息保护的条款节选。1.在学习平台发布资源与引导问题。

2.提醒学生准备好用于账号注册的个人邮箱或手机号。1.阅读教材和法规条款，了解开发前的法定要求。

2.记录预习中的疑问。1.建立合规意识​：将国家法规前置，让学生在动手前先明确法律红线，培养“依法开发”的职业底线思维。

2.激发探究​：通过对比问题，引导学生关注不同开发主体的权限差异，为后续项目权限管理铺垫。课中研学环节一：情境导入与要点精讲(25分钟)

回顾上周知识，提出核心问题：“我们理解了小程序的架构和项目蓝图，如何才能亲手开始构建它？”引出环境搭建主题。

内容精讲1：开发资质与账号注册

讲解个人/企业开发者区别、AppID的重要性及获取方式。

内容精讲2：核心安全机制

结合教材讲解域名白名单、HTTPS（SSL证书）、接口鉴权等安全机制的必要性。1.通过提问互动，引导学生从认知转向行动。

2.利用流程图展示注册全流程，强调信息填写的准确性。

3.重点结合《网络安全法》​​，讲解为何小程序强制要求HTTPS、为何需要备案，强调这是法律对数据安全和用户隐私保护的基本要求，而非单纯的技术限制。1.跟随教师思路，明确本单元的学习目标是“动起手来”。

2.理解AppID是项目的唯一标识。

3.思考并讨论：如果开发不规范（如用HTTP），可能带来哪些法律和业务风险？1.承前启后​：建立知识连贯性，明确理论到实践的转化路径。

2.突破难点​：将抽象的“安全机制”与具体的“法律要求”、“用户权益”挂钩，降低理解门槛，强化记忆。[citation:教材文前.pdf]

3.价值引领（政策法规）​​：将国家安全观和法治意识无痕融入技术讲解，使学生深刻理解“安全开发是责任，不是选项”。环节二：演示操作与实践任务(60分钟)

任务1：账号注册与工具安装

教师分步演示：访问微信公众平台、注册个人小程序账号、获取AppID、下载并安装开发者工具、使用AppID创建新项目。

任务2：服务器域名配置

演示“明德E医”项目所需的request合法域名配置，讲解配置项的格式和要求。强调仅支持HTTPS且需已备案的域名。1.屏幕共享，同步演示操作步骤，对关键选择点（如服务类目）进行解释。

2.演示过程中，实时模拟常见错误操作（如输错AppID、配置未备案的域名），并展示错误提示，讲解排查方法。

3.发布同步操作任务清单，要求学生跟随操作。1.同步操作，在自己的电脑上完成个人账号注册、获取AppID、安装开发者工具。

2.根据“明德E医”的配置清单，在开发者工具的“详情”-“本地设置”中勾选“不校验合法域名…”，并在项目配置中填写演示用域名（前期可使用测试域名）。

3.记录操作中遇到的困难。1.做中学​：通过“教师演示-学生模仿”的模式，将教材文字转化为可执行的步骤，快速掌握核心操作技能，契合高职学生认知特点。[citation:教材文前.pdf]

2.问题预演​：通过主动演示错误，培养学生的问题意识和排查能力，这是重要的“岗位能力”。

3.规范养成​：严格按照官方流程操作，培养学生严谨、规范的工作习惯。环节三：问题诊断与能力巩固(35分钟)

活动1：典型问题诊断

收集学生在操作中遇到的普遍问题（如开发者工具无法登录、真机预览失败等），进行集中讲解和现场解决。

活动2：小组互查与强化训练

要求学生两人一组，互相检查对方的开发者工具项目配置（特别是AppID和域名配置）是否正确。随后，引导学有余力的学生开始尝试为“云惠视听”项目创建并配置。1.巡回指导，即时解决学生个性化问题，并收集共性问题。

2.组织小组互查，强调协作的重要性。

3.对提前完成基础任务的学生，提供“云惠视听”项目的配置说明，进行差异化指导。1.提出自己遇到的技术问题，听取教师解答，并尝试自行解决。

2.与同伴互相检查配置，解释自己的配置思路，巩固理解。

3.能力较强的学生，尝试独立为“云惠视听”项目完成创建和基础配置。1.精准帮扶​：及时解决实操中的“拦路虎”，确保每位学生都能跟上进度，建立学习信心。

2.协作与表达​：通过互查，锻炼学生的沟通表达能力和代码/配置审查能力，这是“团队协作能力”的初步体现。[citation:教材文前.pdf]

3.分层教学​：践行教材“示范—巩固—提升”的三级训练体系，让不同基础的学生都能获得成长。[citation:教材文前.pdf]课后拓展基础作业：完成“明德E医”和“云惠视听”两个小程序的账号注册与基本域名配置。

拓展任务：自行查找并阅读一篇关于“SSL证书工作原理”或“ICP备案流程”的技术文章，在课程平台分享你的理解。提供作业提交的详细标准（如截图要求）。在学习平台分享拓展阅读推荐链接。1.独立完成两个项目的环境准备工作，提交关键步骤截图（如已登录的开发者工具界面、已配置的域名列表）。

2.完成拓展阅读，并简要分享，深化对安全底层机制的理解。1.巩固技能：通过独立完成双项目配置，强化对核心操作流程的记忆和熟练度。

2.延伸学习：引导学生超越操作手册，理解技术背后的原理和行业规范，培养自主学习能力。教学评价1.过程性评价：课堂同步操作的完成度与准确性；小组互查活动的参与度与有效性。

2.成果性评价：课后提交的两个项目的环境配置截图是否规范、完整。

3.思政与素养评价：在操作和讨论中，是否体现出对网络安全规范的重视与遵守意识。反思诊改1.亮点：将安全机制与法律法规紧密结合讲解，解决了“为什么要这样做”的疑惑，增强了教学的深度和说服力；采用“演示-模仿-互查”的流程，确保了实操环节的高效和扎实。

2.可能不足：域名备案等环节无法在课堂实时操作，部分学生可能理解不深。

3.改进措施：考虑在后续讲解网络请求（wx.request）时，再次结合已配置的域名进行回顾和强化；可录制一个“域名备案流程简介”的短视频，供感兴趣的学生课外观看。《微信小程序开发》课程单元教学设计授课单元单元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.亮点：将工具使用、项目结构、技术选型与团队协作多个目标有机融合；通过“找不同”游戏等互动形式，使枯燥的结构知识变得生动。

2.可能不足：project.config.json配置项较多，部分学生可能感到畏难。

3.改进措施：将核心配置项（如appid,projectname）与可选配置项分开讲解，强调“必须掌握”与“了解即可”的区别；可提供一份配置项注释文档作为课后参考资料。《微信小程序开发》课程单元教学设计授课单元单元4：小程序开发技术基础（二）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述小程序主体文件（app.js、app.json、app.wxss）的各自功能及其协同作用。

2.解释页面文件（page.js、page.json、page.wxss、page.wxml）的组成结构与关联。

3.识记并说明app.json中关键全局配置项（window、tabBar、pages等）的作用与配置方法。1.能正确创建并配置小程序的全局外观（导航栏、背景色、标题等）。

2.能独立完成页面的创建，并进行基础的页面级配置。

3.能运用WXSS进行简单的全局和页面样式设置。1.培养系统化配置思维和界面审美意识，理解全局规划在项目开发中的重要性。

2.通过配置练习，养成严谨、细致的编码习惯。教学重难点教学重点1.app.json文件中window、pages等核心配置项的用法。

2.页面“四件套”（js,json,wxml,wxss）文件的创建与关联。教学难点1.理解全局样式（app.wxss）与页面样式（page.wxss）的作用域与优先级关系。

2.页面json配置与全局json配置的继承与覆盖关系。教学策略教学组织采用“原理剖析-对比演示-同步配置-迁移练习”的组织流程，强调动手实践。教学方法任务驱动法、对比教学法、讲练结合法。教学准备环境准备已安装微信开发者工具的计算机，已创建好的“明德E医”与“云惠视听”项目。资料准备1.《微信小程序开发项目实战教程》教材“项目2任务2”。

2.授课计划表“第4周”内容与作业要求。资源准备1.“明德E医”项目已配置好的app.json示例文件。

2.“云惠视听”项目需求文档中关于主题色的说明。

3.补充阅读资料：《全局配置与页面配置参数详解》、《WXML与WXSS基础》。

4.配色方案参考网站或工具。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目2任务2，并观看配套慕课视频中关于“全局配置”的部分。

2.提出思考题：“为什么小程序要将配置、逻辑、样式、结构分开成不同文件？这和传统的网页开发（HTML/CSS/JS混编）相比有何优势？”1.在学习平台发布预习资源和引导性问题。

2.提醒学生检查上节课创建的项目是否可用。1.观看视频，了解主体文件的作用。

2.思考并尝试回答提问，记录疑问。1.知识前置：利用慕课视频进行翻转课堂准备，提高课堂效率。[citation:教材文前.pdf]

2.激发思考：引导学生从工程化和可维护性角度思考技术设计，培养架构思维。课中研学环节一：框架回顾与主体文件精讲(25分钟)

回顾上单元项目结构，提问：“我们创建了项目和页面文件夹，但如何定义整个小程序的‘外貌’和行为？”引出主体文件。

内容精讲1：三大主体文件

详解：

-app.js：应用逻辑入口，全局数据与方法。

-app.json：应用全局配置（窗口、页面路径、tabBar、网络超时等），是“总设计师”。

-app.wxss：全局公共样式，是“品牌视觉规范”。

内容精讲2：页面文件结构

讲解页面“四件套”的协作关系：page.js（逻辑）、page.json（页面配置）、page.wxml（结构）、page.wxss（样式）。1.使用树状图展示项目结构，高亮主体文件位置。

2.对比讲解app.js与普通page.js的区别（如onLaunch）。

3.使用比喻（如“总设计师”、“品牌规范”）帮助学生记忆各文件角色。

4.素养引导：强调清晰的文件分工和规范的配置是构建稳定、易维护项目的基础，体现“工匠精神”中的条理性和规划性。1.跟随讲解，在自己的项目中找到并打开三大主体文件。

2.理解各文件的定位，记录其核心作用。

3.思考并讨论：分开设计的好处是什么？1.建立系统认知：明确全局与局部的关系，理解小程序框架的模块化设计思想。

2.突破难点：通过生动的比喻，将抽象的文件分工具体化，降低理解难度。[citation:教材文前.pdf]

3.思政融入（工匠精神）：将规范的文件管理和配置视为专业开发者必备的严谨、有序的职业素养。环节二：核心实践——全局配置与页面创建(60分钟)

任务1：配置“明德E医”全局窗口样式

演示并带领学生修改app.json中的window配置项：设置导航栏标题文本、背景色、前景色（标题颜色）。

任务2：创建并配置新页面

演示在app.json的pages数组中新增页面路径，自动生成页面文件四件套。随后讲解并修改新页面对应的page.json，覆盖全局的窗口样式（如设置不同的导航栏标题）。

任务3：应用全局与页面样式

演示在app.wxss中定义全局样式（如主题色.primary-color），在page.wxss中定义页面特有样式，并在page.wxml中应用。讲解样式优先级。1.屏幕共享，演示修改app.json的window字段，并实时预览效果变化。

2.演示新增页面，强调路径格式，并展示page.json如何覆盖全局配置。

3.演示WXSS的编写与应用，通过修改颜色值直观展示样式作用。

4.发布同步操作任务清单。1.修改自己的“明德E医”项目，将导航栏背景色设置为医疗主题色（如蓝色），标题设置为“明德E医”。

2.在pages数组中新增一个“我的”页面，并修改其page.json，将导航栏标题设置为“个人中心”。

3.在app.wxss中定义一个全局字体样式，并在新创建的页面中使用。1.“做中学”核心实践：通过亲手修改配置和创建页面，深刻理解配置文件对小程序外观的控制力，掌握核心技能。

2.理解继承与覆盖：通过page.json覆盖全局配置的实践，理解配置的层级关系，这是灵活定制页面的关键。[citation:教材文前.pdf]

3.培养审美与规范：通过设置主题色，引导学生关注产品的视觉统一性，这是前端开发者和UI设计师都需要具备的素养。环节三：知识巩固与迁移应用(35分钟)

活动1：常见配置问题诊断

收集并演示配置中常见错误（如pages路径错误、json格式错误、样式未生效等），引导学生使用开发者工具的控制台和编译提示排查。

活动2：迁移配置至“云惠视听”​

要求学生根据“云惠视听”的文化娱乐项目定位，为其设计并配置一套符合其风格的全局窗口样式（导航栏颜色、标题等）。

活动3：样式优先级探究

提出一个小案例：同一个元素，在app.wxss、page.wxss、inlinestyle中都有颜色定义，最终显示哪个？引导学生通过微型实验得出结论。1.巡回指导，解决学生个性化问题，并收集共性问题进行集中演示解决。

2.提供色彩搭配参考，引导学生思考不同产品（医疗vs文娱）的风格差异。

3.组织学生进行微型实验，验证样式优先级（page.wxss>app.wxss>默认）。1.根据错误提示，尝试自主排查配置问题。

2.独立为“云惠视听”项目配置一套风格鲜明的全局窗口样式（如橙色系）。

3.动手编写简单代码，验证样式优先级规则。1.问题解决能力：培养学生根据错误信息自主排查配置问题的能力。[citation:教材文前.pdf]

2.能力迁移与创新：践行教材“示范—巩固—提升”的训练体系，将“明德E医”所学技能迁移到“云惠视听”，并鼓励创新设计。[citation:教材文前.pdf]

3.探究学习：通过实验验证理论，加深对样式系统工作原理的理解，培养科学探究精神。课后拓展基础作业（来自授课计划）：配置“明德E医”与“云惠视听”两个项目的窗口样式（导航栏颜色、标题等）。

拓展思考：阅读提供的《全局配置与页面配置参数详解》资料，总结出至少3个本单元未讲解但你认为有用的配置项，并说明其可能的应用场景。提供作业提交的截图要求（需显示两个项目不同风格的导航栏效果）。在学习平台分享拓展阅读资料。1.独立完成两个项目的窗口样式配置，确保风格与项目定位相符。

2.完成拓展阅读，整理笔记并分享。1.巩固技能：通过独立完成双项目配置，强化对全局配置的熟练度和应用能力。

2.自主学习与拓展：深入研读官方文档，培养自主查阅资料、探索未知知识的能力，对接“岗位能力”中的自主学习要求。教学评价1.过程性评价：课堂同步配置任务的完成度与准确性；迁移配置任务的设计合理性。

2.成果性评价：课后提交的两个项目配置截图是否符合项目风格要求，导航栏配置是否正确生效。

3.素养评价：在样式优先级探究和拓展阅读中体现出的探究精神与自主学习能力。反思诊改1.亮点：将枯燥的配置文件讲解转化为可直观预览的视觉配置，激发学生兴趣；通过“医疗”与“文娱”项目的风格对比，强化了配置服务于产品定位的意识。

2.可能不足：WXSS的样式优先级规则（如!important、选择器权重）对于初学者可能稍显复杂。

3.改进措施：本单元仅讲解基础优先级，更复杂的CSS权重规则可留待后续具体UI组件开发时结合实例再深入讲解；可提供一个样式优先级速查表作为课后参考资料。《微信小程序开发》课程单元教学设计授课单元单元5：小程序开发技术基础（三）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.解释MVVM（Model-View-ViewModel）模式的基本原理及其在小程序中的体现。

2.陈述小程序中数据绑定（单向、双向）和事件绑定的语法与工作流程。

3.列举常用的WXML语法（如数据绑定{{}}、事件绑定bind.../catch...）及基础WXSS属性。1.能运用MVVM思想，将界面与数据进行关联，实现简单的数据驱动UI更新。

2.能独立完成页面创建，并实现数据绑定与事件处理（如按钮点击、输入框输入）。

3.能通过WXML和WXSS构建基础的静态页面布局与样式。1.培养数据驱动UI的编程思维模式，理解“关注点分离”的设计原则。

2.通过“祝君健康”实验，树立关注健康、服务民生的意识。教学重难点教学重点1.MVVM模式的核心概念（数据绑定、事件绑定）。

2.{{}}数据绑定语法和bindtap等事件绑定语法的使用。教学难点1.理解ViewModel（页面js中的data和函数）如何充当Model和View之间的桥梁。

2.事件对象（event）的获取与使用，特别是通过data-*属性传递自定义数据。教学策略教学组织采用“原理剖析-案例演示-分步模仿-综合实验”的组织流程，层层递进。教学方法案例教学法、任务驱动法、讲练结合法。教学准备环境准备已安装微信开发者工具的计算机，可运行的小程序项目。资料准备1.《微信小程序开发项目实战教程》教材“项目2任务3前部”（MVVM与数据绑定部分）。

2.授课计划表“第5周”内容与作业要求。资源准备1.“祝君健康”小实验的需求描述与最终效果图（显示收缩压/舒张压/心率，可模拟更新）。

2.辅助理解MVVM的动画或示意图。

3.补充阅读资料：《MVVM模式与小程序框架》、《数据绑定与事件系统》。

4.典型错误案例集（如数据绑定格式错误、事件函数未定义等）。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目2任务3中关于MVVM和数据绑定的部分，观看配套慕课视频。

2.提出思考题：“为什么现代前端框架（如小程序）普遍采用数据绑定的模式？相比直接用JS操作DOM（网页元素）有何优势？”1.在学习平台发布预习资源和引导性问题。

2.提供“祝君健康”实验的初步构思。1.观看视频，初步了解数据绑定与事件。

2.思考并尝试回答提问，对比两种开发模式的差异。1.知识前置：利用慕课视频进行翻转课堂准备，聚焦核心概念。[citation:教材文前.pdf]

2.启发思考：引导学生从开发效率和维护性角度理解技术演进，培养框架思维。课中研学环节一：核心原理剖析——MVVM模式(25分钟)

回顾前几周内容，提问：“我们已经会配置和创建页面了，但如何让页面‘动’起来，响应用户操作？”引出MVVM模式。

内容精讲1：MVVM三要素

结合示意图讲解：

-Model：数据层（页面.js中的data对象）。

-View：视图层（.wxml模板）。

-ViewModel：桥梁（页面.js中管理数据和业务逻辑的部分）。

内容精讲2：数据驱动

强调核心思想：当Model（data）变化时，View会自动更新。1.使用动态示意图或比喻（如“数据是水源，视图是水龙头显示的水流”）来阐释MVVM的数据流动。

2.对比传统JS操作DOM与小程序数据绑定的代码量，直观展示MVVM的效率优势。

3.素养引导：阐述清晰的架构模式是构建复杂应用的基础，理解并运用好MVVM是“代码编写能力”的重要组成部分，体现工匠精神中的系统性思维。1.跟随讲解，理解Model、View、ViewModel各自的职责和协作关系。

2.在草稿纸上尝试画出MVVM数据流向简图。

3.思考：这种模式对团队协作开发有何好处？1.建立核心思维：深入理解MVVM这一现代前端开发的基石，为后续所有开发奠定正确的思维方式。

2.突破难点：通过可视化手段，将抽象的架构模式具体化，降低理解门槛。[citation:教材文前.pdf]

3.思政融入（工匠精神）​：将采用科学、高效的开发模式视为专业开发者必备的素养，是追求代码质量和开发效率的体现。环节二：核心实践——数据绑定与事件绑定(60分钟)

任务1：基础数据绑定与更新

演示在页面js的data中定义变量（如message:‘Hello’），在wxml中使用{{message}}显示。然后演示在js中通过this.setData({message:‘World’})更新数据，观察视图自动变化。

任务2：事件绑定与处理

演示在wxml中为按钮添加bindtap=“changeMessage”，在js中定义changeMessage函数，在函数内使用this.setData修改数据。

任务3：事件对象与数据传递

演示如何通过data-*属性（如data-index=“1”）在事件中传递自定义数据，并在事件处理函数中通过event.currentTarget.dataset.index获取。1.屏幕共享，编写简单示例，分步演示并讲解每一步的代码和效果。

2.实时演示this.setData的正确使用方法，强调其是更新视图的唯一途径。

3.演示如何从事件对象event中获取点击位置、组件信息等。

4.发布同步操作任务清单，要求学生创建一个新页面实践上述三点。1.跟随操作，在自己的项目中创建一个“实验页”。

2.实现：定义一个count变量并显示在页面上；创建一个按钮，点击后count增加1。

3.尝试为多个按钮设置不同的data-id，点击后在事件函数中打印出不同的id。1.​“做中学”核心实践：通过亲手编写数据绑定和事件处理的代码，将MVVM理论转化为实实在在的交互能力，这是小程序开发的基石。[citation:教材文前.pdf]

2.掌握核心API：熟练掌握this.setData和事件绑定语法，是解决大部分动态交互问题的关键。

3.理解数据流：通过data-*传参的练习，深入理解事件触发时数据是如何在视图和逻辑层间传递的。环节三：综合应用与问题诊断(35分钟)

活动1：“祝君健康”实验引导

分析“祝君健康”实验需求：页面显示血压（收缩压、舒张压）和心率数据，提供按钮可模拟“更新测量”功能。

引导学生设计data数据结构，并规划事件处理函数。

活动2：典型问题诊断

展示并分析常见错误：

1.数据绑定中双大括号{{}}遗漏或写错。

2.事件处理函数在js中未定义或拼写错误。

3.在事件函数中直接修改data属性（如this.data.count=1）而忘记使用this.setData。

活动3：初步实现与演示

指导学生开始动手实现“祝君健康”实验的基础框架。1.带领学生分析实验，确定Model（data中应有systolic,diastolic,heartRate等字段）。

2.将常见错误代码投屏，引导学生使用开发者工具的控制台报错信息进行诊断和修正。

3.巡回指导，解决学生在初步实现中遇到的具体问题，鼓励学生发挥创意美化界面。1.根据教师引导，规划自己的实验页面数据结构。

2.针对教师展示的错误案例，尝试指出错误原因并提出修改方案。

3.开始编写“祝君健康”实验的代码，实现数据展示和按钮点击更新功能。1.项目思维引导：将所学知识立即应用于一个完整的微型项目（实验），完成从知识点到解决问题能力的初步转化，践行“做中学”。

2.问题排查能力训练：通过诊断预设错误，培养学生阅读报错信息、定位和解决代码问题的能力，这是“问题排查能力”的核心。[citation:教材文前.pdf]

3.激发成就感：在课堂内完成实验的核心功能，让学生获得即时正向反馈，增强学习信心。课后拓展基础作业（来自授课计划）​：完成“祝君健康”小实验（血压值显示），要求实现数据展示和模拟更新功能。

拓展思考：阅读提供的《MVVM模式与小程序框架》资料，思考并回答：小程序框架是如何实现数据变更检测并自动更新视图的？这种机制带来了什么优势和潜在需要注意的地方？提供作业提交的详细标准（功能完整、代码规范）。在学习平台分享拓展阅读资料。1.完善并提交“祝君健康”实验代码，确保功能完整、界面清晰。

2.完成拓展阅读，整理笔记并回答思考题。1.巩固与深化：通过独立完成实验，巩固对MVVM、数据绑定、事件处理的核心技能掌握。

2.探究原理：引导学生不仅满足于“会用”，还要探究框架背后的工作原理，培养深度学习和批判性思维。教学评价1.过程性评价：课堂同步实践任务的完成度与代码质量；对典型错误案例的诊断与修正表现。

2.成果性评价：课后提交的“祝君健康”实验代码是否实现核心功能，代码结构是否清晰。

3.素养评价：在实验设计和问题诊断中体现出的逻辑思维、问题解决能力和探究精神。反思诊改1.亮点：通过“祝君健康”这一贴近生活的实验主题，将技术学习与健康意识自然结合，增加了学习的意义感；将MVVM抽象原理与具体代码实践紧密结合，有效降低了学习难度。

2.可能不足：部分学生对this的指向和setData的异步性可能感到困惑。

3.改进措施：对this指向问题，可通过固定代码模式（如在onLoad中使用constthat=this）进行简化教学；setData的异步性可暂不深入，留待后续学习setData回调或async/await时再行讲解。《微信小程序开发》课程单元教学设计授课单元单元6：小程序开发技术基础（四）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述小程序页面生命周期函数的执行顺序与触发时机（onLoad、onShow、onReady、onHide、onUnload）。

2.解释this.setData的异步特性及其对数据更新时机的影响。

3.区分不同路由接口（wx.navigateTo、wx.redirectTo、wx.navigateBack）的功能与页面栈操作差异。1.能根据业务需求，在合适的生命周期函数中编写初始化代码、发起网络请求或执行页面隐藏/卸载逻辑。

2.能利用this.setData的回调函数或Promise化处理保证数据更新后的操作顺序。

3.能合理选择并使用不同路由接口实现页面间的灵活跳转与返回。1.建立严谨的时序思维，理解程序执行的生命周期概念，培养按需执行逻辑的优化意识。

2.通过“健康评分”实验，强化健康数据分析与自我健康管理的理念。教学重难点教学重点1.页面生命周期各阶段函数的理解与应用场景。

2.wx.navigateTo与wx.redirectTo在页面栈管理上的核心区别。教学难点1.理解this.setData的异步性，并掌握在数据更新后安全执行后续逻辑的方法。

2.页面栈的抽象概念及其在不同路由操作下的动态变化。教学策略教学组织采用“原理剖析-流程推演-实验验证-项目应用”的递进式组织方式，强化逻辑理解与实践应用。教学方法案例教学法、流程图解法、对比分析法、任务驱动法。教学准备环境准备已安装微信开发者工具的计算机，可运行的小程序项目。资料准备1.《微信小程序开发项目实战教程》教材“项目2任务3后部”（页面生命周期与路由部分）。

2.授课计划表“第6周”内容与作业要求。资源准备1.“健康评分”实验需求说明（输入身高、体重、血压等，计算并展示健康评分）。

2.“生命周期体验”实验页面模板（在每个生命周期函数中打印日志）。

3.页面生命周期函数执行顺序的时序动画或流程图。

4.页面栈的可视化演示工具或示意图。

5.补充阅读资料：《页面生命周期详解》、《路由与页面栈管理》。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目2任务3后部关于页面生命周期和路由的部分，观看配套慕课视频。

2.提出思考题：“为什么小程序要有页面生命周期的概念？这和我们日常开发中（如打开、关闭页面）的直觉有什么关联？”1.在学习平台发布预习资源和引导性问题。

2.提供“健康评分”实验的初步构思和数据公式。1.观看视频，了解生命周期函数和路由API。

2.思考生命周期概念的必要性，并与日常应用体验相联系。1.知识前置:利用慕课视频进行翻转课堂准备，聚焦核心概念。[citation:教材文前.pdf]

2.建立联系:引导学生将抽象技术概念与用户实际体验联系起来，理解技术服务于体验的本质。课中研学环节一：核心原理剖析——页面生命周期(40分钟)

回顾上单元MVVM，提问：“数据和视图会‘动’了，但页面自身从‘诞生’到‘消亡’的过程是怎样的？”引出生命周期。

内容精讲1：生命周期函数详解

结合时序图详细讲解：

-onLoad：页面加载，接收参数，适合数据初始化。

-onShow：页面显示（前后台切换），适合数据刷新。

-onReady：页面初次渲染完成，适合操作组件。

-onHide：页面隐藏，适合清理定时器等。

-onUnload：页面卸载，适合清理全局资源。

内容精讲2：this.setData的异步性

讲解this.setData后，视图更新是异步进行的。演示如何在回调函数或使用Promise化（wx.nextTick）保证后续逻辑在更新后执行。1.使用动态时序图或“人生阶段”比喻（出生、成长、工作、退休、离世）来生动阐释各生命周期阶段。

2.编写简单代码，演示在onLoad中发起请求，在onReady中操作组件，展示差异。

3.通过代码示例，对比直接console.log更新后的数据和在其回调中console.log的差异，强调异步性。

4.素养引导:阐述理解生命周期是编写健壮、高性能代码的基础，体现了“工匠精神”中对程序运行细节的精准把控。1.跟随讲解，在自己的项目中的测试页面内，为每个生命周期函数添加console.log语句，并观察开发者工具控制台的打印顺序。

2.理解onLoad和onShow的区别，思考在“健康评分”实验中，数据初始化应放在哪个函数。

3.练习使用this.setData的回调函数，确保数据更新后再进行下一步操作。1.建立时序思维:深刻理解页面生命周期的顺序和时机，为编写正确的初始化、更新和清理逻辑奠定基础。

2.突破难点:通过直观的日志打印和比喻，将抽象的生命周期概念具体化，降低理解难度。[citation:教材文前.pdf]

3.思政融入（工匠精神）:将精准控制代码执行时机、避免资源泄漏视为专业开发者必备的严谨态度和责任感。环节二：核心实践——路由接口与页面栈管理(50分钟)

任务1：路由接口对比与应用

演示并对比：

-wx.navigateTo：保留当前页，跳转新页（页面栈压入）。

-wx.redirectTo：关闭当前页，跳转新页（页面栈替换）。

-wx.navigateBack：返回上一页（页面栈弹出）。

任务2：页面栈可视化理解

使用白板或动画演示不同路由操作下页面栈的压入、替换、弹出过程。

任务3：实验应用

引导学生设计“生命周期体验”实验：创建一个包含多个页面的小程序，通过不同按钮触发不同路由，并在控制台观察各页面生命周期的触发情况。1.编写简单的多页面示例，分步演示三种路由方式，并使用开发者工具查看页面栈变化。

2.在白板上绘制页面栈示意图，动态模拟路由操作，让学生直观理解“栈”的概念。

3.布置“生命周期体验”实验任务，指导学生创建页面并添加日志。

4.发布同步操作任务清单。1.跟随操作，创建A、B、C三个页面。

2.在A页面添加按钮，分别用navigateTo跳B，用redirectTo跳C，观察B/C页面onLoad/onShow触发差异及返回行为。

3.完成“生命周期体验”实验基础部分，记录并分析日志。1.掌握核心交互:路由是构建多页面应用的核心，熟练掌握三种跳转方式是“代码编写能力”的关键体现。[citation:教材文前.pdf]

2.抽象概念具象化:将抽象的“页面栈”概念通过可视化和亲手操作变得易于理解，解决教学难点。

3.探究学习:通过实验主动探究不同路由对生命周期的影响，深化理解，培养主动学习能力。环节三：综合应用与问题诊断(30分钟)

活动1：“健康评分”实验引导与实现

分析实验需求：创建一个页面，包含表单输入（身高、体重等），点击按钮后根据公式计算健康评分，并展示结果。引导学生思考：

1.数据初始化放在哪个生命周期？

2.表单数据和计算结果如何用setData管理？

3.结果页面是否需要路由跳转？

活动2：常见问题诊断

展示并分析典型错误：

1.在onReady之前操作组件导致报错。

2.误用redirectTo导致无法返回上一页。

3.在setData后立即依赖新数据做计算导致错误。

活动3：实验初步实现与演示：指导学生开始动手实现“健康评分”实验。1.带领学生分析“健康评分”实验的业务逻辑和技术要点，确定合适的生命周期和路由方案。

2.将预设的错误代码投屏，引导学生利用控制台报错和生命周期日志进行诊断和修正。

3.巡回指导，解决学生在实验实现中遇到的具体问题，鼓励优化界面和交互。1.规划“健康评分”实验的页面结构、数据模型和计算逻辑。

2.针对教师展示的错误案例，尝试指出错误原因并提出修改方案。

3.开始编写“健康评分”实验的代码，实现数据输入、计算和展示功能。1.综合能力训练:将生命周期、数据绑定、事件处理和路由知识综合应用于一个完整的实验项目，实现知识点的串联和综合运用，践行“做中学”。[citation:教材文前.pdf]

2.问题排查能力深化:通过诊断复杂错误（涉及生命周期时序），进一步提升学生阅读报错、定位问题的能力。[citation:教材文前.pdf]

3.思政融入（服务社会）:通过“健康评分”主题，引导学生关注个人健康，思考如何利用技术开发工具促进健康管理，体现技术的人文关怀。课后拓展基础作业（来自授课计划）:完成“健康评分”与“生命周期体验”两个实验。

拓展思考:阅读提供的《页面生命周期详解》资料，思考：如果一个页面需要频繁显示和隐藏（如tab页），在onShow和onHide中分别应该做什么样的优化处理？提供作业提交的详细标准（功能完整、日志清晰）。在学习平台分享拓展阅读资料。1.完善并提交两个实验的代码，确保“健康评分”计算准确，“生命周期体验”日志完整。

2.完成拓展阅读，整理笔记并尝试回答思考题。1.巩固与深化:通过独立完成两个实验，巩固对页面生命周期、路由和setData异步性的核心技能掌握。

2.性能优化意识:引导学生思考性能优化策略，培养编写高效代码的意识，对接“岗位能力”中的优化能力。教学评价1.过程性评价:课堂同步实践任务的完成度与代码质量；对典型错误案例的诊断与修正表现。

2.成果性评价:课后提交的两个实验代码是否实现核心功能，生命周期日志是否清晰反映了路由操作的影响。

3.素养评价:在实验设计和问题诊断中体现出的逻辑思维、时序观念和探究精神。反思诊改1.亮点:通过“生命周期体验”实验让学生亲手验证理论，学习方式生动有效；将“健康评分”实验与健康管理结合，赋予技术学习积极的社会意义。

2.可能不足:页面栈和路由的多种场景组合（如嵌套navigateTo后多次navigateBack）可能使部分学生混淆。

3.改进措施:可设计一个“路由探险”的互动小游戏或可视化模拟工具，让学生在游戏中动态观察页面栈变化，加深理解；提供一份“路由使用场景速查表”作为课后参考资料。《微信小程序开发》课程单元教学设计授课单元单元7：用户信息模块开发（一）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述微信小程序用户登录的完整流程（wx.login获取code、服务端换取openid）。

2.解释AppID与AppSecret的作用及在登录流程中的角色。

3.说明wx.request发起网络请求的语法与流程。

4.理解rpx相对长度单位的原理及其适配不同屏幕的优势。1.能调用wx.login接口获取临时登录凭证code。

2.能使用wx.request向模拟后端接口发送请求，并处理返回数据。

3.能运用getApp().globalData全局数据对象存储用户登录状态（openid）。

4.能在WXSS中正确使用rpx单位进行界面布局。1.培养严谨的流程思维和接口调用规范意识。

2.树立信息安全意识，理解AppSecret等敏感信息保护的重要性。

3.通过实现医疗应用的登录功能，体会技术如何赋能便捷、安全的民生服务。教学重难点教学重点1.小程序用户登录（code换取openid）的流程与原理。

2.wx.request接口的使用与数据交互。教学难点1.理解前后端分离架构下，登录流程中客户端与服务端的协作关系。

2.网络请求的异步处理与回调函数的使用。教学策略教学组织采用“流程剖析-接口演示-代码实战-问题探究”的组织方式，理论与实操紧密结合。教学方法任务驱动法、流程图解法、案例教学法、讲练结合法。教学准备环境准备1.已配置好服务器域名（可使用测试域名）的微信开发者工具。

2.可访问互联网的机房环境。资料准备1.《微信小程序开发项目实战教程》教材“项目3任务1”。

2.授课计划表“第7周”内容与作业要求。资源准备1.绘制清晰的“小程序登录时序图”。

2.已部署好的模拟后端接口（用于接收code并返回模拟的openid）。

3.“明德E医”用户登录页面的原型图或设计稿。

4.补充阅读资料：《小程序登录流程》、《wx.login与wx.request接口文档》。

5.关于信息安全的案例素材。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目3任务1，观看配套慕课视频中关于“用户登录”的部分。

2.提出思考题：“为什么小程序登录不能直接在前端获取用户的微信身份标识（如openid）？这样设计出于什么安全考虑？”1.在学习平台发布预习资源和引导性问题。

2.提供模拟后端接口的调用地址和参数说明。1.观看视频，了解登录流程概览。

2.思考并尝试回答安全问题，记录疑问。1.知识前置：利用慕课视频进行翻转课堂准备，聚焦核心流程。

2.安全启蒙：引导学生提前思考安全机制，为课堂深入讲解做铺垫，培养安全开发意识。课中研学环节一：核心原理剖析——登录流程与安全机制（40分钟）​

内容1：小程序登录流程详解

结合时序图，详细讲解wx.login获取code、将code发送至开发者服务器、服务器用code+AppID+AppSecret向微信接口服务换取session_key和openid的全过程。强调openid是用户在该小程序下的唯一标识。

内容2：AppID与AppSecret的角色

解释AppID是小程序的“身份证”，AppSecret是校验开发者身份的“密码”，必须妥善保存在服务器端，绝不能泄露到客户端代码中。

内容3：rpx尺寸机制

讲解rpx是响应式像素单位，可根据屏幕宽度自适应。演示在不同宽度设备上，相同rpx值对应的实际像素变化。1.使用时序动画或分步图解，清晰展示登录流程中客户端、开发者服务器、微信接口服务三方的交互。

2.重点强调：通过案例说明AppSecret泄露可能导致用户数据被盗等严重后果，融入《网络安全法》和开发者职业道德教育，树立“安全第一”的底线思维。

3.在开发者工具的模拟器中切换不同设备型号，直观展示rpx的适配效果。1.跟随讲解，在笔记本上绘制简化的登录流程图。

2.理解AppSecret的重要性，讨论如何在项目中保护此类敏感信息。

3.动手修改一个元素的宽度单位（px改为rpx），观察在不同设备模拟器下的显示效果。1.建立完整认知：透彻理解登录流程背后的安全设计与技术原理，这是实现功能的基础。

2.突破难点：将抽象的安全机制与具体的安全事件案例结合，使学生深刻理解为何要如此设计。

3.思政融入（政策法规/职业素养）：将信息安全法律法规和开发者道德规范无缝融入技术讲解，强化学生的法律意识和责任担当。[citation:教材文前.pdf]环节二：核心实践——登录功能实现与数据存储（70分钟）​

任务1：调用wx.login获取code

演示在“明德E医”登录按钮事件中调用wx.login，成功后在回调函数中获取到临时登录凭证code。

任务2：使用wx.request发送code

演示使用wx.request将code、以及必要的模拟用户信息（如用户名）发送到教师提供的模拟后端接口。讲解请求方法、URL、data、success/fail回调等参数。

任务3：处理响应与全局存储

演示在success回调中，接收服务器返回的模拟openid（如'user_openid_123'），并使用getApp().globalData将其存储为全局用户标识。1.屏幕共享，编写登录页面的wxml和js代码，逐步演示并讲解关键API调用和参数含义。

2.演示如何处理网络请求的加载状态（loading）和可能的失败情况（如网络异常）。

3.展示getApp().globalData的用法，并说明其在多个页面间共享数据的作用。

4.发布同步操作任务清单。1.在自己的“明德E医”项目登录页面中，实现获取code的代码。

2.编写wx.request代码，将code发送到指定接口，并在控制台打印返回的openid。

3.将获取到的openid存入全局变量，并在另一个页面尝试读取和显示，验证存储成功。1.​“做中学”核心实践：通过完整的登录功能实现，将理论流程转化为可运行的代码，掌握网络请求和全局状态管理这两个核心技能。[citation:教材文前.pdf]

2.异步编程体验：在实践中体会JavaScript的异步回调机制，为后续学习Promise和async/await打下基础。

3.培养工程思维：通过模拟真实登录流程，让学生建立前端与后端协作、数据安全传输的工程化思维。环节三：问题诊断与能力迁移（30分钟）​

活动1：典型问题诊断

收集并演示常见错误：

1.未配置合法域名导致wx.request失败。

2.wx.login的success回调中未正确获取到code。

3.全局数据存储后，在其他页面读取为undefined（生命周期时机问题）。

活动2：迁移至“云惠视听”​

引导学生思考：在“云惠视听”文化应用中，用户登录流程是否需要调整？登录成功后应存储哪些用户信息？指导学生为“云惠视听”设计简单的登录逻辑。1.将上述错误代码投屏，引导学生阅读开发者工具控制台报错信息，定位问题根源并修正。

2.组织学生讨论“明德E医”（医疗）与“云惠视听”（文娱）在登录功能与用户信息存储上的异同。

3.鼓励学生为“云惠视听”设计登录界面草图及数据存储方案。1.根据错误提示，尝试自主排查并修复代码问题。

2.参与讨论，分析两个项目业务差异对登录功能的影响。

3.为“云惠视听”项目规划登录模块。1.问题排查能力训练：通过诊断真实开发中的常见错误，提升学生调试代码、解决问题的能力。[citation:教材文前.pdf]

2.知识迁移与业务分析：践行教材“示范—巩固—提升”的训练体系，引导学生将“明德E医”所学技能迁移到“云惠视听”，并思考不同业务的个性化需求，培养需求解读与方案设计能力。[citation:教材文前.pdf]课后拓展基础作业（来自授课计划）：完成“明德E医”用户登录功能，成功获取模拟openid并存储至全局数据。

拓展思考：阅读《wx.login与wx.request接口文档》，总结这两个API的success、fail、complete回调分别在什么情况下触发，并思考如何在代码中实现更健壮的错误处理（如网络重试、友好提示）。提供作业提交的详细标准（需展示获取到的code、请求成功返回的openid、全局存储的代码截图）。在学习平台分享官方接口文档链接。1.完善并提交“明德E医”登录功能代码。

2.阅读官方文档，总结回调机制，并尝试在现有代码中加入更完善的错误处理逻辑。1.巩固技能：通过独立完成登录功能，巩固对核心API和流程的掌握。

2.自主学习与深化：引导阅读一手技术文档，培养查阅官方资料、深入理解API细节的自主学习能力，这是“代码编写能力”和“问题排查能力”的重要支撑。教学评价1.过程性评价：课堂实践任务的完成度与代码质量；对登录流程原理的理解与表达。

2.成果性评价：课后提交的登录功能代码能否正确运行，是否实现了code获取、请求发送、openid全局存储的完整流程。

3.素养评价：在讨论和实践中是否体现出对信息安全的重视，以及将技术应用于具体业务场景的分析能力。反思诊改1.亮点：将抽象的登录流程与安全机制通过时序图和案例讲解得清晰透彻；通过“明德E医”与“云惠视听”的对比，有效促进了知识迁移和业务思考。

2.可能不足：部分学生对异步回调函数的执行时机理解可能有困难。

3.改进措施：可利用“事件循环（EventLoop）”的简单模型进行比喻讲解；提供一段包含console.log的典型异步代码，让学生预测并验证执行顺序，加深理解。《微信小程序开发》课程单元教学设计授课单元单元8：用户信息模块开发（二）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.复述并运用getApp()方法获取全局应用实例及其中存储的数据。

2.阐述条件渲染(wx:if,wx:elif,wx:else)和样式条件选择(class动态绑定)的语法与应用场景。

3.说明在用户详情页等场景中对身份证号、手机号等敏感信息进行掩码处理的必要性及常规方法。1.能使用getApp().globalData获取全局用户信息并在页面中渲染展示。

2.能运用条件渲染指令控制页面元素的显示与隐藏。

3.能使用样式条件选择实现数据掩码切换等动态交互效果。1.树立用户数据隐私保护意识，理解并遵守《个人信息保护法》等相关法律法规。

2.培养严谨的数据展示逻辑和精细的前端交互实现能力。教学重难点教学重点1.使用getApp()跨页面获取和渲染全局用户数据。

2.条件渲染(wx:if)和动态样式(class绑定)的语法与综合应用。教学难点1.理解getApp()的机制及全局数据的管理时机。

2.灵活组合条件渲染与样式绑定，实现复杂的交互逻辑（如掩码切换）。教学策略教学组织采用“需求分析-原型驱动-代码实现-隐私探讨”的组织流程，以任务驱动教学。教学方法案例教学法、任务驱动法、讲练结合法、小组讨论法。教学准备环境准备已配置好开发环境，并已完成单元7登录功能、获取到模拟openid并存入globalData的“明德E医”项目。资料准备1.《微信小程序开发项目实战教程》教材“项目3任务2”。

2.授课计划表“第8周”内容与作业要求。资源准备1.“就诊人详情页”高保真原型图或UI设计稿。

2.补充阅读资料：《个人信息保护法》相关条款解读、《数据掩码处理最佳实践》。

3.演示用代码片段（展示完整/掩码两种状态的用户信息）。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目3任务2，并思考“为什么在展示用户手机号、身份证号时，通常需要隐藏部分数字？”。

2.推送资料：《个人信息保护法》中关于个人信息处理规则和去标识化的相关条款摘要。1.在学习平台发布预习任务和阅读材料。

2.提出问题引导学生思考数据展示与隐私保护的平衡。1.阅读教材，了解用户详情页的基本构成。

2.阅读法律条款，初步建立个人信息保护的法律认知。1.建立法律意识：将《个人信息保护法》的学习前置，让学生在动手开发前即明确法律红线，培养合规开发的意识。[citation:教材文前.pdf]课中研学环节一：情境导入与需求分析(15分钟)

回顾上单元登录功能，提问：“用户登录后，我们如何在一个专门的页面里展示他的详细信息？”展示“明德E医”就诊人详情页原型，分析需要展示的数据项（姓名、头像、身份证号、手机号等）。引出本单元核心任务：​数据获取、渲染与安全展示​。1.展示“就诊人详情页”原型图，引导学生分析页面元素与数据来源。

2.强调在医疗场景中，身份证号、手机号属于敏感个人信息，必须妥善处理。1.观察原型，识别页面中需要动态填充的数据项。

2.讨论在详情页直接显示完整身份证号的潜在风险。1.明确任务：从实际项目需求出发，让学生明确本单元要解决的具体问题，建立目标导向。

2.思政融入（政策法规）​：结合医疗健康场景，强调保护患者隐私信息的极端重要性和法律义务，自然引出数据掩码的需求。环节二：核心技能讲解与实践(70分钟)

技能点1：使用getApp()获取全局数据

讲解getApp()方法的