原文来自「微信开发者」公众号

技术研发团队一直致力于优化小程序性能体验。为了满足网络条件不佳的使用场景，小程序技术研发团队已上线多项能力，助力小程序体验提升：

• 启动小程序支持异步 Launch，使用默认本地缓存的配置、代码包来启动小程序，避免卡在 Loading 页面
• 支持弱网 / 离线一次性授权，在弱网周期内对授权类接口使用一次性弹窗授权，解决弱网或断网场景的授权请求问题
• 上线缓存管理器，支持对已缓存的网络请求及微信 API 调用使用缓存返回，减少重新调用的网络难题

相信不少开发者已熟知异步 Launch、弱网 / 离线一次性授权的方式，那么新上线的 缓存管理器 是什么？有什么作用？怎样接入能够有效解决弱网问题？下面就来探索缓存管理器的 “超能力” 吧！

缓存管理器 CacheManager 是实现数据缓存的其中一种方式，针对网络正常及网络异常情况分别进行缓存处理及缓存返回，减少弱网情况请求失败导致的小程序无法使用的问题。

在网络正常情况下，缓存管理器进行：

1. 缓存符合规则的网络请求
2. 缓存部分微信 API 调用

在网络异常情况下，缓存管理器则进行：

1. 对已缓存的网络请求使用缓存返回
2. 对已缓存的微信 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'
})

随着小程序应用场景越来越丰富，网络调优也是小程序性能体验的重要部分。通过缓存管理器，开发者仅需编写几行代码即可优化小程序的网络应用，提升用户体验。能力准备好了，还不快快来体验！

如有更多小程序的相关问题，可点击 微信开放社区小程序交流专区 发帖反馈，技术专员将为大家解答及进行深度交流。