项目概述小虾米壁纸小程序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参数分享入口通过typeshare参数区分来源动态请求单张壁纸数据3.2 图片预加载策略preview.vue// 预加载当前图片和前后各一张constindices[currentIndex.value-1,currentIndex.value,currentIndex.value1,].filter(ii0iclassifylist.value.length);readImgs.value[...newSet([...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内置图标库