微信小程序开发从入门到实战 课件 第7、8章 本地数据和缓存管理、用户认证与权限管理

微信小程序本地数据和缓存管理目录1.微信小程序本地存储概述2.异步方式存取本地数据3.同步方式存取本地数据4.本地存储的应用场景微信小程序本地存储概述Part011本地存储对于提升移动端应用响应速度和用户体验至关重要。微信小程序通过提供本地存储能力，允许开发者高效管理用户数据，减少网络请求，提升用户满意度。01微信小程序的本地存储接口使得开发者能够轻松保存关键数据，如用户偏好设置、临时数据和应用状态，从而在用户重新打开小程序时迅速加载数据，提升应用启动速度。02本地存储的重要性本地存储相较于服务器存储，具有更快的读写速度和更低的延迟响应，支持离线访问和操作数据，减少对实时网络连接的依赖。数据存储在用户设备上，增强了数据的独立性和隐私保护，开发者可以通过数据加密等措施进一步增强数据安全性。0201本地存储的优势异步方式存取本地数据Part02在微信小程序中，使用wx.setStorage()可以通过异步方式将数据存储到本地缓存指定的key中，除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。基本用法：wx.setStorage({key:'key',data:'value',success:function(){console.log('数据存储成功');},fail:function(){console.error('数据存储失败');}});1.异步获取数据wx.getStorage()wx.setStorage()参数说明属性

类型

默认值

必填

说明key string 是

本地缓存中指定的keydata any 是

需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。encrypt Boolean false 否

是否开启加密存储。success function 否

接口调用成功的回调函数fail function 否

接口调用失败的回调函数complete function 否

接口调用结束的回调函数1.异步获取数据wx.getStorage()微信小程序中可以使用异步方法wx.getStorage()获取数据，传入保存数据的key值，在success回调函数的参数里就可得到数据。语法如下：wx.getStorage({key:'key',success(res){console.log(res.data)}})2.异步获取数据wx.getStorage()使用wx.removeStorage函数可以删除某一条数据，使用方式和wx.getStorage类似，在对象参数的属性里，传入需要删除的数据key即可.wx.removeStorage({key:'key',success(res){console.log(res.data)}})3.删除本地缓存数据如果要清空所有使用异步方式缓存的数据，可以使用wx.clearStorage()函数实现。//清空所有缓存（异步）wx.clearStorage({success:function(){console.log('所有数据已清空');}});4.清空本地缓存数据例7-1使用异步方式实现小程序存储、获取和删除数据例7-1使用异步方式实现小程序存储、获取和删除数据（1）在WXML文件中创建用户界面，包含一个输入框、两个按钮（保存和删除）以及一个显示区域。（2）在JS文件中实现存储和获取逻辑，在此处理用户输入、存储数据、获取数据和删除数据的功能。（3）样式文件（可选）可以在index.wxss中添加一些样式来美化界面：例7-1使用异步方式实现小程序存储、获取和删除数据程序说明：（1）输入数据：用户可以在输入框中输入用户名。（2）保存数据：点击“保存用户名”按钮会将输入的用户名保存到本地存储，并更新显示的内容。（3）获取数据：页面加载时，会自动从本地存储获取并显示用户名。（4）删除数据：点击“删除用户名”按钮会从本地存储中移除用户名，并清空显示结果。数据本地化注意事项在使用数据本地化存储技术时，需要注意以下问题：（1）数据大小限制：同一个微信用户，同一个小程序中可用的本地数据存储上限为10MB，单个key允许存储的最大数据长度为1MB。（2）异步操作：wx.setStorage()是异步的，因此如果需要在存储成功后执行某些操作，可以在success回调中处理。（3）错误处理：建议在fail回调中处理可能的错误，以便更好地管理异常情况。（3）数据存储是基于用户的，以用户维度隔离，同一台设备上，A用户无法读取到B用户数据，不同小程序之间也无法互相读写数据，保证了数据的安全性。同步方式存取本地数据Part03wx.setStorageSync()以同步方式存储数据到本地缓存，直接返回结果，无需通过回调函数处理。其中key是要存储的数据的键名（字符串），Value是要存储的数据内容（可以是任意类型，包括对象、数组等）。wx.setStorageSync()基本用法：try{wx.setStorageSync('key','value');console.log('数据存储成功');}catch(e){console.error('数据存储失败',e);1.同步存储数据wx.setStorage()wx.setStorageSync()参数说明参数

类型

