网络太差打不开？小程序丝滑打开方法大揭秘
进地铁打不开健康码小程序，赶着上班真的好扎心
地下停车场网络好差，停车缴费小程序等好久
宝宝心里苦😭我们更新了好几种网络优化的能力，开发者按照下面的 tips 优化，网络问题能够优化不少！
技术研发团队一直致力于优化小程序性能体验。为了满足网络条件不佳的使用场景，小程序技术研发团队已上线多项能力，助力小程序体验提升：
- 启动小程序支持异步 Launch，使用默认本地缓存的配置、代码包来启动小程序，避免卡在 Loading 页面
- 支持弱网 / 离线一次性授权，在弱网周期内对授权类接口使用一次性弹窗授权，解决弱网或断网场景的授权请求问题
- 上线缓存管理器，支持对已缓存的网络请求及微信 API 调用使用缓存返回，减少重新调用的网络难题
相信不少开发者已熟知异步 Launch、弱网 / 离线一次性授权的方式，那么新上线的 缓存管理器 是什么？有什么作用？怎样接入能够有效解决弱网问题？下面就来探索缓存管理器的 “超能力” 吧！
缓存管理器有什么作用
缓存管理器 CacheManager 是实现数据缓存的其中一种方式，针对网络正常及网络异常情况分别进行缓存处理及缓存返回，减少弱网情况请求失败导致的小程序无法使用的问题。
在网络正常情况下，缓存管理器进行：
- 缓存符合规则的网络请求
- 缓存部分微信 API 调用
在网络异常情况下，缓存管理器则进行：
- 对已缓存的网络请求使用缓存返回
- 对已缓存的微信 API 的调用使用缓存返回
如何接入缓存管理器
接入缓存管理器的过程也非常简便。通过编写几行代码即可快速接入——
Step 1: 创建缓存管理器
使用 wx.createCacheManager 创建缓存管理器。缓存管理器全局只有唯一实例，一旦被成功创建出来即表示接入成功。默认支持缓存 login、checkSession、getSetting 等接口，将上次成功调用的结果进行返回，接口本身的逻辑并不会改动。
const cacheManager = wx.createCacheManager({ // 全局 origin origin: 'https://weixin.qq.com/',
// 缓存有效时间，设置 7 天，最长 30 天 maxAge: 7*24*60*60*1000})
Step 2: 添加请求规则
开发者需要使用 CacheManager.addRule 添加请求规则，用来匹配哪些请求需要被缓存，不在请求规则内的请求将被自动放过。一旦请求命中规则，则在网络通畅时会对结果进行缓存，在弱网时会拦截请求，然后触发 request 事件给开发者。
// 添加请求规则，支持 3 种写法// 1. 字符串写法cacheManager.addRules([ '/cgi/home', '/cgi/detail/:id',])
// 2. 正则写法cacheManager.addRule(/\/(abc|cba)$/ig)
// 3. 对象写法cacheManager.addRule({ method: 'POST', url: '/abc', dataSchema: [ {name: 'param1', schema: {value: /(aaa|bbb)/ig}}, {name: 'param2', schema: {value: '123'}}, ],})
Step 3: 监听符合规则的 request 请求
设置规则后，进入监听 request 请求的环节。开发者可以在事件回调中决定是否使用缓存返回。如果使用缓存返回，则不会再发起网络请求。
// 监听符合规则的 wx.request 请求，默认在弱网时调用 wx.request 即会触发cacheManager.on('request', evt => { // evt.request - 原始 request 方法，返回一个 promise return new Promise((resolve, reject) => { // 匹配是否存在缓存 const matchRes = cacheManager.match(evt)
if (matchRes && matchRes.data) { // 使用缓存返回 resolve(matchRes.data) } else { // 没有匹配到缓存 reject({errMsg: `catch not found: ${evt.url}`}) } })})
云托管使用场景
除普通请求外，通过微信云托管 wx.cloud.callContainer 调用的接口也支持规则配置，实现网络调优。值得注意的是： addRule 参数中的 URL 字段需要遵循以下统一规范，否则将无法应用于云托管场景：
https://wx.cloud.callContainer/env/servicename/path
const res = await wx.cloud.callContainer({ config: { env: 'test-123' // env }, path: '/api/count', // path header: { 'X-WX-SERVICE': 'express-server', // servicename 'content-type': 'application/json' }, method: 'GET', data: { action: 'inc' },})
// 添加缓存规则cacheManager.addRule({ // env: 'test-123' // servicename: 'express-server' // path: '/api/count' url: 'https://wx.cloud.callContainer/test-123/express-server/api/count', method: 'get'})
随着小程序应用场景越来越丰富，网络调优也是小程序性能体验的重要部分。通过缓存管理器，开发者仅需编写几行代码即可优化小程序的网络应用，提升用户体验。能力准备好了，还不快快来体验！
如有更多小程序的相关问题，可点击 微信开放社区小程序交流专区 发帖反馈，技术专员将为大家解答及进行深度交流。
本文分享自 腾讯云开发CloudBase 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！