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

2024-07-11 22:22| 来源: 网络整理| 查看: 265

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

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

启动小程序支持异步 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' })

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

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

【本文地址】

公司简介

联系我们