ReaderMX.
微信开发者

网络太差打不开？小程序丝滑打开方法大揭秘

微微信团队约 4 分钟
Image

进地铁打不开健康码小程序，赶着上班真的好扎心

Image

地下停车场网络好差，停车缴费小程序等好久

宝宝心里苦😭我们更新了好几种网络优化的能力，开发者按照下面的 tips 优化，网络问题能够优化不少！

Image
技术研发团队一直致力于优化小程序性能体验。为了满足网络条件不佳的使用场景，小程序技术研发团队已上线多项能力，助力小程序体验提升：
  • 启动小程序支持异步 Launch，使用默认本地缓存的配置、代码包来启动小程序，避免卡在 Loading 页面
  • 支持弱网 / 离线一次性授权，在弱网周期内对授权类接口使用一次性弹窗授权，解决弱网或断网场景的授权请求问题
  • 上线缓存管理器，支持对已缓存的网络请求及微信 API 调用使用缓存返回，减少重新调用的网络难题
相信不少开发者已熟知异步 Launch、弱网 / 离线一次性授权的方式，那么新上线的 缓存管理器 是什么？有什么作用？怎样接入能够有效解决弱网问题？下面就来探索缓存管理器的 “超能力” 吧！
Image

缓存管理器有什么作用

缓存管理器 CacheManager 是实现数据缓存的其中一种方式，针对网络正常及网络异常情况分别进行缓存处理及缓存返回，减少弱网情况请求失败导致的小程序无法使用的问题。
在网络正常情况下，缓存管理器进行：
  1. 缓存符合规则的网络请求
  2. 缓存部分微信 API 调用
在网络异常情况下，缓存管理器则进行：
  1. 对已缓存的网络请求使用缓存返回
  2. 对已缓存的微信 API 的调用使用缓存返回
Image

如何接入缓存管理器

接入缓存管理器的过程也非常简便。通过编写几行代码即可快速接入——
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'})
Image

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

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

KEEP THE THREAD GOING

更多来源文章