《微信小程序开发案例教程》教案 第14课 数据缓存API与用户信息API（二）.docx

PAGE4

PAGE4

PAGE5

PAGE5

PAGE

PAGE4

PAGE

PAGE5

PAGE

PAGE1

课题

数据缓存API与用户信息API（二）

课时

2课时（90min）

教学目标

知识技能目标：

（1）熟悉微信小程序登录的过程及相关的登录API

（2）掌握微信小程序授权和设置的相关知识

素质目标：

培养独立分析问题的能力

培养持之以恒的钻研精神

教学重难点

教学重点：用户信息API中的登录、授权和设置、获取用户头像和昵称

教学难点：能够使用微信提供的头像昵称填写功能快速获取用户头像和昵称

教学方法

案例分析法、问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学设计

第1节课：?课前任务→考勤（2min）→问题导入（5min）→传授新知（38min）

第2节课：问题导入（5min）→任务实施（35min）→课堂小结（3min）→作业布置（2min）

教学过程

主要教学内容及步骤

设计意图

第一节课

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件完成课前任务

请大家从如何使用用户信息API中的登录、授权和设置、获取用户头像和昵称的相关知识和如何“家电商城”微信小程序设置用户头像和昵称进行了解。

【学生】完成课前任务

通过课前任务，使学生了解所学课程的重要性，增加学生的学习兴趣

考勤

（2min）

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

培养学生的组织纪律性，掌握学生的出勤情况

问题导入

（5min）

【教师】创设情景，并组学生讨论下列问题：

在微信小程序中，我们往往需要获取用户的身份信息，比如昵称、头像、性别、地区等。要得到这些信息，就需要我们调用获取用户信息的api了。在小程序中，微信非常重视对用户隐私的保护，因此有很多关于获取用户信息的规范，比如获取信息需要用户授权，这使得我们获取信息的api比其他的api要更加复杂。

（1）在小程序中提交用户信息都需要哪些步骤？

（2）微信小程序里提交用户信息的方式？

【学生】聆听、思考、讨论、小组代表上台回答问题

【教师】总结学生的回答引入要讲的知识，板书“用户信息API”

通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣

传授新知

（38min）

【教师】通过学生的发言，引入新的知识，讲解用户信息API中的登录、授权和设置，以及获取用户头像和昵称的相关知识

一、登录

?【教师】组织学生扫码观看“用户信息API”微课（详见教材），并进行讲解

?【学生】观看、聆听、思考

微信小程序可以通过官方提供的登录API获取微信提供的用户身份标识，包括openid（用户在当前小程序的唯一标识）、session_key（微信服务器和开发者服务器的会话密钥）、unionid（用户在微信开放平台的唯一标识）等，具体过程如下。

（1）小程序获取微信登录凭证（code）。小程序使用wx.loginAPI获取code，其有效时间为5分钟，如果5分钟内没有用该code去微信服务器验证，就会失效。

（2）小程序将code发送给开发者服务器。小程序使用wx.requestAPI将code发送给开发者服务器。

（3）开发者服务器与微信服务器对接。

（4）开发者服务器将业务用户ID与openid绑定起来。

（5）生成并返回业务登录凭证SessionId。

微信小程序登录时序图

?【教师】随机邀请学生回答以下问题：

请简单阐述一下什么是微信服务器？

?【学生】聆听、思考、回答

?【教师】总结学生的回答

二、授权和设置

在微信小程序中，一些API需要经过用户授权才能使用，微信团队将这些需要用户授权的API按使用范围划分为多个scope，当授权给一个scope后，该scope对应的所有API都可以直接使用。

scope

对应API

说明

scope.userLocation

wx.getLocation，wx.startLocationUpdate

前台获取精确地理位置

scope.userFuzzyLocation

wx.getFuzzyLocation

获取模糊地理位置

scope.userLocationBackground

wx.startLocationUpdateBackground

前后台均可获取位置

scope.record

live-pusher组件，wx.startRecord，

wx.joinVoIPChat，RecorderManager.start

使用麦克风

scope.camera

camera组件，live-pusher组件，

wx.createVKSession

使用摄像头

scope.bluet