F-Wallpaper 每日壁纸

一个基于 uni-app 开发的跨平台壁纸应用，提供精美壁纸浏览、下载、分类和评分功能。

📱 项目简介

f-Wallpaper 是一款功能丰富的壁纸应用，支持多端运行（微信小程序、H5、App等）。应用提供每日推荐壁纸、分类浏览、搜索、预览、下载、评分等核心功能。

github地址

🌁 项目截图

🎶 项目演示

手机浏览器扫码就可以访问了

✨ 主要功能

🏠 首页功能

• 轮播横幅：展示精选壁纸和活动推广
• 公告通知：滚动显示最新公告信息
• 每日推荐：基于日期的个性化壁纸推荐
• 专题精选：分类展示壁纸主题

🎨 分类浏览

• 网格布局：3列网格展示所有壁纸分类
• 分类详情：点击分类查看该类别下的所有壁纸
• 更新提示：显示分类最近更新时间

🔍 搜索功能

• 关键词搜索：支持按标签、描述等搜索壁纸
• 实时搜索：输入即时显示搜索结果

🖼️ 壁纸预览

• 全屏预览：沉浸式壁纸浏览体验
• 滑动切换：左右滑动浏览同类壁纸
• 详细信息：查看壁纸ID、发布者、评分、描述、标签等
• 评分系统：支持用户对壁纸进行评分
• 一键下载：快速保存壁纸到本地

👤 个人中心

• 用户信息：展示用户基本信息
• 历史记录：查看浏览和下载历史
• 设置选项：个性化设置

📢 公告系统

• 公告列表：查看所有公告信息
• 公告详情：查看具体公告内容

🛠️ 技术栈

前端框架

• uni-app：跨平台开发框架
• Vue 3：渐进式JavaScript框架
• SCSS：CSS预处理器

UI组件

• uni-ui：官方UI组件库
  • uni-icons：图标组件
  • uni-popup：弹窗组件
  • uni-rate：评分组件
  • uni-dateformat：日期格式化组件
  • uni-search-bar：搜索栏组件
  • uni-load-more：加载更多组件
  • uni-tag：标签组件
  • uni-transition：过渡动画组件
• uv-ui：第三方UI组件
  • uv-empty：空状态组件
  • uv-icon：图标组件

开发工具

• HBuilderX：官方IDE
• 微信开发者工具：小程序调试

📁 项目结构

sh
1f-wallpaper/
2├── api/                    # API接口
3│   └── apis.js            # 接口定义
4├── common/                # 公共资源
5│   ├── images/           # 图片资源
6│   └── style/            # 公共样式
7├── components/           # 自定义组件
8│   ├── common-title/     # 通用标题组件
9│   ├── custom-nav-bar/   # 自定义导航栏
10│   ├── theme-item/       # 主题项组件
11│   └── user-list/        # 用户列表组件
12├── pages/                # 页面文件
13│   ├── index/           # 首页
14│   ├── classify/        # 分类页
15│   ├── classList/       # 分类列表页
16│   ├── preview/         # 预览页
17│   ├── search/          # 搜索页
18│   ├── notice/          # 公告页
19│   └── user/            # 用户页
20├── static/              # 静态资源
21├── uni_modules/         # uni-app插件
22├── utils/               # 工具函数
23│   ├── common.js        # 通用工具
24│   ├── request.js       # 网络请求
25│   └── system.js        # 系统信息
26├── App.vue              # 应用入口
27├── main.js              # 主入口文件
28├── manifest.json        # 应用配置
29├── pages.json           # 页面配置
30└── uni.scss            # 全局样式

🔧 核心功能实现

网络请求封装

javascript
1// utils/request.js
2const BASE_URL = 'https://tea.qingnian8.com/api/bizhi';
3
4export function request(config = {}) {
5  // 统一请求处理，包含错误处理和loading
6}

主要API接口

• apiGetBanner() - 获取轮播图
• apiGetDayRandom() - 获取每日推荐
• apiGetClassify() - 获取分类列表
• apiGetClassList() - 获取分类壁纸
• apiDetailWall() - 获取壁纸详情
• apiWriteDownload() - 记录下载
• apiGetSetupScore() - 提交评分
• apiSearchData() - 搜索壁纸

自定义组件

自定义导航栏 (custom-nav-bar)

• 适配不同平台状态栏高度
• 集成搜索功能
• 渐变背景设计

主题项组件 (theme-item)

• 支持普通主题和"更多"按钮
• 显示更新时间标签
• 响应式布局

通用标题组件 (common-title)

• 支持插槽自定义内容
• 统一的标题样式

图片懒加载优化

1. 核心数据结构

javascript
1const readImgs = ref([]);  // 存储需要加载的图片索引数组
2const currentIndex = ref(0);  // 当前显示的图片索引
3const classList = ref([]);  // 图片列表数据

2. 懒加载核心算法

关键函数：readImgsFun()

