微信小程序开发案例教程-项目七 数据缓存API与用户信息API.pptx

微信小程序

开发案例教程;全书目录;项目七

数据缓存API与

用户信息API;项目导读;知识目标;;;任务描述;缓存结构为key-value对，可以在缓存中设置一个特定的key来存储数据。

使用wx.setStorage或wx.setStorageSyncAPI将数据存储在本地缓存指定的key中（若该key已经存在，则覆盖该key对应的数据）。;;wx.setStorageAPI的示例代码。;wx.setStorageSync是同步API，该API有key和data两个参数。示例代码如下。;小贴士;【例7-1】在微信小程序中使用wx.setStorageAPI将用户姓名和手机号码保存到本地缓存中。

第一步：在WXML文件中添加一个form组件、两个input组件和一个“保存”按钮，并为form组件绑定一个submit事件formSubmit。

第二步：在JS文件的formSubmit事件处理函数中使用wx.setStorageAPI将用户手机号码作为key，用户姓名作为data保存到本地缓存中。

第三步：在WXSS文件中为组件设置样式。

;（1）WXML文件中的代码。

;（2）JS文件中的代码。;续;（3）WXSS文件中的代码。;小贴士;array.string与array.object的区别？;wx.getStorageSync是同步API，该API直接传入key，并以返回值的形式返回key对应的数据。示例代码如下。;（2）微信小程序使用wx.getStorageInfo或wx.getStorageInfoSyncAPI查询本地缓存中的所有key及缓存空间的相关信息，查询时无须指定key。其中，wx.getStorageInfo是异步API，该API传入一个object类型的参数，参数支持的属性有success、fail和complete3个回调函数。;小贴士;wx.getStorageInfoAPI的示例代码如下。

;wx.getStorageInfoSync是同步API，会以返回值的形式返回本地缓存中的所有数据。示例代码如下。

;【例7-2】在微信小程序中使用wx.getStorage和wx.getStorageInfoAPI查询小程序本地缓存中的所有key，以及指定key对应的数据。

第一步：在例7-1的缓存数据小程序中添加一个查询缓存数据的页面，在该页面的WXML文件中添加两个按钮，分别用于查询key和显示data，并分别为这两个按钮绑定tap事件querykey和showdata；分别在两个按钮下方添加用于显示key和data的view组件，并通过条件渲染和列表渲染将数据显示在页面中，代码如下。

;续

;第二步：在相应JS文件的querykey事件处理函数中使用wx.getStorageInfoAPI查询本地缓存中的所有key，在showdata??件处理函数中使用wx.getStorageAPI查询指定key对应的数据，代码如下。;续;续;续;小贴士;第三步：在相应的WXSS文件中为组件设置样式，代码如下。;编译或保存代码，单击“查询key”按钮，按钮下方会显示本地缓存中的所有key，选中某个key对应的单选钮并单击“显示data”按钮，按钮下方会显示该key对应的数据。;;（1）使用wx.removeStorage和wx.removeStorageSyncAPI删除本地缓存中指定key对应的数据。

wx.removeStorageAPI的示例代码如下。;wx.removeStorageSync是同步API，使用该API时需要将本地缓存中指定的key作为参数传入，从而删除指定key对应的数据，那么它的代码应该怎样编写？;使用wx.removeStorageSync时需要将本地缓存中指定的key作为参数传入，从而删除指定key对应的数据。示例代码如下。;（2）wx.clearStorage是异步API，可以传入一个object类型的参数，参数支持的属性有success、fail和complete3个回调函数。

wx.clearStorageAPI的示例代码如下。

;wx.clearStorageSync是同步API。示例代码如下。;;;任务描述;;;;小贴士;微信小程序使用wx.loginAPI获取登录凭证，该API传入一个object类型的参数，参数支持的常用属性有success、fail和complete3个回调函数。其中，success回调函数的返回参数有一个code属性，即登录凭证。

wx.loginAPI的示例代码如下。;通过wx.checkSessionAPI检查登录状态是否有效。;什么是微信服务器，请同学们简单阐述一下？;;开发者可以调用wx.authori