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

PAGE4

PAGE4

PAGE3

PAGE3

PAGE

PAGE4

PAGE

PAGE3

PAGE

PAGE1

课题

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

课时

2课时（90min）

教学目标

知识技能目标：

（1）掌握缓存数据API的相关知识

（2）掌握查询缓存数据及清除缓存数据API的相关知识

素质目标：

培养独立分析问题的能力

培养持之以恒的钻研精神

教学重难点

教学重点：各API参数支持的属性

教学难点：能够使用数据缓存API缓存数据、查询缓存数据及清除缓存数据

教学方法

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

教学用具

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

教学设计

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

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

教学过程

主要教学内容及步骤

设计意图

第一节课

课前任务

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

请大家提前熟悉对数据缓存API中缓存数据、查询缓存数据、清除缓存数据的相关知识。

【学生】完成课前任务

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

考勤

（2min）

【教师】使用APP进行签到

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

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

问题导入

（5min）

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

每个微信小程序都可以有自己的本地缓存，可以通过wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。

（1）同一个微信用户，同一个小程序，A用户能否读取到B用户的数据？

（2）localStorage的储存注意事项有哪些？

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

【教师】总结学生的回答引入要讲的知识，板书“数据缓存API”

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

传授新知

（38min）

【教师】通过学生的发言，引入新的知识，讲解缓存数据、查询缓存数据、清除缓存数据的相关知识

一、缓存数据

微信小程序的缓存结构为key-value对，可以在缓存中设置一个特定的

key来存储数据。

?【教师】组织学生扫码观看“数据缓存API”微课（详见教材），并进行讲解

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

微信小程序使用wx.setStorage或wx.setStorageSyncAPI将数据存储在

本地缓存指定的key中（若该key已经存在，则覆盖该key对应的数据）。

其中，wx.setStorage是异步API，该API传入一个object类型的参数，参数除支持success、fail和complete3个回调函数外。

属性

类型

必填

说明

key

string

是

本地缓存中指定的key

data

any

是

需要存储的数据

encrypt

boolean

否

是否开启加密存储，默认为false。若开启加密存储，wx.setStorage和wx.getStorageAPI需要同时将encrypt属性的值设为true

wx.setStorageAPI参数支持的属性

?【教师】带领学生分析例7-1，并以小组为单位编写代码

编写代码，在微信小程序中使用wx.setStorageAPI将用户姓名和手机号码保存到本地缓存中。首先在WXML文件中添加一个form组件、两个input组件和一个“保存”按钮，并为form组件绑定一个submit事件formSubmit，然后在JS文件的formSubmit事件处理函数中使用wx.setStorageAPI将用户手机号码作为key，用户姓名作为data保存到本地缓存中，最后在WXSS文件中为组件设置样式。

……（详见教材）

?【学生】思考、讨论、请小组代表上台演示

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

二、查询缓存数据

在微信小程序中，可以查询本地缓存中指定key对应的数据，也可以查询本地缓存中的所有key及缓存空间的相关信息。

（1）微信小程序使用wx.getStorage或wx.getStorageSyncAPI查询本地缓存中指定key对应的数据。其中，wx.getStorage是异步API，该API传入一个object类型的参数，参数除支持success、fail和complete3个回调函数外，还支持key属性，该属性为string类型