图片迁移检查清单

✅ 已完成的工作

1. 创建图片工具

✅ 创建 src/utils/imageHelper.ts 工具类
✅ 配置预定义图片映射 BIG_IMAGES
✅ 提供多种使用方式：getBigImage(), getBigImageUrl(), getBigImagesUrl()
✅ 添加图片预加载功能 preloadImages()

2. 更新代码引用

✅ src/components/EmptyData/index.tsx - 空数据组件
✅ src/pages/index/index.tsx - 首页轮播图和卡片
✅ src/pages/user/index.tsx - 用户页面背景
✅ src/pageStore/storeDetail/index.tsx - 门店详情轮播图
✅ src/pages/message/index.tsx - 消息页面图片和空数据
✅ src/pagesUser/orderList/index.tsx - 订单列表空数据
✅ src/pagesOrder/rechargeDetail/index.tsx - 充值详情空数据
✅ src/pagesOrder/accountBalance/components/OpenRecordList.tsx - 开台记录空数据
✅ src/pagesOrder/accountBalance/components/RechargeRecordList.tsx - 充值记录空数据
✅ src/pagesOrder/accountBalance/components/BalanceList.tsx - 余额记录空数据

3. 构建测试

✅ 修复所有语法错误
✅ 成功构建微信小程序
✅ 生成的代码正确使用图片工具

🔄 需要你完成的工作

1. 服务器图片检查

确保以下图片已上传到服务器 http://39.101.75.71:8888/img/MiniBgImage/：

noData.png - 空数据占位图
swBG.png - 轮播背景图
user_bg.png - 用户页面背景
fjmd.png - 附近门店功能图
smkt.png - 扫码开台功能图
tghx.png - 团购核销功能图

2. 图片访问测试

在浏览器中测试以下 URL 是否可以正常访问：

3. 小程序测试

在微信开发者工具中预览小程序
检查所有页面的图片是否正常显示
测试网络较慢时的图片加载体验
检查图片加载失败时的表现

4. 性能优化（可选）

在 app.tsx 中添加关键图片预加载
为图片组件添加 onError 错误处理
考虑添加图片懒加载

📝 使用示例

基础用法

import { getBigImage } from '@/utils/imageHelper'

// 在组件中使用
<Image src={getBigImage('NO_DATA')} mode="aspectFit" />

预加载关键图片

import { preloadImages, getBigImage } from '@/utils/imageHelper'

// 在应用启动时预加载
const keyImages = [
  getBigImage('NO_DATA'),
  getBigImage('SW_BG'),
  getBigImage('USER_BG')
]

preloadImages(keyImages).then(() => {
  console.log('关键图片预加载完成')
})

添加新图片

上传图片到服务器：http://39.101.75.71:8888/img/MiniBgImage/新图片.png
在 BIG_IMAGES 中添加映射：

export const BIG_IMAGES = {
  // 现有图片...
  NEW_IMAGE: '新图片.png',
} as const

在代码中使用：getBigImage('NEW_IMAGE')

⚠️ 注意事项

网络依赖：图片加载现在依赖网络，首次加载会有延迟
缓存机制：小程序会自动缓存网络图片
错误处理：建议为重要图片添加加载失败的兜底处理
包体积：本地大图已移除，小程序包体积显著减少

🚀 预期收益

✅ 包体积减少：移除本地大图，预计减少包体积 500KB+
✅ 便于管理：图片统一在服务器管理，更新无需重新发布
✅ 加载灵活：可以动态更新图片内容
✅ 代码整洁：统一的图片引用方式，便于维护

3.8 KiB Raw Blame History Unescape Escape

图片迁移检查清单

✅ 已完成的工作

1. 创建图片工具

2. 更新代码引用

3. 构建测试

🔄 需要你完成的工作

1. 服务器图片检查

2. 图片访问测试

3. 小程序测试

4. 性能优化（可选）

📝 使用示例

基础用法

预加载关键图片

添加新图片

⚠️ 注意事项

🚀 预期收益

3.8 KiB

Raw Blame History Unescape Escape