📱 项目概述：小虾米壁纸小程序

1. 背景

项目定位：一款基于 uni-app 框架开发的壁纸分享小程序，为用户提供海量精美壁纸的浏览、下载、评分和分享功能。

技术背景：

• 采用 Vue 3 (script setup) 语法，配合 uni-app 跨端框架
• 目标平台：微信小程序 + H5
• 使用 SCSS 进行样式开发

业务需求：

• 首页推荐：轮播图、公告、每日推荐、专题精选
• 分类浏览：按分类查看壁纸列表
• 预览详情：大图预览、评分、下载、分享
• 用户中心：下载记录、评分记录、联系客服
• 搜索功能：关键词搜索、历史记录、热门推荐

---

2. 方案

架构设计：

┌─────────────────────────────────────┐
│           页面层 (Pages)            │
│  index | classify | user | preview  │
│  classlist | notice | search        │
├─────────────────────────────────────┤
│           组件层 (Components)       │
│  custom-nav-bar | theme-item        │
│  common-title                       │
├─────────────────────────────────────┤
│           数据层 (API)              │
│  apis.js → request.js → 后端接口    │
├─────────────────────────────────────┤
│           工具层 (Utils)            │
│  system.js | common.js | request.js │
└─────────────────────────────────────┘

核心技术方案：

• 数据请求：封装 request.js 统一处理 API 调用，包含错误处理和 errCode 判断
• 状态管理：使用 uni.setStorageSync 缓存壁纸列表 (storgClassList)，解决跨页面数据传递
• 图片处理：缩略图 (smallPicurl) 和大图 (picurl) 分离，预览页动态替换路径
• 分享功能：支持好友分享和朋友圈分享，处理分享参数传递

---

3. 实施（关键技术点）

3.1 页面路由与参数传递

• 首页 → 预览页：通过 goPreview 函数合并缓存数据后跳转
• 分类页 → 列表页：携带 id 和 name 参数
• 分享入口：通过 type=share 参数区分来源，动态请求单张壁纸数据

3.2 图片预加载策略（preview.vue）

// 预加载当前图片和前后各一张
const indices = [
  currentIndex.value - 1,
  currentIndex.value,
  currentIndex.value + 1,
].filter(i => i >= 0 && i < classifylist.value.length);
readImgs.value = [...new Set([...readImgs.value, ...indices])];

3.3 评分功能实现

• 通过 uni-rate 组件实现评分交互
• 评分后更新缓存，确保下次打开页面显示已评分状态
• 使用 userScore 和 isScore 状态管理评分状态

3.4 文件下载与相册保存

• 调用 uni.getImageInfo 获取图片临时路径
• 使用 uni.saveImageToPhotosAlbum 保存到相册
• 处理授权失败场景，引导用户开启权限

3.5 搜索功能

• 本地缓存搜索历史（最多10条）
• 支持热门搜索标签快捷搜索
• 分页加载搜索结果

3.6 响应式工具函数

• system.js：获取状态栏高度、导航栏高度，适配不同机型
• common.js：时间戳转换、页面跳转工具

---

4. 效果

功能完整性：

• ✅ 首页轮播图、公告滚动、每日推荐、专题精选
• ✅ 分类浏览、瀑布流展示
• ✅ 壁纸预览、评分、下载
• ✅ 用户中心、下载/评分记录
• ✅ 搜索、分享功能

交互体验：

• 图片预加载提升滑动流畅度
• 分享参数自动传递，支持从朋友圈直接打开
• 评分状态缓存，避免重复评分
• 下拉刷新、上拉加载更多

技术亮点：

• uni-app 条件编译适配 H5 和小程序
• 自定义导航栏适配不同机型
• 统一的 API 请求封装和错误处理

---

🔑 项目重难点

难点一：跨页面数据传递与缓存同步

• 问题：预览页需要显示壁纸列表，且需保留用户评分状态
• 解决方案：使用 uni.setStorageSync 缓存列表数据，每次跳转前合并缓存中的评分信息
• 关键代码：index.vue:89-106、classlist.vue:55-67

难点二：图片预加载与性能优化

• 问题：大图预览滑动时可能出现白屏
• 解决方案：通过 readImgs 数组控制图片懒加载，只加载当前和前后各一张
• 关键代码：preview.vue:192-197、preview.vue:271-276

难点三：分享功能的参数传递

• 问题：朋友圈分享无法传递对象参数
• 解决方案：使用 query 字符串传递参数，预览页通过 onLoad 接收并判断来源
• 关键代码：preview.vue:164-188、preview.vue:356-360

难点四：导航栏高度适配

• 问题：不同机型状态栏高度不同，自定义导航栏需要动态计算
• 解决方案：通过 uni.getSystemInfoSync 和 uni.getMenuButtonBoundingClientRect 获取准确高度
• 关键代码：system.js

难点五：文件下载与权限处理

• 问题：保存图片到相册需要用户授权，授权失败需要引导
• 解决方案：捕获授权失败错误，弹出引导用户开启权限
• 关键代码：preview.vue:297-343

---

✨ 项目亮点

亮点一：完整的分享体系

• 支持好友分享和朋友圈分享两种方式
• 分享参数自动拼接，从分享链接打开能正确定位到对应壁纸
• onShareTimeline 的 query 参数处理符合微信规范

亮点二：智能缓存策略

• 壁纸列表缓存到本地，减少重复请求
• 评分状态与列表数据合并，保证数据一致性
• 页面卸载时清除缓存，避免内存泄漏

亮点三：用户体验优化

• 图片懒加载和预加载结合，提升滑动流畅度
• 自定义导航栏适配各种机型
• 平滑的页面过渡和交互反馈

亮点四：模块化代码结构

• API 统一封装，便于维护和扩展
• 工具函数抽离，提高代码复用性
• SCSS 公共样式变量，保持风格统一

亮点五：跨平台兼容性

• 使用条件编译处理 H5 和小程序差异
• 微信原生 API 替代 uni API 解决兼容性问题（如 uni.reLaunch）

---

📊 项目技术栈总结

层次	技术	说明
框架	uni-app + Vue 3	跨端开发，script setup 语法
UI 组件	uv-ui + mp-html	基础组件和富文本渲染
样式	SCSS	变量、混合、嵌套
数据请求	原生 uni.request	封装统一请求函数
状态管理	uni.storage	本地缓存
图标	uni-icons	内置图标库

---