微信基础开发及实战 2

《微信小程序开发》课程单元教学设计授课单元单元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()方法的作用，演示如何在页面onLoad或onShow中获取存储在app.js的globalData中的用户信息（如openid,userInfo）。

技能点2：数据绑定与渲染

复习WXML数据绑定{{}}语法，带领学生将获取到的用户数据渲染到页面对应位置。

技能点3：条件渲染实现掩码切换

讲解wx:if,wx:elif,wx:else语法。​任务：在详情页为身份证号、手机号添加一个“显示/隐藏”开关按钮。

-在data中定义状态变量（如isIdMasked:true）。

-使用wx:if和wx:else根据isIdMasked的值，分别显示掩码后（如370***********123X）和完整的身份证号。

-为开关按钮绑定bindtap事件，点击时切换isIdMasked的状态。

技能点4：样式条件选择优化交互

讲解通过动态绑定class或style来改变视觉状态。​任务：根据isIdMasked的值，动态改变开关按钮的文字（如“显示”/“隐藏”）或颜色。1.演示getApp()的用法，并对比其与页面内data的区别。

2.带领学生逐步编写代码，实现从全局数据获取到页面渲染的完整流程。

3.重点讲解条件渲染的逻辑，通过流程图帮助学生理解wx:if的显示/隐藏机制。

4.演示如何通过this.setData更新状态变量，从而触发视图的重新渲染。

5.介绍动态class的语法：class="{{isIdMasked?'masked-btn':'unmasked-btn'}}"。1.在“就诊人详情页”的js文件中，使用getApp()获取全局存储的模拟用户信息。

2.在wxml中，使用数据绑定语法展示用户姓名、头像等基础信息。

3.实现身份证号的掩码切换功能：

a.在data中定义状态变量。

b.在wxml中使用wx:if/else控制两段不同文本的显示。

c.编写按钮的点击事件函数，切换状态变量。

4.为按钮添加动态样式，增强交互反馈。1.技能贯通：将数据获取(getApp())、数据绑定、事件处理、条件渲染等核心技能串联起来，完成一个完整的交互功能，践行“做中学”。[citation:教材文前.pdf]

2.攻克难点：通过具体的“掩码切换”案例，将抽象的条件渲染语法具象化，帮助学生深刻理解其应用场景。

3.培养工程思维：引导学生思考状态管理、视图更新的完整数据流，培养前端开发的基本逻辑思维。环节三：知识深化与能力迁移(35分钟)

活动1：隐私保护讨论与最佳实践

结合《个人信息保护法》，组织讨论：除了掩码，还有哪些技术或交互手段可以保护用户隐私？（如：二次验证、数据脱敏、访问日志等）。

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

引导学生思考：在“云惠视听”的用户详情页（如“我的”页面），可能需要展示哪些信息？哪些属于敏感信息需要处理？指导学生为其设计数据展示与隐私保护方案。

活动3：常见问题排查

演示并讲解常见错误：getApp()在页面生命周期过早调用（如onLoad之前）导致获取不到数据；条件渲染中变量类型判断错误等。1.引导学生从法律和技术两个层面探讨隐私保护方案，强调“合规”与“体验”并重。

2.展示“云惠视听”用户页面的可能设计，引导学生进行迁移设计。

3.通过错误案例，指导学生使用开发者工具调试工具（Console,Sources）定位问题。1.参与小组讨论，分享对隐私保护技术的认识。

2.为“云惠视听”项目的用户页面规划数据展示项和隐私保护策略。

3.根据教师提供的错误代码，尝试诊断并修正问题。1.价值引领：将技术实现与法律法规、社会责任紧密结合，深化对“用技术服务社会”中“安全”、“合规”内涵的理解，实现“技能+素养”双育人。[citation:教材文前.pdf]

2.能力迁移：将“明德E医”中学到的数据展示与隐私保护模式，迁移到“云惠视听”项目，践行教材“示范—巩固—提升”的训练体系。[citation:教材文前.pdf]

3.问题排查能力：通过调试真实开发中的常见逻辑错误，提升学生的问题分析与解决能力。[citation:教材文前.pdf]课后拓展基础作业（来自授课计划）​：完成“就诊人详情页”，实现个人信息展示及身份证/手机号的掩码切换功能。

拓展思考：阅读《数据掩码处理最佳实践》，思考并尝试实现一个更复杂的掩码规则（例如：根据不同用户角色显示不同密级的掩码信息）。提供作业提交的详细标准（功能完整、UI美观、代码规范）。在学习平台分享拓展阅读资料。1.完善“明德E医”就诊人详情页，实现完整的个人信息展示与掩码切换交互。

2.阅读拓展资料，尝试实现进阶的掩码逻辑（选做）。1.巩固技能：通过独立完成作业，巩固对getApp()、条件渲染、动态样式等核心知识的掌握。

2.能力提升：鼓励学有余力的学生探索更复杂的业务逻辑和交互设计，培养自主学习与创新能力。教学评价1.过程性评价：课堂实践环节的代码完成度与逻辑正确性；小组讨论的参与度与见解深度。

2.成果性评价：课后提交的“就诊人详情页”是否功能完整（数据获取、展示、掩码切换），交互是否流畅。

3.素养评价：在作业和讨论中体现出的用户隐私保护意识和对相关法律法规的认知。反思诊改1.亮点：将敏感信息掩码这一业务需求与条件渲