微信基础开发及实战 14

《微信小程序开发》课程单元教学设计授课单元单元9：用户信息模块开发（三）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述picker选择器组件（普通、时间、日期、地区）的配置方法与应用场景。

2.解释data-*自定义属性在事件中传递额外数据的作用。

3.说明wx.chooseMedia（媒体选择）与wx.chooseLocation（位置选择）API的调用流程与权限配置。1.能使用picker组件实现用户性别、出生日期、所在地等信息的修改。

2.能运用wx.chooseMedia实现头像上传，并能调用模拟OCR接口识别身份证信息。

3.能利用wx.chooseLocation获取并展示用户选择的地理位置。1.培养数据准确性的严谨意识，理解用户资料作为服务基础的重要性。

2.树立技术探索精神，鼓励将第三方能力（如OCR）合理集成以优化用户体验。

3.强化在获取用户敏感信息（如位置、证件照）时的透明告知与合规使用意识。教学重难点教学重点1.picker组件的类型区分、配置及与页面数据的同步。

2.wx.chooseMedia与wx.chooseLocation的调用与结果处理。教学难点1.理解并实现身份证OCR识别的完整流程（前端上传->调用接口->解析结果）。

2.处理多个异步操作（如选择图片、调用OCR、更新页面）之间的逻辑顺序。教学策略教学组织采用“案例引导-组件精讲-接口实战-分层实践”的组织流程，突出功能集成。教学方法任务驱动法、演示教学法、案例分析法、小组协作法。教学准备环境准备1.已安装微信开发者工具并完成登录模块的计算机。

2.学生手机（用于真机调试位置选择功能）。资料准备1.《微信小程序开发项目实战教程》教材“项目3任务3”。

2.授课计划表“第9周”内容与作业要求。资源准备1.“用户资料修改页”高保真原型图。

2.模拟的身份证OCR识别接口（可接收图片返回模拟姓名、身份证号）。

3.补充阅读资料：《wx.chooseMedia与文件系统》、《百度OCR接口申请与调用》。

4.关于“个人信息收集最小必要原则”的法规解读材料。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目3任务3，观看配套慕课视频中关于“picker组件”的部分。

2.提出思考题：“在修改用户资料时，为什么提供picker选择器比直接让用户输入文本框更好？请从用户体验和防错两个角度分析。”1.在学习平台发布预习资源和引导性问题。

2.提前发布模拟OCR接口的调用说明。1.观看视频，了解picker组件的基本用法。

2.思考并尝试回答提问，记录预习中的疑问。1.前置学习：利用慕课视频进行翻转课堂准备，聚焦核心组件。

2.启发思考：引导学生从产品设计角度思考技术选型，培养“用户体验为先”的产品思维。课中研学环节一：情境导入与需求分析(15分钟)

回顾已完成的登录页和详情页，提出：“用户的基本信息如何维护和更新？”展示“明德E医”用户资料修改页原型，分析需要修改的字段（头像、姓名、性别、出生日期、所在地、身份证号等），引出本单元核心：​表单交互与外部能力集成​。1.展示资料修改页原型，引导学生识别哪些字段适合用picker，哪些需要调用系统能力（如相机、地图）。

2.强调在医疗场景下，身份证等信息的准确性至关重要。1.观察原型，分析不同字段最适合的交互控件。

2.讨论身份证信息手动输入可能带来的错误风险。1.明确任务：从实际项目需求出发，明确本单元要完成的复杂表单页，建立目标导向。

2.思政融入（工匠精神）：强调医疗信息“零差错”的重要性，培养学生对待数据的严谨态度和责任感。环节二：核心组件与API精讲实践(75分钟)

技能点1：picker组件全家桶

对比讲解四种picker：

-普通选择器（mode=selector）：用于性别选择。

-日期选择器（mode=date）：用于出生日期。

-时间选择器（mode=time）：用于预约时间（拓展）。

-省市区选择器（mode=region）：用于所在地。

任务：在资料修改页实现性别和出生日期的picker选择，并实现数据绑定。

*技能点2：data-属性进阶

复习data-*的用法，演示在动态生成的picker选项列表中，如何通过data-index传递选中项的索引。

技能点3：多媒体与位置API

讲解并演示：

-wx.chooseMedia：调用相册或相机，获取临时图片路径。

-OCR集成演示：将获取的身份证图片路径，通过wx.request发送至模拟OCR接口，并解析返回的姓名、身份证号，自动填入表单。