说明key String 要存储数据的字段名（键），字符串类型。value Any 要存储的数据，可以是任何类型（如字符串、对象等）。1.同步存储数据wx.setStorage()要从本地存储中获取数据，可以使用wx.getStorageSync()方法。该方法接受一个参数key，表示要获取的值的键名（字符串）。返回值为存储在该键下的数据。如果没有找到对应的键，则会返回undefined。wx.getStorageSync()基本用法：constusername=wx.getStorageSync('key');2同步获取数据wx.getStorageSync()要从本地存储中删除数据，可以使用wx.removeStorageSync(key)方法。该方法只接受一个参数key，表示需要删除的值的键名（字符串）。wx.removeStorageSync()基本用法：wx.removeStorageSync('key');3删除数据wx.removeStorageSync()如果要清空所有缓存的数据，可以使用wx.clearStorageSync()函数实现。wx.clearStorageSync()函数用法：wx.clearStorageSync();//清空所有缓存（同步）4清空本地缓存数据wx.clearStorageSync()例7-2使用同步方式存储、获取和删除用户数据（1）在WXML文件中创建一个简单的用户信息展示界面，包含输入框用于输入用户信息、按钮用于保存数据，以及显示保存的信息。（2）在JS文件中实现存储和获取逻辑（3）样式文件（可选）可以在index.wxss中添加一些基本样式使用wx.setStorageSync()实现小程序中的数据存储和获取功能。由于是同步方法，存储和获取数据的过程会在同一线程下执行，因此相对简单易用。但需要注意应避免在小程序启动时进行过多的同步读写操作，以免影响启动速度。例7-2使用同步方式存储、获取和删除用户数据在微信小程序中，需要关注存储数据的有效期。通过设置定时器等方式来定期清理过期数据。（1）定时清理过期数据定时清理过期数据是一种常见的数据管理策略，用于自动删除不再需要的数据，以保持系统的整洁和性能。在微信小程序中，由于本地存储空间有限，合理管理存储数据尤为重要。（2）设置数据有效期在存储本地数据时，可以同时存储一个过期时间戳。在获取数据时，检查当前时间是否超过了这个时间戳，如果超过了则认为数据已过期。5.缓存数据的生命周期管理例7-3设置本地数据有效期和定时清理过期数据。实现：（1）在index.wxml中添加一个view用于显示username的值，两个按钮用于触发设置用户名有效期和定时清理过期数据。（2）在index.js文件中，单击“设置用户名有效期”可以向本地缓存一个变量，有效时间20秒，5秒后可以按“清理过期数据”按钮进行清理过期数据，也可以等待20秒后自动清除本地缓存。例7-3设置本地数据有效期和定时清理过期数据。6.同步与异步对比与选择特性wx.setStorageSync()wx.setStorage()存储方式同步存储异步存储返回值无（如果成功，不会返回任何结果，失败时抛出异常）返回一个Promise对象，可以通过.then()和.catch()处理结果阻塞行为会阻塞后续代码执行，直到存储完成不会阻塞后续代码，存储操作在后台进行使用场景需要立即确认的操作，例如读取配置、用户信息等数据量较大或不需要立即确认的操作，如批量数据存储等错误处理使用try-catch捕获异常可以使用Promise的.catch()方法处理错误本地存储的应用场景Part04本地存储常见应用场景：（1）用户偏好设置：保存用户的个性化设置，例如主题颜色、字体大小等，这样用户在每次打开小程序时都能获得一致的使用体验。（2）登录状态管理：存储用户的登录信息，以便在用户下次打开小程序时无须再次输入账号密码，从而提高用户体验。（3）缓存数据：在进行网络请求时，将获取到的数据缓存在本地，避免重复请求。例如，当用户浏览商品列表时，可以将已加载的商品信息存储下来，下次再查看时直接从本地读取，可用于实现购物车功能。（4）表单数据预填充：在用户填写表单时，可以临时保存用户的输入信息，避免因网络问题或用户误操作导致数据丢失。（5）游戏进度保存：对于小游戏开发者，可以利用本地存储保存玩家的游戏进度、分数等信息，让玩家在下次启动游戏时继续上次的进度。1.本地存储的应用场景通过合理运用本地存储的功能，开发者可以显著提升应用的性能和用户体验，同时减少对后端服务器的依赖。从而在保证数据安全性的前提下，为用户提供更加流畅的操作体验。2.缓存用户个性化设置实例(1)配置小程序页面路径（app.json）为保证程序的正常运行，需要在app.json文件中进行配置，在app.json中注册settingsPage和displayPage页面：{"pages":["pages/settingsPage/settingsPage","pages/displayPage/displayPage"],//其他配置...}例7-4实现用户字体颜色个性化设置并缓存该颜色设置。（2）配置颜色页面布局(settingsPage.wxml)设计一个配置字体颜色的页面，提供一个单选按钮组，其中有red、blue、green三种颜色，当选择颜色后将自动转到显示字体颜色页面displayPage，如图7-4所示。例7-4实现用户字体颜色个性化设置并缓存该颜色设置。（3）配置颜色页面逻辑(settingsPage.js)在配置颜色页面的逻辑页面settingsPage.js中，把选择的颜色借助wx.setStorageSync保存到本地。（4）显示颜色布局(displayPage.wxml)当在settingsPage颜色配置页面选择好颜色后，小程序将自动转到显示颜色displayPage页面（5）显示颜色逻辑(displayPage.js)displayPage页面上的文字颜色将通过wx.getStorageSync()从本地保存的key中读取出来例7-4实现用户字体颜色个性化设置并缓存该颜色设置。用户设置好颜色后，其他页面可以读取该颜色，实现页面颜色的统一设置，用户可以根据实际需求修改和扩展此示例。最终效果如图7-5所示：例7-4实现用户字体颜色个性化设置并缓存该颜色设置。1.数据加密策略：为确保敏感信息的安全性，应在存储前采用加密算法对数据进行加密处理，从而有效保护用户隐私。2.数据校验机制：在数据存入本地之前，可以附加版本号或生成校验码，这有助于后续验证数据的一致性和完整性，确保数据的有效性。3.空间管理规划：鉴于微信小程序本地存储存在空间限制，开发者需要合理规划存储的数据量，避免超出限制导致存储失败。4.异常处理方案：在利用异步存储API时，必须实现错误处理逻辑，以便在存储过程中遇到异常情况时能够妥善处理，提升应用的稳定性。5.性能优化措施：对于频繁访问的数据，推荐采用内存缓存技术，减少直接访问本地存储的次数，从而优化应用的运行性能。策略和技巧本章介绍了微信小程序同步和异步两种本地存储方式，分别使用wx.setStorageSync()和wx.setStorage()实现，在不同场景选择不同方式。当需要确保数据已被存储并且要立即处理后续逻辑时，使用wx.setStorageSync()；如果操作不依赖于存储结果，或者希望非阻塞地执行其他任务，则可以使用wx.setStorage()。由于wx.setStorageSync()是同步的，因此在大量数据存储时，可能会导致性能下降，而wx.setStorage()则可以更好地利用异步特性。根据具体需求选择合适的方法以优化性能和用户体验。总结：微信小程序用户认证与权限管理目录微信登录与用户信息获取用户授权和权限管理第三方登录集成和安全性考虑微信登录与用户信息获取Part01核心接口：wx.login()、wx.getUserInfo()。流程：调用wx.login()获取登录凭证（code）。使用code换取openid

