当前位置：首页 > uni-app

uniapp 壁纸

2026-02-05 18:34:15uni-app

在 uniapp 中设置壁纸的方法

在 uniapp 中设置壁纸通常涉及动态修改页面背景或全屏背景。以下是几种常见的方法：

动态修改页面背景 通过 CSS 样式动态修改页面背景，适用于局部或全局背景设置：

.page {
  background-image: url('/static/wallpaper.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

// 动态修改背景
uni.setStorageSync('wallpaper', 'new_wallpaper.jpg');
let currentWallpaper = uni.getStorageSync('wallpaper') || 'default.jpg';
document.querySelector('.page').style.backgroundImage = `url(/static/${currentWallpaper})`;

全屏背景组件 创建一个全屏背景组件，通过 props 传递壁纸路径：

<template>
  <view class="fullscreen-wallpaper" :style="{backgroundImage: `url(${src})`}"></view>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: '/static/default.jpg'
    }
  }
}
</script>

<style>
.fullscreen-wallpaper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: cover;
}
</style>

实现壁纸切换功能

本地壁纸切换 将壁纸资源放在 static 目录下，通过按钮切换：

<template>
  <view>
    <image v-for="img in wallpapers" :src="img" @click="setWallpaper(img)"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      wallpapers: [
        '/static/wallpaper1.jpg',
        '/static/wallpaper2.jpg'
      ]
    }
  },
  methods: {
    setWallpaper(img) {
      uni.setStorageSync('currentWallpaper', img);
      this.$emit('change', img);
    }
  }
}
</script>

网络壁纸加载 从网络加载壁纸并缓存到本地：

function downloadWallpaper(url) {
  uni.downloadFile({
    url: url,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (savedRes) => {
            uni.setStorageSync('wallpaper', savedRes.savedFilePath);
          }
        });
      }
    }
  });
}

注意事项

性能优化 大尺寸壁纸可能导致内存问题，建议：

压缩壁纸图片尺寸
使用 webp 格式减小体积
实现懒加载机制

平台差异 不同平台对背景设置有限制：

小程序可能无法直接设置全屏背景
APP 端需要处理文件系统权限
H5 需考虑跨域问题

缓存策略 用户自定义壁纸应持久化存储：

// 启动时加载缓存壁纸
onLaunch() {
  let wallpaper = uni.getStorageSync('wallpaper');
  if (!wallpaper) {
    wallpaper = '/static/default.jpg';
    uni.setStorageSync('wallpaper', wallpaper);
  }
  applyWallpaper(wallpaper);
}

以上方法可根据具体需求组合使用，实现完整的壁纸功能。注意测试各平台兼容性并根据实际效果调整实现方案。

uniapp 壁纸