mtsd/docs/miniprogram-image-loading-checklist.md

miniprogram 图片加载分级固定清单

本文档用于统一 miniprogram 的图片渲染策略，避免后续页面反复调整。

分级规则（固定）

• 使用 ClientImageLoader：
  • 商品主图、商品详情图、商品轮播图
  • 用户头像
  • 凭证/回执/证据类图片（取货凭证、送达凭证、备货凭证）
  • 影响决策的业务缩略图（如分类商品图、订单商品图）
• 保留原生 <image>：
  • 纯装饰图（如水印、背景装饰）
  • 小尺寸功能 icon（如删除 icon、箭头 icon、工具 icon）
  • 空状态插画（empty 图）
  • 本地静态资源且体积小、加载几乎无感知的图标

推荐判定口径

• >= 96rpx 且为主要视觉内容：优先 ClientImageLoader
• <= 48rpx 且为装饰/操作 icon：优先 <image>
• 用户会等待其内容出现（影响阅读/决策）：ClientImageLoader
• 用户不会关注加载过程（只作点缀）：<image>

当前已接入 ClientImageLoader 的页面（扫描结果）

• 客户端：
  • miniprogram/src/pages/client/home/home.vue
  • miniprogram/src/pages/client/cart/cart.vue
  • miniprogram/src/pages/client/order/order.vue
  • miniprogram/src/pages/client/order/detail/detail.vue
  • miniprogram/src/pages/client/order/create/create.vue
  • miniprogram/src/pages/client/product/view.vue
  • miniprogram/src/pages/client/product/detail.vue
  • miniprogram/src/pages/client/review/list.vue
  • miniprogram/src/pages/client/review/create.vue
  • miniprogram/src/pages/client/profile/profile.vue
• 供应商端：
  • miniprogram/src/pages/supplier/home/home.vue
  • miniprogram/src/pages/supplier/inquiry/inquiry.vue
  • miniprogram/src/pages/supplier/delivery/delivery.vue
  • miniprogram/src/pages/supplier/delivery/detail/detail.vue
  • miniprogram/src/pages/supplier/product/detail.vue
  • miniprogram/src/pages/supplier/profile/profile.vue
• 配送员端：
  • miniprogram/src/pages/deliverer/home/home.vue
  • miniprogram/src/pages/deliverer/task/detail/detail.vue
  • miniprogram/src/pages/deliverer/profile/profile.vue

执行约束（后续改动必须遵守）

• 新页面或改版页面，先按本清单决定图片类型，再编码。
• 如果需要偏离清单，先在 PR/变更说明中写清原因（性能、交互、视觉优先级）。
• 禁止把全页面所有 <image> 一刀切替换为 ClientImageLoader。
• 禁止把关键业务图（商品/凭证/头像）回退为纯 <image>。