和session_key。获取用户信息（如头像、昵称）。关键点：登录凭证有效期：5分钟。用户信息获取需用户授权。8.1微信登录与用户信息获取wx.login()参数说明8.1微信登录与用户信息获取–wx.login()接口属性类型默认值必填说明timeoutnumber

否超时时间限制，单位ms；设置好合理的退出机制是程序开发中的重要环节，能有效促进程序的运行效率，提升用户的使用体验。successfunction

否接口调用成功的回调函数，最关键的参数就是对象所返回的code参数，它可以被用来在服务器后台换取openid、unionid、session_key等关键信息。failfunction

否接口调用失败的回调函数，通常被用来返回errMsg和errno，分别代表造成调用失败的错误信息和错误代码。completefunction

否接口调用结束的回调函数，通常被用来放置后续的实际业务代码。无论本次调用是成功还是失败，plete回调的函数都会在接口调用结束后被执行。

一个常用的实现方法是先将显示头像的图片嵌入到页面上的一个<button>组件中，再设置此<button>组件的open-type属性为chooseAvatar。获取昵称则可以通过将<input>组件的type属性设置为nickname来实现。WXML部分示例如下：8.1微信登录与用户信息获取–获取用户头像和昵称<buttonopen-type="chooseAvatar"bindchooseavatar="WXAvatar"><imagesrc="{{avatarFile}}"/></button>JS部分示例如下：constdefaultPic=''//此处可插入未上传时的默认头像Page({data:{avatarFile:defaultPic},WXAvatar:function(e){//<button>中绑定的函数

const{avatarFile}=e.detail//在事件触发时

this.setData({avatarFile})//将新上传的图片动态渲染至页面上

}})在上述的代码中，我们通过bindchooseavatar绑定的自定义函数WXAvatar将事件对象中的e.detail动态更新至页面上<image>标签的src属性值，进而将获取到的用户微信头像设置为小程序的头像图片。wx.getUserInfo()参数说明8.1微信登录与用户信息获取–wx.getUserInfo()接口属性类型默认值必填说明withCredentialsboolean

