小程序弱网与离线体验怎么做：6项缓存与重试配置

弱网卡顿的根因是什么？先改请求，再改界面

结论：小程序在弱网下的卡顿，通常来自请求次数过多、超时时间过长、失败后缺少兜底，而不是带宽本身。优先把首屏请求压到 3 个以内、单请求超时设为 8 秒，再做界面降级。

很多团队第一反应是加 loading 动画，但动画只掩盖等待。有效顺序是：减少请求 → 缩短超时 → 加重试兜底 → 再做视觉提示。

要区分两类场景：高延迟与断网。前者靠超时与重试解决，后者靠本地缓存与离线队列解决，两者配置逻辑不同。

本地缓存该存什么？按 6 类数据分优先级

结论：缓存不是越多越好，按变更频率和重要性分级，一般只缓存读多写少的数据。

1. 首页栏目与分类：变更频率低，通常缓存 30 分钟，启动先渲染本地副本
2. 用户身份与门店信息：写入本地，避免每次启动都拉取
3. 详情正文：按内容 id 缓存，二次打开接近秒开
4. 表单草稿：输入即存本地，网络中断也不丢内容
5. 图片资源：列表页用 CDN 缩略图，详情页再按需加载原图
6. 运营配置开关：如首页活动位，支持后台下发并带过期时间

提示：缓存必须带版本号或过期时间，只存不失效会导致后台改了内容用户端看不到。

请求超时与重试怎么配？给一组可直接用的数值

结论：超时和重试必须有明确数值，不配置就等于把结果交给网络赌运气。

• 普通读接口超时一般设 8 秒，上传类接口可放宽到 30 秒
• 重试次数通常 1 到 2 次，只对超时与 5xx 重试，4xx 不重试
• 重试间隔按 1 秒、2 秒递增，避免瞬间放大请求把服务打垮
• 并发请求数一般限制在 6 个以内，超出的排队执行

以微信官方文档最新说明为准：wx.request 默认超时时间较长，建议显式配置 timeout，并用 wx.onNetworkStatusChange 监听网络变化、恢复后主动刷新数据。

断网提交失败怎么兜底？用离线队列

结论：任何会修改数据的提交动作，都要能在断网时先落到本地队列，再自动重投。

1. 表单提交先写入本地队列，状态标记为「待发送」
2. 监听到网络恢复后，按时间顺序自动重投
3. 重投必须带幂等标识，避免重复下单或重复留言
4. 队列保留时长一般设为 24 小时，超时提醒用户手动重试
5. 每条重投结果给出明确回执，成功或失败都让用户知道

弱网提示与降级怎么设计？让用户知道发生了什么

结论：弱网体验的底线是「不白屏、不无限转圈、不让用户猜」。

• 加载超过 2 秒显示骨架屏，超过 8 秒给出「网络较慢」提示与重试按钮
• 图片加载失败显示占位图，不要留空白区域
• 推荐位等非核心模块失败时直接隐藏，不阻塞首屏渲染
• 提交失败给出「已保存，网络恢复后自动提交」这类确定性文案

玉晗网络（安徽安庆）在做微信小程序开发时，会把上述缓存、超时、重试与降级配置写进开发清单，并在电梯、地下车库等真实弱网场景逐一验证。如果你的小程序存在打开慢、提交丢失的问题，可先从请求次数与超时配置查起，也可在官网咨询表单里留下页面链接，我们按清单做一次弱网体验排查。