javascript
1const readImgsFun = () => {
2	// 加载前一张图、当前图和后一张图
3	// 减少网络消耗，同时优化用户体验
4	readImgs.value.push(
5		currentIndex.value <= 0 ? classList.value.length - 1 : currentIndex.value - 1,  // 前一张
6		currentIndex.value,  // 当前
7		currentIndex.value >= classList.value.length - 1 ? 0 : currentIndex.value + 1   // 后一张
8	);
9	// 去重
10	readImgs.value = [...new Set(readImgs.value)];
11};

算法特点：

• 预加载策略：只加载当前图片及其前后各一张，共3张图片
• 循环处理：支持首尾循环，第一张的前一张是最后一张，最后一张的后一张是第一张
• 去重优化：使用Set去重，避免重复加载同一张图片

3. 模板层条件渲染

vue
1<swiper circular :current="currentIndex" @change="swiperChange">
2	<swiper-item v-for="(item, index) in classList" :key="item._id">
3		<image :src="item.picurl" mode="aspectFill" @click="maskChange" 
4		       v-if="readImgs.includes(index)"></image>
5	</swiper-item>
6</swiper>

关键实现：

• v-if="readImgs.includes(index)"：只有当图片索引在readImgs数组中时才渲染image标签
• 未加载的图片不会创建DOM节点，完全避免网络请求

4. 触发时机

初始化加载

javascript
1onLoad(async (e) => {
2	// ... 其他逻辑
3	currentIndex.value = classList.value.findIndex((item) => item._id === currentId.value);
4	currentInfo.value = classList.value[currentIndex.value];
5	readImgsFun();  // 初始化时调用
6});

滑动切换加载

javascript
1const swiperChange = (e) => {
2	currentIndex.value = e.detail.current;
3	currentInfo.value = classList.value[currentIndex.value];
4	readImgsFun();  // 每次滑动时调用
5};

5. 图片格式优化

javascript
1classList.value = storageClassList.map((item) => {
2	return {
3		...item,
4		picurl: item.smallPicurl.replace('_small.webp', '.jpg')  // 预览时使用高清jpg格式
5	};
6});

优化策略：

• 列表页使用小尺寸webp格式（smallPicurl）
• 预览页动态替换为高清jpg格式（picurl）
• 根据使用场景选择合适的图片格式和尺寸

工具函数

时间处理 (utils/common.js)

javascript
1export function compareTimestamp(timestamp) {
2  // 计算时间差
3}
4
5export function debounce(func, delay, immediate = false) {
6  // 防抖函数实现
7}

系统信息 (utils/system.js)

javascript
1export const getStatusBarHeight = () => {...}  // 获取状态栏高度
2export const getTitleBarHeight = () => {...}   // 获取标题栏高度
3export const getNavBarHeight = () => {...}     // 获取导航栏总高度

响应式布局

• 分类页面采用3列网格布局
• 首页推荐采用横向滚动
• 适配不同屏幕尺寸

交互动画

• 轮播图自动播放
• 公告垂直滚动
• 页面切换动画
• 组件过渡效果

🚀 快速开始

环境要求

• HBuilderX 3.0+
• Node.js 14+
• 微信开发者工具（小程序开发）

安装步骤

1. 克隆项目

bash
1git clone [项目地址]
2cd f-wallpaper

2. 使用HBuilderX打开项目

   • 打开HBuilderX
   • 文件 → 打开目录 → 选择项目文件夹

3. 配置API密钥

javascript
1// utils/request.js
2header['access-key'] = "你的API密钥"

4. 运行项目
   • 微信小程序：运行 → 运行到小程序模拟器 → 微信开发者工具
   • H5：运行 → 运行到浏览器 → Chrome
   • App：运行 → 运行到手机或模拟器

📱 支持平台

• ✅ 微信小程序
• ✅ H5
• ✅ Android App
• ✅ iOS App
• ✅ 支付宝小程序
• ✅ 字节跳动小程序
• ✅ QQ小程序

🔑 API说明

项目使用的是测试API接口，正式使用需要：

1. 注册获取API密钥：https://api.qingnian8.com/apis/
2. 替换 utils/request.js 中的 access-key
3. 根据实际API文档调整接口参数

📄 页面配置

pages.json 主要配置

json
1{
2  "pages": [
3    {
4      "path": "pages/index/index",
5      "style": {
6        "navigationBarTitleText": "每日壁纸"
7      }
8    }
9    // ... 其他页面配置
10  ],
11  "tabBar": {
12    // 底部导航配置
13  }
14}

manifest.json 应用配置

• 应用名称、版本号
• 平台特定配置
• 权限申请
• 图标配置

🎯 功能亮点

1. 跨平台兼容：一套代码多端运行
2. 组件化开发：高度复用的自定义组件
3. 响应式设计：适配不同设备屏幕
4. 性能优化：图片懒加载、防抖处理
5. 用户体验：流畅的动画和交互
6. 错误处理：完善的异常处理机制

网络接口地址

接口来自网络收集：网络接口 如果key过期了，需要自行登录获取key