-wx.chooseLocation：调用地图选择位置，获取并显示位置名称。1.屏幕共享，分别演示四种picker的配置和事件绑定（bindchange），重点讲解value和range属性。

2.演示wx.chooseMedia的调用，讲解sourceType（相册/相机）和sizeType（原图/压缩）参数。

3.关键演示：展示调用模拟OCR接口、解析JSON数据、并自动填充表单字段的完整代码流程。

4.演示wx.chooseLocation，提醒学生此功能需在真机上调试，并讲解wx.getSetting检查授权。

5.发布分层任务清单：基础任务（完成picker），进阶任务（实现头像更换），挑战任务（集成OCR或位置选择）。1.在自己的资料修改页中，实现性别和出生日期的picker选择功能。

2.实现“更换头像”按钮，调用wx.chooseMedia选择图片并预览。

3.学有余力的学生，尝试为“身份证正面”图片按钮集成OCR识别功能，或将“所在地”字段改为“当前位置”并集成wx.chooseLocation。1.​“做中学”核心实践：通过亲手实现多种交互组件和系统API调用，极大丰富学生的技术工具箱，提升解决复杂界面问题的能力。

2.攻克难点：通过演示完整的OCR集成流程，将抽象的外部API调用具象化，帮助学生理解如何将小程序与云端AI能力结合，拓宽技术视野。

3.分层教学：践行教材“示范—巩固—提升”的三级训练体系，满足不同层次学生的学习需求。[citation:教材文前.pdf]环节三：知识深化、协作与问题诊断(30分钟)

活动1：合规性讨论与最佳实践

结合《个人信息保护法》中的“告知-同意”和“最小必要”原则，组织讨论：在小程序内调用相机、相册、地理位置，以及上传身份证照片进行OCR识别时，应如何设计用户授权流程和隐私政策提示？

活动2：小组协作代码审查

学生两人一组，互相审查对方的资料修改页代码，重点关注：

1.picker的值绑定与显示是否一致。

2.异步操作（如选择图片后设置头像）的错误处理是否完善。

活动3：典型问题诊断

演示常见错误：picker的range数据格式错误；未处理用户取消选择媒体或位置的情况；OCR接口返回数据结构解析错误。1.引导学生从法律和伦理角度思考技术实现，强调“技术向善”，合规是创新的前提。

2.组织小组互查，强调代码可读性和健壮性的重要性。

3.通过错误案例，指导学生使用调试工具（Network面板查看请求、Console查看报错）定位集成问题。1.参与小组讨论，分享对合规收集用户信息的看法。

2.与同伴互查代码，提出改进建议，并优化自己的代码。

3.根据教师提供的错误代码，尝试诊断并修正问题。1.价值引领：将技术实践与法律法规紧密结合，深化学生对“负责任创新”的理解，明确开发者不仅是代码编写者，更是用户权益的守护者，实现“技能+素养”双育人。[citation:教材文前.pdf]

2.培养协作与审查能力：通过代码互查，初步体验团队协作中的代码审查环节，培养“团队协作能力”和严谨的编码习惯。[citation:教材文前.pdf]

3.问题排查能力：通过诊断涉及网络请求和第三方集成的复杂错误，进一步提升学生的问题解决能力。[citation:教材文前.pdf]课后拓展基础作业（来自授课计划）：完成用户资料修改页，要求实现基础信息修改、头像更换功能。鼓励实现身份证OCR识别与地址选择（可选）。

拓展思考：阅读《百度OCR接口申请与调用》，了解商用OCR服务的完整接入流程（包括APIKey申请、计费方式、QPS限制等），并思考在实际项目中应如何做技术选型。提供作业提交的详细标准（功能完整、界面友好、代码规范）。在学习平台分享拓展阅读资料和商用OCR服务商链接。1.完善“明德E医”用户资料修改页，提交完整代码和功能演示截图。

2.完成拓展阅读，整理一份第三方服务集成调研笔记。1.巩固技能：通过独立完成一个功能丰富的表单页面，综合巩固picker、媒体API、网络请求、数据绑定等核心技能。

2.衔接产业：引导学生了解真实商业环境中的技术集成方案，培养其技术调研和评估能力，为未来实习或工作做好准备。教学评价1.过程性评价：课堂实践任务的完成度与代码质量；小组互查活动的参与度与有效性。

2.成果性评价：课后提交的资料修改页是否功能完整，交互是否流畅，可选功能实现是否有创意。

3.素养评价：在讨论和实践中体现出的合规意识、用户体验思考和技术探索精神。反思诊改1