否表示是否附带登录态信息；当本属性为true时，要求此前有调用wx.login且登录态尚未过期，此时返回的数据会包含encryptedData，iv等敏感信息；当本属性为false时，不要求有登录态，返回的数据不包含上述敏感信息。langstringen否显示用户的语言偏好信息，默认值未en，合法值还有zh_CN和zh_TW，分别代表简体中文和繁体中文。successfunction

否接口调用成功的回调函数。failfunction

否接口调用失败的回调函数。completefunction

否接口调用结束的回调函数，无论调用成功或失败都会执行。用户授权和权限管理Part02核心接口：wx.authorize()、wx.getSetting()、wx.openSetting()。流程：调用wx.authorize()申请权限。使用wx.getSetting()查询授权状态。通过wx.openSetting()管理权限。关键点：授权有效期：直到用户删除小程序。用户可随时调整授权状态。8.2用户授权和权限管理wx.authorize()参数说明8.2用户授权和权限管理–wx.authorize()接口属性类型默认值必填说明scopestring

是需要获取权限的scope，详细列表见表8-5successfunction

否接口调用成功的回调函数failfunction

否接口调用失败的回调函数completefunction

否接口调用结束的回调函数，无论成功或失败在开发人员可以利用的众多接口中，可能会有多个接口需要同一项授权来作为调用的先决条件，这一项授权的影响范围被称为它的scope。在调用wx.authorize()后开发者可以就某一个scope向用户发起授权申请，当用户通过该申请后，这个scope所对应的全部接口都可以被直接使用。以获取精确地理位置为例，申请授权并调用信息的代码如下：8.2用户授权和权限管理–wx.authorize()使用案例wx.authorize({scope:'scope.userLocation',//申请获得用户精确地理位置的授权success(){//在用户同意授权的条件下wx.getLocation()//调用用户精确地理位置接口}})wx.getSetting()参数说明8.2用户授权和权限管理–wx.getSetting()接口属性类型默认值必填说明withSubscriptionsBooleanfalse否是否同时获取用户订阅消息的订阅状态，默认不获取。注意：withSubscriptions只返回用户勾选过订阅面板中的“总是保持以上选择，不再询问”的订阅消息。successfunction

否接口调用成功的回调函数failfunction

否接口调用失败的回调函数completefunction

否接口调用结束的回调函数，无论成功或失败开发者可以通过调用此接口来查询用户是否已经授权了某个scope。通常可以在发起申请前事先调用以明确用户当前的授权状态，这样的设计可以有效增加程序的运行效率，确保只有在真正需要发起授权时再调用申请授权的接口。需要注意的是，wx.getSetting()的返回值中只会出现小程序已经向用户发起过了的授权申请。此接口的具体使用方法如下：8.2用户授权和权限管理–wx.getSetting()使用案例wx.getSetting({success(res){console.log(res.authSetting)if(!res.authSetting['scope.userLocation']){//此处判定通过则说明未申请过精确地理位置的授权，进而发起申请

wx.authorize({scope:'scope.record',success(){wx.getLocation()}})}}})wx.openSetting()参数说明8.2用户授权和权限管理–wx.openSetting()接口属性类型默认值必填说明withSubscriptionsBooleanfalse否是否同时获取用户订阅消息的订阅状态，默认不获取。注意：withSubscriptions只返回用户勾选过订阅面板中的“总是保持以上选择，不再询问”的订阅消息。successfunction

否接口调用成功的回调函数failfunction

否接口调用失败的回调函数completefunction

否接口调用结束的回调函数，无论成功或失败开发者可以通过此接口来弹出小程序设置界面并返回用户设置的操作结果。在弹出的设置界面上只会包含该小程序已经申请过的用户权限。用户同样可以在小程序设置选项中手动改写这些权限。

此接口的具体使用方法如下：8.2用户授权和权限管理–wx.openSetting()使用案例wx.openSetting({success(res){console.log(res.authSetting)}})上述代码通过调用wx.openSetting()弹出了小程序设置界面，并将返回结果输出在了控制台中。第三方登录集成和安全考虑Part03支持平台：QQ、微博等。流程：创建跳转页面，接入第三方平台接口。获取临时登录凭证，换取access_token

和openid。调用微信接口实现业务功能。注意事项：不同平台接入方式差异较大。需参考第三方平台开发文档。8.3第三方登录集成和安全考虑开发者可以通过集成第三方平台（如QQ）实现多账号登录。以下以QQ登录为例：注册QQ互联开放平台，获取AppID

和AppKey。下载QQ登录