简介基于Uniapp开发的壁纸小程序源码支持微信与抖音双端运行面向小程序开发者、独立创业者和运营人员解决从零搭建壁纸应用时前端展示、用户交互、图片分类管理与接口对接等核心问题。rar压缩包内共709个文件、约1.72MB以281个js逻辑文件、119个vue页面组件、82个php后端接口为主另含40个json配置、31个wxml、29个wxss及20个scss样式文件工程结构完整可直接对照学习双端小程序前后端协作方式。目前已有158人学习/下载适合希望快速上手Uniapp跨端开发、或需要一套可运行源码作参考的初中级开发者。包内包含完整代码、png/gif等图片素材、使用说明html和静态样式库目录布局清晰便于单独抽取页面或接口复用在此基础上可继续完善个性化推荐、用户上传与安全防护等模块借助微信社交生态和抖音流量入口降低双端产品上线与试错成本。1. 从 .rar 到双端上架这套壁纸小程序源码到底在解决什么问题你从某个下载站拉回一个几十 MB 的 .rar解压后看到 pages、static、manifest.json、uni.scss 这些目录就知道这是一个 Uniapp 工程。壁纸小程序这个品类在微信和抖音上都很适合跑内容消费属性强、图片即内容、分享裂变路径短而且后端可以只做静态资源托管开发成本压在客户端。用 Uniapp 写一套代码同时输出微信小程序和抖音小程序是这类项目最常见的落地姿势。源码包的标题里写“双端”意味着代码里一定做了平台判断或条件编译而不是两套代码各写一遍。这篇文章不评价那份 rar 的质量只讲清楚当你拿到这样一份代码、或者打算自己搭一个同款工程时从工程结构、双端差异、核心功能到打包上架每一步该怎么做、参数怎么设、坑在哪里。适合接过外包、自己跑副业或者刚入门小程序想找一个完整练手项目的开发者。2. 双端能力差异与 Uniapp 的适配边界先看清微信和抖音哪里不一样2.1 微信与抖音开放能力对比核心 API 能平替边界在账号体系做双端小程序第一件事是问清楚微信有的能力抖音是不是都有直接看对照表比猜靠谱。能力微信小程序抖音小程序Uniapp 封装登录wx.login / wx.getUserProfilett.login / tt.getUserInfouni.login / uni.getUserProfile保存图片wx.saveImageToPhotosAlbumtt.saveImageToPhotosAlbumuni.saveImageToPhotosAlbum分享open-typeshare / wx.shareAppMessageopen-typeshare / tt.shareAppMessageuni.share 或按钮 open-type支付wx.requestPaymenttt.requestPaymentuni.requestPayment网络请求wx.requesttt.requestuni.request用户隐私协议wx.requirePrivacyAuthorizett 各版本策略不同自行封装壁纸小程序用到的主力 API 基本都是平替关系uni.*这一层能屏蔽掉大部分差异。真正需要动脑子的是授权逻辑抖音端的tt.getUserInfo和微信端的wx.getUserProfile在返回值结构、触发时机上都不同。后面第 5 章单独讲。提示不要指望uni.*封装的 API 在两端行为完全一致。头像昵称的返回格式、保存相册前的授权弹窗顺序这些细节封装不了必须条件编译。2.2 条件编译一套代码两套行为的落点Uniapp 的条件编译写在注释里编译器在打包时才会识别。微信端用#ifdef MP-WEIXIN抖音端用#ifdef MP-TOUTIAO#ifndef表示“非某平台时执行”。常见做法是能共用逻辑就共用只在平台特有 API 或 UI 差异处写条件编译。// 保存壁纸到相册 function saveWallpaper(filePath) { // #ifdef MP-WEIXIN uni.saveImageToPhotosAlbum({ filePath: filePath, success: () uni.showToast({ title: 已保存 }), fail: (err) handleAuthFail(err) }); // #endif // #ifdef MP-TOUTIAO tt.saveImageToPhotosAlbum({ filePath: filePath, success: () tt.showToast({ title: 已保存 }), fail: (err) handleAuthFail(err) }); // #endif }这段代码的逻辑是微信端走uni.saveImageToPhotosAlbum抖音端直接调tt.saveImageToPhotosAlbum——因为抖音端对uni.*实现的兼容性有时滞后直接调底层 API 反而更稳。handleAuthFail是统一的授权失败处理稍后在授权章节展开。条件编译也适用于模板和样式不只是 JS。微信端独有组件比如open-data抖音端没有就应该包在#ifdef里。反过来抖音的侧滑返回手势相关配置只在 MP-TOUTIAO 下生效。2.3 为什么是这个方案而不是原生双写原生双写意味着两套代码、两个开发语言、两个提审节奏、两个运维入口壁纸类小程序的内容和 UI 迭代很快双写成本会吃掉大部分收益。Uniapp 的短板在复杂原生能力——比如涉及 AR、高性能 Canvas 或深度定制的原生插件时封装层会成为阻碍。但壁纸类应用需要的 Image 组件、下载、分享、Canvas 生成图片Uniapp 的成熟度足够兜底。从这个角度看源码包用 Uniapp 是合理取舍下载站这种交付场景里成交率最高的是“代码能编译、双端能跑、核心功能完整”的工程而不是某个平台性能最优的实现。3. manifest.json 与工程配置双端打包前必须确认的参数3.1 manifest.json 里三个必改项拿到源码先别急着跑打开根目录的manifest.json这几乎是所有双端项目“本地能跑、一上传就废”的源头。三个必改项如下配置项位置说明小程序 AppIDmp-weixin.appid微信公众平台里申请测试号也可先在开发者工具里跑抖音小程序 AppIDmp-toutiao.appid抖音开放平台创建小程序后获得基础库最低版本mp-weixin.libVersion / mp-toutiao.minVersion设太低兼容好但代码受限设太高低版本用户打不开{ mp-weixin: { appid: wx1234567890abcdef, setting: { urlCheck: false }, usingComponents: true }, mp-toutiao: { appid: tt1234567890abcdef, setting: { urlCheck: false } } }urlCheck: false在开发者工具里等效于勾选“不校验合法域名”本地联调时必须有否则请求会被拦截。注意这只是开发态配置真机预览和提审时依然要求线上域名备案且加入白名单。3.2 请求域名白名单的差异微信要配抖音也要配微信端的合法域名在微信公众平台“开发管理-服务器域名”里配置抖音端在抖音开放平台“开发-服务器域名”里配置。壁纸类的图片资源通常来自 CDN图片域名和接口域名都要加。我一般会在工程里封装一层request.js统一管理 baseURL这个文件不用写条件编译因为两端都会请求同一个后端。// utils/request.js const BASE_URL https://api.example.com; // 换成自己的接口域名 export function request(path, method GET, data {}) { return new Promise((resolve, reject) { uni.request({ url: BASE_URL path, method: method, data: data, timeout: 10000, success: (res) { if (res.statusCode 200) { resolve(res.data); } else { uni.showToast({ title: 请求失败, icon: none }); reject(res); } }, fail: (err) reject(err) }); }); }timeout: 10000是给慢网络兜底避免用户看着转圈。壁纸接口的数据量不小响应超过 10 秒的直接提示失败比无限等待体验好。3.3 本地联调把接口跑通再碰页面接口是本地起的 Node 服务时有两个选择微信开发者工具勾选“不校验合法域名”或者用代理工具把 URL 重写。抖音开发者工具同样有“开发-不校验合法域名”的开关但抖音的版本更新频繁有时设置入口位置会变找不到的话直接看设置里有没有 request 相关的开关。提示改完 manifest.json 之后必须重新编译HBuilderX 不会自动热更新 manifest 里的原生配置。改 AppID、最低基础库版本这类配置后没有重新编译导致的报错特别隐蔽。4. 壁纸核心功能落地瀑布流、详情页与双端保存到相册4.1 瀑布流布局用两列还是多列性能差距在哪壁纸小程序的首页基本都是瀑布流。实现方案常见的三种view多列布局、CSS columns、uni-grid。壁纸场景我推荐view两列或三列左侧和右侧各一个数组。原因是 CSS columns 在图片加载时会出现内容错位uni-grid是九宫格语义不适合不等高瀑布流。view classwaterfall view classcolumn v-for(column, index) in columns :keyindex view classcard v-foritem in column :keyitem.id clickpreview(item) image :srcitem.cover modewidthFix lazy-loadtrue / text classtitle{{ item.title }}/text /view /view /viewlet left [], right []; this.list.forEach((item, index) { if (index % 2 0) { left.push(item); } else { right.push(item); } }); this.columns [left, right];modewidthFix会等比例缩放图片宽度到 100%高度自适应这是壁纸瀑布流最常用的模式。lazy-load是图片懒加载滚动时才发起加载请求。列表很长时必须用v-for加key否则小程序端的 diff 会出现错乱。数据切分逻辑按索引奇偶轮流分给两列简单且稳定。更精细的做法是按图片加载后的实际高度动态分配但在小程序里测量图片高度代价很大壁纸图片宽高比通常固定奇偶分列的效果足够。4.2 图片详情与预览没有后端时先跑静态数据解压源码后如果接口不可用第一步是 mock 数据让页面先跑通。壁纸数据结构最简单的是把图片 URL、标题、宽高比、分类 ID 放在一个数组里// mock/data.js export const wallpaperList [ { id: 1, title: 极简山峰, url: https://example.com/wallpaper/1.jpg, ratio: 1.78 }, { id: 2, title: 暗夜森林, url: https://example.com/wallpaper/2.jpg, ratio: 1.5 } ];点击卡片进入预览页或者直接调用uni.previewImage两种交互都可以。预览页适合做“设为壁纸”和“分享”的按钮列表页直接 preview 则交互更轻。源码包里常见的是两者结合点击进入详情详情里再用uni.previewImage支持手势放大和左右滑动。function previewImage(current, urls) { uni.previewImage({ current: current, urls: urls }); }current是当前图片的 URLurls是同一分类下的全部大图 URL。用户左滑右滑时小程序端会按数组下标切换不需要自己维护滑动状态。4.3 保存到相册授权弹窗、失败拦截、永久拒绝闭环保存相册是壁纸应用的转化核心。用户点“保存图片”时良性流程是有授权直接保存无授权弹授权框用户拒绝后引导去设置页打开。注意微信和抖音在“拒绝后再次触发”的行为不同但代码要处理同一个状态机。function saveWallpaper(filePath) { uni.saveImageToPhotosAlbum({ filePath: filePath, success: () uni.showToast({ title: 已保存到相册 }), fail: (err) { if (err.errMsg err.errMsg.includes(auth deny)) { uni.showModal({ title: 需要权限, content: 请在设置中打开相册权限, confirmText: 去设置, success: (res) { if (res.confirm) { uni.openSetting(); } } }); } else { uni.showToast({ title: 保存失败, icon: none }); } } }); }逻辑说明saveImageToPhotosAlbum失败的原因常见两种用户拒绝授权或网络下载临时文件失败。判断errMsg里包含auth deny时弹窗引导去uni.openSetting()打开权限。注意auth deny这个字符串在两端返回值里不一定完全一致微信常见格式是saveImageToPhotosAlbum:fail auth deny抖音的格式类似但更稳妥的写法是同时判断err.errMsg.indexOf(auth) ! -1加saveImageToPhotosAlbum。授权被永久拒绝后uni.openSetting弹的是系统设置页用户手动打开后回到小程序能继续保存。保存之前还需要下载图片到本地临时路径。uni.downloadFile拿到的临时路径传给saveImageToPhotosAlbum而详情页大图 URL 来自 CDN直接保存远程 URL 是行不通的。这个细节是壁纸小程序最常见的报错fail url is not valid。function downloadAndSave(url) { uni.downloadFile({ url: url, success: (res) { if (res.statusCode 200) { saveWallpaper(res.tempFilePath); } else { uni.showToast({ title: 下载失败, icon: none }); } } }); }tempFilePath是下载后的本地临时路径保存完成前操作系统可能清理临时文件。需要快速连续保存时考虑先复制到本地持久路径再保存但这个需求在壁纸场景里出现频率不高一次性保存一张是主路径。5. 双端差异化适配抖音端的授权、分享与微信端的不同玩法5.1 抖音端用户信息获取getUserInfo 和 getUserProfile 各有各的规则壁纸类应用不做社交关系链登录需求往往是“标记收藏、同步设置”这种场景不需要强制授权。微信端从 2022 年 10 月起wx.getUserProfile不再返回真实头像昵称返回的是“微信用户”加灰色默认头像。抖音端则不同部分版本中tt.getUserProfile仍然能返回完整资料但也经常有调整。不依赖头像昵称时用户信息展示用 localStorage 缓存一份默认昵称就行。必须拿头像的场景微信端推荐先用button open-typechooseAvatar让用户主动选头像昵称用 input 输入这个流程是微信官方推荐的“头像昵称填写能力”抖音端则看版本用tt.getUserInfo或者button open-typegetUserInfo。!-- 微信端头像昵称填写 -- !-- #ifdef MP-WEIXIN -- button classavatar-wrapper open-typechooseAvatar chooseavataronChooseAvatar image :srcavatarUrl / /button input typenickname placeholder请输入昵称 v-modelnickname / !-- #endif --open-typechooseAvatar和typenickname是微信专门设计的替代方案。不要在微信端再用uni.getUserProfile去拉头像拿到的已经是被脱敏的数据。抖音端保持自己那套逻辑两边通过条件编译隔离。5.2 分享微信玩裂变抖音玩路径壁纸小程序最有效的增长方式是“用户看到一张好看的图分享给朋友”。微信端分享卡片在onShareAppMessage里配置抖音端同理但字段有差异。// #ifdef MP-WEIXIN onShareAppMessage() { return { title: 这张壁纸太好看了, path: /pages/detail/detail?id this.currentId, imageUrl: this.currentImage }; } // #endif // #ifdef MP-TOUTIAO tt.shareAppMessage({ title: 这张壁纸太好看了, desc: 来自壁纸小程序, path: /pages/detail/detail?id this.currentId, imageUrl: this.currentImage }); // #endif微信端的onShareAppMessage是页面生命周期方法分享按钮只需要button open-typeshare抖音端则要调用tt.shareAppMessage显式触发。imageUrl建议直接用当前壁纸的缩略图 URL好友看到卡片时加载更快分享转化率明显高于默认截图。朋友圈分享在微信端只能走onShareTimeline不支持自定义路径之外的参数打开只会进首页这个限制要接受。5.3 给壁纸小程序加一点“DIY”留存从爆款珠了个珠想到的热词里“珠了个珠 diy 小程序”能火核心是“用户自己参与生成内容”。壁纸类小程序同样可以借鉴用户选底图、调滤镜、加文字生成一张自己的专属壁纸然后保存和分享。生成逻辑用 Canvas 绘制微信端和抖音端的 Canvas 接口在小程序环境下差异比较大建议走uni.createCanvasContext的兼容层只绘制简单文字和图案时不至于踩性能坑。canvas canvas-idposter stylewidth: 300px; height: 500px; /const ctx uni.createCanvasContext(poster); ctx.setFillStyle(#ffffff); ctx.fillRect(0, 0, 300, 500); ctx.drawImage(../../static/bg.png, 0, 0, 300, 500); ctx.setFillStyle(#000000); ctx.setFontSize(20); ctx.fillText(自定义内容, 40, 460); ctx.draw(false, () { uni.canvasToTempFilePath({ canvasId: poster, success: (res) downloadAndSave(res.tempFilePath) }); });注意步骤先ctx.draw完成绘制再在回调里调用canvasToTempFilePath导出图片。若导出得到空白图大概率是 draw 回调里拿路径的时序问题把它写清楚能少废不少时间。6. 从本地到线上微信抖音双端打包上架与其间的 3 个硬坑6.1 双端打包的完整步骤微信端HBuilderX 菜单栏“运行 - 运行到小程序模拟器 - 微信开发者工具”首次会要求填 AppID。微信开发者工具里做真机预览的话需要项目配置勾选“不校验合法域名”。正式发布要在“上传”里提交代码然后在微信公众平台提交审核。抖音端HBuilderX 里“运行 - 运行到小程序模拟器 - 抖音开发者工具”。抖音开发者工具的 AppID 在 manifest 里填好否则报错invalid appid。同样在开发者工具里完成预览和上传去抖音开放平台提审。提审需要的物料包括小程序的简介、类目壁纸通常选“图片/摄影”或“工具”、隐私保护指引声明收集的信息类型。2024 年以来微信和抖音都加强了隐私协议合规检查小程序里有任何授权弹窗都要在后台声明对应隐私接口。壁纸App常见的隐私问题就是相册权限开发时填写的“收集你的相册仅写入权限使用说明”要写清楚“用于保存你选择的壁纸到相册”不能写“用于完善用户体验”这类模糊话术。6.2 域名和备案是双端上架后面最常被打回的原因微信端打回常见理由是“接口请求失败”或“图片无法访问”后台配置的 request 合法域名过期、CDN 图片域名没有加入 downloadFile 合法域名。抖音端审核逻辑类似打回信息里会标明具体请求失败的 URL排查方向一致域名必须 HTTPS、必须有 ICP 备案、证书链完整且域名备案主体和开发者主体尽量一致。6.3 压缩包里的代码不一定是最终版.rar和“源码包”这两个关键词意味着你拿到的可能是老版本。老工程里最危险的是wx.getUserInfo直接调用——这个接口在微信端已经无法弹出授权窗口其次是 manifest 里指向某个已失效的 AppID。拿到任何这套源码包第一件事不是改功能而是把双端基础库版本抬到最新稳定版全局搜索getUserInfo、getSystemInfoSync这类过期 API看代码里哪些被标记为 deprecated。用uni.getSystemInfoSync()获取设备信息时老代码里经常有windowWidth被算法依赖新基础库改了部分字段返回值抽查一遍详情页布局再发版。最后是内容侧壁纸类小程序的审核风险点集中在图片版权上接图库 API 的话确认分发授权不要直接抓第三方 4K 壁纸站的图片热链除了审核和法律问题防盗链也会让线上图片大片失效。本文还有配套的精品资源点击获取