微信基础开发及实战 8

《微信小程序开发》课程单元教学设计授课单元单元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.素养评价：在讨论和实践中是否体现出对信息安全的重视，以及将技术应用于具