UniApp跨平台开发实战：高性能图片懒加载与缓存优化方案

一、UniApp图片处理核心问题

跨平台开发中面临的图片处理挑战：

多平台路径差异（H5/base64、小程序临时路径）
长列表图片加载性能瓶颈
重复下载导致的流量浪费
不同平台缓存机制不统一

二、完整解决方案实现

1. 项目目录结构

uni-app-project/
├── components/
│   └── lazy-image/
│       ├── index.vue      # 懒加载组件
│       └── cache-manager.js # 缓存管理
├── pages/
│   └── product-list/
│       ├── index.vue      # 商品列表页
└── utils/
    └── image-helper.js   # 图片处理工具

2. 懒加载组件实现

<template>
  <view class="lazy-image">
    <image 
      v-if="loaded"
      :src="finalSrc" 
      :mode="mode"
      @load="handleLoad"
    />
    <view v-else class="placeholder" :style="placeholderStyle"></view>
  </view>
</template>

<script>
import cacheManager from './cache-manager'

export default {
  props: {
    src: String,
    mode: { type: String, default: 'aspectFill' },
    placeholder: { type: String, default: '#f5f5f5' }
  },
  data() {
    return {
      loaded: false,
      finalSrc: ''
    }
  },
  computed: {
    placeholderStyle() {
      return `background-color: ${this.placeholder};`
    }
  },
  mounted() {
    this.initImage()
  },
  methods: {
    async initImage() {
      // 优先检查缓存
      const cachedPath = await cacheManager.get(this.src)
      
      if (cachedPath) {
        this.finalSrc = cachedPath
        this.loaded = true
        return
      }
      
      // 视口检测
      this.$nextTick(() => {
        const observer = this.createObserver()
        observer.observe(this.$el)
      })
    },
    createObserver() {
      return uni.createIntersectionObserver(this).relativeToViewport({
        top: 500,
        bottom: 500
      }).observe('.lazy-image', res => {
        if (res.intersectionRatio > 0) {
          this.loadImage()
        }
      })
    },
    async loadImage() {
      try {
        // 下载并缓存图片
        const cachedPath = await cacheManager.download(this.src)
        this.finalSrc = cachedPath
        this.loaded = true
      } catch (error) {
        console.error('图片加载失败', error)
      }
    },
    handleLoad() {
      this.$emit('load')
    }
  }
}
</script>

3. 多平台缓存管理

// components/lazy-image/cache-manager.js
const CACHE_PREFIX = 'uni-img-cache-'

export default {
  async get(url) {
    try {
      // 小程序端使用文件系统缓存
      if (uni.getSystemInfoSync().platform !== 'h5') {
        const fileManager = wx.getFileSystemManager?.()
        const cachePath = `${wx.env.USER_DATA_PATH}/${CACHE_PREFIX}${md5(url)}`
        
        const exists = await new Promise(resolve => {
          fileManager?.access({
            path: cachePath,
            success: () => resolve(true),
            fail: () => resolve(false)
          })
        })
        
        return exists ? cachePath : null
      }
      
      // H5端使用localStorage记录缓存状态
      const cacheKey = CACHE_PREFIX + md5(url)
      return localStorage.getItem(cacheKey) || null
    } catch (error) {
      console.error('缓存读取失败', error)
      return null
    }
  },

  async download(url) {
    const cached = await this.get(url)
    if (cached) return cached
    
    // 小程序端下载文件到本地
    if (uni.getSystemInfoSync().platform !== 'h5') {
      const { tempFilePath } = await uni.downloadFile({ url })
      return tempFilePath
    }
    
    // H5端直接使用原地址
    localStorage.setItem(CACHE_PREFIX + md5(url), url)
    return url
  }
}