当前位置：首页 > news >正文

微信小程序壁纸源码：纯前端调用小米官方API，免服务器一键运行

news 2026/6/11 3:09:27

本文还有配套的精品资源，点击获取

简介：直接在微信里用的小米壁纸小程序代码包，所有图片数据都实时从小米壁纸官网接口（https://api.zhuti.xiaomi.com）拉取，不走自己的服务器，也不需要图床或后台部署。打开就能搜关键词、点标签分类、放大看图、自动记浏览历史，安卓和iOS微信都能流畅运行。上线只要三步：注册微信小程序（选‘工具-图片’类目）、用微信开发者工具导入源码、填上你的AppID，再在小程序后台把小米的API域名加进合法域名列表就行。项目结构清晰，包含首页、搜索页、大图查看页等完整页面，还有本地缓存（wcache.js）、搜索调度（search.js）、统一请求封装（request.js）等实用模块。附带详细说明文档：readme.html讲清楚怎么用，下载解压必看.txt提醒关键操作，合法域名.txt列明必须配置的地址，还有.bat快捷脚本和muetoool.com资源入口。真机+开发者工具实测通过，适合想快速上线轻量壁纸服务的个人开发者。

1. 项目概述：为什么这个“纯前端壁纸小程序”值得你花十分钟看懂

我做微信小程序开发快八年了，从最早帮朋友搭个名片页，到现在带团队做政务类SaaS平台，见过太多所谓“开箱即用”的源码包——点开一看，要么后端接口地址写死在代码里根本跑不起来，要么依赖一堆没文档的私有服务，要么干脆就是套壳网页强行塞进小程序容器里，一上真机就白屏、卡顿、404满天飞。但这次这个“微信小程序壁纸源码”，是我近两年见过最干净、最诚实、也最符合小程序设计哲学的一套轻量级实践。它不吹“AI生成壁纸”“千万图库”，就老老实实做一件事：把小米官方壁纸API的能力，原汁原味、零中间层地搬到微信里。关键词是三个：“微信壁纸小程序”、“小米壁纸API”、“纯前端小程序”——这三个词不是包装话术，而是它全部的技术契约。

什么叫“纯前端”？不是指不用WXML或WXSS，而是指整个数据流里，没有一行业务逻辑经过你的服务器。所有请求都由微信客户端直接发往https://api.zhuti.xiaomi.com，响应数据不经任何中转、不落地存储、不二次加工，直接渲染到页面上。这意味着你不需要买云服务器、不用配Nginx、不用写Node.js/PHP后端、不用管HTTPS证书续期、更不用操心图片防盗链或CDN回源——这些本该由小米承担的基础设施责任，它一分没推给你。你只负责“接入”和“呈现”。这种架构在2024年听起来有点反直觉，毕竟大家习惯了微服务+网关+缓存的标配，但恰恰是这种“极简主义”，让它成为个人开发者上线第一个小程序的最优解：注册账号5分钟，导入项目3分钟，填AppID和域名2分钟，总共不到十分钟，你就能在自己手机微信里点开一个能搜“星空”、点开“赛博朋克”分类、双指放大看4K细节、退出再进来还能看到刚才浏览过的三张图的小程序。它解决的不是“如何构建一个壁纸帝国”，而是“如何让一个会写WXML的人，在今天下午三点前拥有自己的第一个可上线小程序”。

这套源码的适用人群非常明确：刚学完小程序基础语法、手痒想做个真实项目练手的学生；自由职业者接单前需要快速出Demo给客户看的设计师；运营同学想为公众号配一个轻量互动工具的市场岗；甚至是你——一个不想被运维、备案、备案、备案搞崩溃的普通人。它不追求高并发、不挑战复杂交互、不堆砌炫技动画，但它把“可用性”这件事抠到了毫米级：首页瀑布流滚动顺滑（用了wx:for+<image>懒加载+预加载策略）、搜索结果实时响应（防抖+节流+本地缓存兜底）、大图查看支持双指缩放+拖拽（基于<canvas>自研手势识别，非第三方插件）、浏览记录自动存入wx.setStorageSync且按时间倒序排列……这些细节背后，是作者对微信小程序运行机制的深度理解，而不是Ctrl+C/V来的模板代码。接下来我会一层层拆开它的骨架，告诉你它为什么能“免服务器一键运行”，以及你在导入、配置、调试时真正需要盯住的关键点。

2. 整体架构与设计思路：放弃后端，是对微信能力的充分信任

2.1 核心设计哲学：把“网络请求权”还给客户端

绝大多数小程序开发者默认的思维路径是：前端 → 自己的后端API → 第三方服务（如小米壁纸）。这条链路看似稳妥，实则埋了三颗雷：第一颗是合规雷——微信要求所有网络请求必须配置合法域名，而你的后端域名一旦未备案或HTTPS不达标，整个小程序就瘫痪；第二颗是成本雷——哪怕最便宜的云函数，每月也有调用次数和执行时间限制，壁纸类应用图片多、请求频次高，很容易触发限频；第三颗是维护雷——后端代码要更新、要监控、要查日志、要处理异常，而你真正想做的只是展示几张图。

这套源码的破局点，是彻底跳过中间环节，让微信客户端直接对话小米官方API。这听上去大胆，但完全可行，原因有三：

小米API本身是公开可调用的：https://api.zhuti.xiaomi.com并非内部接口，其请求头、参数、返回结构长期稳定，且无严格Referer校验（仅需基础UA），属于“半开放”状态。作者通过大量抓包验证，确认该域名在微信小程序环境内可直连。
微信小程序的合法域名机制支持“第三方公开API”：只要你在小程序后台将zhuti.xiaomi.com加入“request合法域名”白名单（注意：不是api.zhuti.xiaomi.com，而是二级域名zhuti.xiaomi.com），微信就会允许wx.request向其发起HTTPS请求。这是微信官方明确支持的跨域方案，无需任何代理或中转。
前端完全有能力处理API的全部业务逻辑：小米壁纸API返回的是标准JSON，包含壁纸ID、标题、分类、标签、多个分辨率URL（如url_1080p、url_4k）、宽高比等字段。这些数据结构清晰，前端可直接解析、筛选、排序、缓存，无需后端做任何转换。

提示：这里有个关键认知差——很多人误以为“合法域名只能加自己服务器”，其实微信文档明确写着：“支持添加第三方服务的域名，如腾讯地图、高德地图等”。小米壁纸API正是这类“第三方服务”的典型代表。

2.2 模块化分层：用最小耦合实现最大复用

打开项目目录，你会看到一套高度克制的模块划分。它没有用Webpack打包、没有引入Redux状态管理、甚至没用ES6 Class封装，全部采用微信原生的模块系统（require/module.exports）。这种“复古”设计不是技术落后，而是精准匹配小程序生命周期和性能约束：

request.js：统一请求封装层
这是整个项目的“心脏”。它封装了wx.request，内置了三重保障：
1.自动添加请求头：强制设置User-Agent: "MicroMessenger"，模拟微信客户端行为，绕过部分API的UA拦截；
2.错误统一兜底：网络超时、SSL握手失败、HTTP 5xx等场景，自动返回空数组或默认对象，避免页面因单个请求失败而崩溃；
3.简易缓存开关：每个请求可传入cache: true参数，自动将响应存入wx.setStorageSync，Key为请求URL的MD5哈希值，有效期设为2小时（避免频繁拉取相同数据）。
它不处理业务逻辑，只做“安全通道”，确保下游模块拿到的数据要么是新鲜的，要么是可用的。
wcache.js：本地缓存管理层
小程序的wx.setStorageSync有10MB上限，但壁纸数据单条不足1KB，因此作者设计了两级缓存策略：
短期缓存（内存）：search.js中维护一个recentSearches数组，记录最近5次搜索关键词，关闭页面即释放；
长期缓存（磁盘）：wcache.js提供set(key, value, expire)和get(key)方法，expire单位为毫秒，过期自动清理。浏览记录（viewHistory）就存在这里，Key为"history_" + appid，Value是包含id、title、url、timestamp的对象数组，按timestamp倒序排列，最多保留50条。
注意：wcache.js没有用try...catch包裹wx.getStorageSync，因为微信文档明确说明该API同步执行且几乎不抛错，加异常处理反而增加冗余。
search.js：搜索调度中枢
它不直接调用API，而是协调request.js和wcache.js：用户输入关键词后，先查本地缓存是否有该词的搜索结果（cacheKey = "search_" + keyword），有则直接返回；无则调用request.js发起新请求，并将结果存入缓存。它还实现了搜索建议功能——当用户输入“星”时，自动联想“星空”“星际”“星辰”，这并非调用小米API，而是维护了一个200词的本地关键词库（硬编码在search.js里），通过字符串前缀匹配实现，零网络开销。

这种分层让每个模块职责单一：request.js管“怎么安全拿数据”，wcache.js管“数据放哪、何时失效”，search.js管“什么时候该拿、拿什么”。当你想替换API源（比如换成华为壁纸），只需重写request.js里的fetchWallpapers方法，其他模块完全不动。这才是真正的“可维护性”。

2.3 页面结构设计：用原生能力替代复杂框架

项目包含三个核心页面：index（首页瀑布流）、search（搜索页）、see-img（大图查看页）。它们没有使用任何UI框架（如WeUI、Vant Weapp），全部基于原生组件构建，原因很实在：

性能优先：<scroll-view>配合wx:for渲染瀑布流，比任何虚拟列表组件都轻量。作者在index.js中做了关键优化：监听scrolltolower事件时，不是简单追加数据，而是先判断当前页码是否已达API返回的total_page，是则停止加载，避免无效请求；
体验可控：see-img页的双指缩放，没有用<web-view>嵌H5（兼容性差、无法调用微信API），而是用<canvas>绘制图片，通过touchstart/touchmove事件计算两指间距变化率，动态调整canvas的scale属性。缩放过程中，图片边缘用ctx.drawImage裁剪，确保不显示空白背景；
状态隔离：每个页面的data只存必要字段。例如index.js的data只有wallpapers: []、loading: false、hasMore: true三个字段，没有冗余的userInfo、tabIndex等无关状态，减少setData数据量，提升渲染速度。

实操心得：我在真机测试时发现，iOS微信对<canvas>缩放的touchmove事件触发频率明显高于安卓，导致缩放略显“跳跃”。作者的解决方案是在touchmove回调中加入requestAnimationFrame节流，确保每帧只处理一次缩放计算，这个细节在see-img.js的handleTouchMove方法里有完整实现，值得抄作业。

3. 核心细节解析与实操要点：那些README里没写的硬核经验

3.1 合法域名配置：一个字符都不能错

这是90%新手卡住的第一步。合法域名.txt里写的zhuti.xiaomi.com是正确答案，但很多人会栽在这些细节上：

必须是二级域名，不能带api.前缀：微信后台的“request合法域名”只认二级域名层级。如果你填api.zhuti.xiaomi.com，提交后会提示“域名格式不正确”；填zhuti.xiaomi.com则顺利通过。这是因为小米的API实际部署在zhuti.xiaomi.com的根路径下，api.只是路径别名（类似zhuti.xiaomi.com/api/v1/wallpapers），微信的域名白名单机制只校验主机名（host），不校验路径（path）。
必须开启HTTPS，且证书有效：zhuti.xiaomi.com的SSL证书由Let’s Encrypt签发，有效期90天，但小米团队会自动续期，你无需关心。重点是你自己的小程序后台——确保“开发管理”→“开发版本”下的“HTTPS”开关是开启状态（默认开启）。
不要添加www.或其他子域名：有人习惯性加www.zhuti.xiaomi.com，这是无效的。微信的域名匹配是精确主机名匹配，www.和zhuti.被视为两个不同域名。

提示：配置完成后，务必在微信开发者工具中点击右上角“详情”→“本地设置”，勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”。这是开发阶段的调试开关，上线前必须取消勾选，否则审核会被拒。

3.2`config.js`：唯一需要你手动修改的文件

整个项目里，只有config.js这一处需要你动笔。它长这样：

// config.js const CONFIG = { // 小程序AppID，必填 APP_ID: 'your_app_id_here', // 小米壁纸API基础URL，勿改 API_BASE_URL: 'https://zhuti.xiaomi.com', // 首页默认加载页码，建议1-3 DEFAULT_PAGE: 1, // 每页壁纸数量，小米API支持10/20/50，推荐20 PAGE_SIZE: 20, // 搜索关键词联想库，可自行增删 SEARCH_SUGGESTIONS: ['星空', '风景', '动漫', '科技', '简约', '节日', '动物', '美食'] }; module.exports = CONFIG;

其中APP_ID是你在微信公众平台注册小程序后获得的16位字符串（形如wx1234567890abcdef），必须填对，否则app.js初始化失败，整个小程序白屏。其他字段可根据需求调整：

DEFAULT_PAGE：首页首次加载的页码。设为1最稳妥，因为第1页数据最全、更新最及时；
PAGE_SIZE：小米API的size参数，实测20是性能与内容量的最佳平衡点。设为50虽能一次拉更多，但首屏渲染压力大，低端安卓机可能出现卡顿；
SEARCH_SUGGESTIONS：本地搜索联想词库。作者预置了8个高频词，你可以按自己目标用户画像增补，比如面向学生群体可加"学习"、"考研"，面向女性用户可加"可爱"、"ins风"。注意数组长度不要超过50，否则影响内存。

注意：APP_ID填错的表现不是报错，而是app.js中的wx.login()调用静默失败，导致后续所有页面的onLoad生命周期里this.data.appid为空，进而request.js构造的URL变成https://zhuti.xiaomi.com/?appid=，最终API返回空数据。排查时可打开开发者工具Console，搜索appid关键字，看是否为undefined。

3.3`wcache.js`的缓存策略：为什么用MD5而不用URL字符串作Key

wcache.js里有一行关键代码：

const cacheKey = md5(url); // url是完整的请求地址，如 https://zhuti.xiaomi.com/api/v1/wallpapers?keyword=星空&page=1&size=20

有人会问：为什么不直接用url字符串作Key？省事又直观。作者选择MD5，是出于两个硬性约束：

微信wx.setStorageSync的Key长度限制：官方文档未明说上限，但实测超过200字符的Key会导致存储失败，而小米API的URL带参数后轻松突破300字符（尤其含中文关键词时，URL编码后更长）；
Key的唯一性与可读性平衡：MD5哈希值固定32位，保证Key长度可控；同时，哈希值与原始URL一一对应，避免因URL参数顺序不同（如?a=1&b=2vs?b=2&a=1）导致重复缓存。

作者用的MD5算法来自utils/md5.js（项目自带），这是一个精简版，仅2KB，不依赖外部库。它比微信原生wx.getFileSystemManager().readFile读取本地MD5文件更快，因为哈希计算在内存中完成，无I/O开销。

实操心得：我在测试时发现，当用户连续搜索“星空”“星空壁纸”“高清星空”三个相似词时，由于URL不同，会生成三个独立缓存。作者在search.js中加入了“关键词标准化”逻辑：将输入词去除空格、转小写、截取前10字符（keyword.trim().toLowerCase().substring(0, 10)），再拼接成缓存Key。这样三个词都映射到"xingkong"，共用同一份缓存，大幅提升缓存命中率。

3.4`see-img.js`的双指缩放实现：Canvas不是万能的

see-img页的缩放效果惊艳，但它的实现远比想象中复杂。核心逻辑在see-img.js的initCanvas和handleTouchMove方法中：

Canvas初始化：onLoad时创建<canvas>节点，获取其wx.createCanvasContext上下文，并将壁纸原图（url_4k）绘制到Canvas上；
触摸事件监听：touchstart记录两指初始坐标和距离；touchmove实时计算当前两指距离，与初始距离比值即为缩放比例；
动态重绘：每次缩放，不是简单设置canvas.style.transform（微信不支持CSS transform on canvas），而是清空Canvas，用ctx.drawImage按新比例重新绘制图片，并通过clip方法裁剪画布区域，确保只显示可视部分。

难点在于“平移跟随”：缩放后，图片中心点会偏移，用户需要拖拽找回焦点。作者用了一个巧妙办法——在touchmove中，除了计算缩放比，还计算两指中心点的位移向量，乘以缩放系数后，作为drawImage的dx、dy参数，实现“所见即所得”的拖拽感。

注意：此方案在iOS真机上表现完美，但在部分安卓机型（如旧款华为）上，touchmove事件可能被系统手势（如返回桌面）劫持。作者的兜底方案是在touchend后300ms内检测是否发生缩放，若否，则恢复原始尺寸，避免用户误操作导致图片“卡死”。

4. 实操过程与核心环节实现：从导入到上线的全流程详解

4.1 开发者工具导入与基础配置（5分钟）

第一步永远是最简单的，但细节决定成败：

下载并解压资源包：确保解压后根目录下能看到project.config.json、app.js、pages/等文件。如果解压软件自动创建了父文件夹（如wallpaper-master/），请将里面所有内容剪切到同级目录，否则微信开发者工具无法识别项目；
启动微信开发者工具：选择“小程序项目” → “从本地文件夹打开”，定位到解压后的根目录；
填写AppID：在弹出的窗口中，输入你在微信公众平台申请到的AppID。切记：此时不要选“测试号”，测试号无法配置合法域名，后续步骤会失败；
检查项目配置：打开project.config.json，确认appid字段已自动填入你输入的AppID；description字段是项目描述，可忽略；
运行预览：点击工具栏“编译”按钮（或Ctrl+B），等待几秒，模拟器应显示首页瀑布流。若出现“网络错误”或白屏，请立即检查config.js中的APP_ID是否正确、project.config.json是否被篡改。

提示：开发者工具右上角“详情”→“本地设置”中，“不校验合法域名”必须勾选，这是开发阶段的必需操作。但记住，上线前必须取消勾选，否则审核通不过。

4.2 小程序后台域名配置（2分钟）

这是上线前最关键的一步，必须在微信公众平台操作：

登录微信公众平台 → 左侧菜单“开发管理” → “开发设置”；
找到“服务器域名”区域，点击“修改”；
在“request合法域名”输入框中，逐行输入（注意是换行，不是逗号分隔）：
zhuti.xiaomi.com
（仅此一行，不要加http://或https://，不要加/，不要加api.）
点击“保存并提交”，系统会发送短信验证码到管理员手机，输入后即生效。

注意：域名配置生效需要5-10分钟，期间开发者工具可能仍报错。建议配置后等待10分钟再测试。另外，“业务域名”和“uploadFile合法域名”无需填写，本项目不涉及<web-view>或文件上传。

4.3 首页瀑布流加载逻辑详解（代码级解读）

pages/index/index.js是流量入口，其onLoad和onReachBottom方法决定了用户体验的流畅度：

// pages/index/index.js Page({ data: { wallpapers: [], loading: false, hasMore: true, currentPage: 1 }, onLoad() { this.loadWallpapers(); }, loadWallpapers() { if (this.data.loading || !this.data.hasMore) return; this.setData({ loading: true }); const { currentPage } = this.data; const params = { page: currentPage, size: CONFIG.PAGE_SIZE, type: 'all' // 小米API的type参数，'all'表示全部壁纸 }; request.get('/api/v1/wallpapers', params).then(res => { const newWallpapers = res.data.list || []; const totalPages = res.data.total_page || 1; this.setData({ wallpapers: this.data.wallpapers.concat(newWallpapers), loading: false, hasMore: currentPage < totalPages, currentPage: currentPage + 1 }); }).catch(err => { console.error('首页加载失败', err); this.setData({ loading: false }); }); }, onReachBottom() { this.loadWallpapers(); } });

这段代码的精妙之处在于：

防抖加载：onReachBottom触发时，先判断this.data.loading是否为true，是则直接返回，避免用户快速滚动时触发多次请求；
分页状态管理：currentPage和hasMore共同控制加载节奏。hasMore由API返回的total_page决定，而非简单currentPage < 10，确保数据边界准确；
数据合并策略：this.data.wallpapers.concat(newWallpapers)而非push，保证数组引用不变，避免setData深层diff失效。

实操心得：我在测试时发现，小米API的total_page有时会不准（如实际有100页，返回total_page: 98）。作者在loadWallpapers末尾加了兜底逻辑：当newWallpapers.length < CONFIG.PAGE_SIZE时，强制设hasMore = false，因为这意味着最后一页数据已不足一页，后续请求必然为空。

4.4 搜索功能实现：从输入到结果的毫秒级响应

pages/search/search.js的搜索流程是前端性能的教科书案例：

输入监听：<input>组件绑定bindinput="onInput"，onInput方法中调用debounce(this.doSearch, 300)（防抖300ms）；
本地联想：doSearch首先调用search.getSuggestions(keyword)，从SEARCH_SUGGESTIONS数组中匹配前缀，生成suggestions数组并setData；
API请求：若用户点击搜索按钮或回车，调用search.fetch(keyword)，该方法先查wcache.get("search_" + keyword)，命中则直接返回，未命中则调用request.get并存入缓存；
结果渲染：搜索结果页pages/search/search.wxml用wx:for渲染，每项包含标题、分类、缩略图，点击跳转see-img页。

整个流程中，90%的搜索请求走本地缓存，平均响应时间<50ms；剩余10%的首次搜索，因request.js内置了DNS预热（在app.js中提前调用wx.request访问zhuti.xiaomi.com），首屏加载时间控制在800ms内。

注意：search.js中的fetch方法对关键词做了两次清洗：一是encodeURIComponent(keyword)防止中文乱码；二是keyword.replace(/[^\u4e00-\u9fa5\w\s]/g, '')过滤掉所有特殊符号（如#、@、!），因为小米API对特殊字符支持不稳定，过滤后反而提高成功率。

4.5 大图查看页交互：超越原生`<image>`的体验升级

pages/see-img/see-img.wxml没有用<image src="{{imageUrl}}">，而是：

<canvas canvas-id="wallpaperCanvas" bindtouchstart="handleTouchStart" bindtouchmove="handleTouchMove" bindtouchend="handleTouchEnd" style="width:100vw;height:100vh;"></canvas>

对应的see-img.js中：

handleTouchStart：记录touches[0]和touches[1]的坐标，计算初始距离initialDistance和中心点initialCenter；
handleTouchMove：实时计算当前距离currentDistance，得出缩放比scale = currentDistance / initialDistance；同时计算中心点位移deltaX、deltaY，用于平移；
drawImage：每次缩放/平移后，调用ctx.clearRect(0,0,canvasWidth,canvasHeight)清空，再用ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)重绘，其中dx、dy由位移计算，dw、dh由缩放比计算。

这套方案的代价是代码量增加，但收益是：完全掌控缩放锚点、平移边界、双击重置等所有交互细节。比如双击重置，作者在handleTap中判断两次点击间隔<300ms且距离<20px，则将scale重置为1，offsetX、offsetY归零。

提示：see-img.js中有一个隐藏技巧——图片加载完成后，会自动触发一次handleTouchMove，模拟“初始缩放”，确保图片以1:1比例居中显示，避免用户第一次看到的是被拉伸或裁剪的图。

5. 常见问题与排查技巧实录：那些踩过的坑，我都替你趟平了

5.1 问题速查表：高频故障与一键修复

问题现象	可能原因	快速排查步骤	修复方案
首页白屏，Console报`fail net::ERR_CONNECTION_REFUSED`	合法域名未配置或填错	1. 检查微信公众平台“开发设置”→“服务器域名”是否已添加`zhuti.xiaomi.com`；2. 查看开发者工具Network面板，看请求URL是否为`https://zhuti.xiaomi.com/...`	重新配置域名，确保无多余字符，等待10分钟生效
搜索无结果，返回空数组	关键词含非法字符或未URL编码	1. 在`search.js`的`fetch`方法中`console.log(keyword)`；2. 检查Console输出是否含`#`、`%`等符号	在`fetch`开头添加`keyword = encodeURIComponent(keyword.replace(/[^\u4e00-\u9fa5\w\s]/g, ''))`
大图页缩放卡顿，iOS真机明显	`touchmove`事件未节流	1. 在`see-img.js`的`handleTouchMove`开头加`console.time('scale')`；2. 结尾加`console.timeEnd('scale')`，看单次执行是否>16ms	在`handleTouchMove`中加入`if (this.lastScaleTime && Date.now() - this.lastScaleTime < 16) return; this.lastScaleTime = Date.now();`
浏览记录不保存，重启小程序消失	`wcache.set`调用时机错误	1. 在`see-img.js`的`onLoad`中`console.log(wx.getStorageSync('history_xxxx'))`；2. 看是否返回`undefined`	确保`wcache.set`在图片加载成功回调中调用，而非`onLoad`立即调用（此时`this.data.imageUrl`可能为空）
安卓真机点击图片无反应，iOS正常	Canvas在部分安卓机型渲染异常	1. 在`see-img.js`的`initCanvas`中`console.log(canvas)`；2. 看是否为`null`	在`onReady`生命周期中延迟100ms再初始化Canvas，`setTimeout(() => { this.initCanvas(); }, 100);`

5.2 独家避坑技巧：文档里不会写的实战经验

“合法域名”不是万能的，它只管wx.request，不管<image>的src：很多开发者以为加了zhuti.xiaomi.com就能直接在<image src="https://zhuti.xiaomi.com/xxx.jpg">里用，这是错的！<image>组件的src必须是微信认可的“业务域名”或“uploadFile合法域名”，而小米的图片URL不在其中。所以项目里所有壁纸图都是通过wx.request拉取JSON，再把JSON里的url_1080p等字段赋给<image>的src——微信会自动将这些URL标记为“可信”，绕过域名校验。这是作者深挖微信文档后找到的“灰色通道”。
小米API的url_4k字段在部分壁纸下为空，必须降级：实测约15%的壁纸没有url_4k，只有url_1080p或url_720p。see-img.js中做了三级降级：优先用url_4k，不存在则用url_1080p，再不行用url_720p，最后fallback到url（原始图）。降级逻辑写在getBestImageUrl工具函数里，避免每个页面重复判断。
project.config.json的miniprogramRoot字段必须为空：有些开发者解压后目录结构是wallpaper-master/src/，于是把miniprogramRoot设为"src/"。这会导致app.js找不到pages/目录。正确做法是确保项目根目录下直接有app.js、pages/，并将miniprogramRoot留空或设为""。
真机调试时，wx.getSystemInfoSync().platform返回"ios"或"android"，但"devtools"只在开发者工具出现：see-img.js中根据平台微调Canvas渲染参数：iOS用devicePixelRatio: 2，安卓用devicePixelRatio: 1.5，避免图片模糊。这个判断写在initCanvas开头，是作者适配上百台真机后总结的黄金比例。

最后分享一个小技巧：如果你想快速验证API是否可用，不必每次都编译小程序。打开开发者工具Console，直接输入：
javascript wx.request({ url: 'https://zhuti.xiaomi.com/api/v1/wallpapers?page=1&size=10', success: res => console.log(res), fail: err => console.error(err) })
如果返回data.list数组，说明域名配置成功，网络通畅；如果报request:fail invalid url，说明域名没加对；如果报request:fail ssl hand shake error，说明HTTPS证书有问题（极少发生）。

6. 后续扩展与个性化改造：让这个“脚手架”真正属于你

这套源码的价值，不仅在于它能立刻运行，更在于它是一块优质的“乐高底板”。我试过几种低成本扩展，效果显著：

增加“收藏”功能（30分钟）：在wcache.js中新增setFavorites(idList)和getFavorites()方法，存储用户收藏的壁纸ID数组；在index.wxml每张图右上角加一个<icon type="star" bindtap="toggleFavorite">，点击时调用wcache.getFavorites()，若ID存在则移除，否则添加；收藏页新建pages/favorites/favorites.js，onLoad时拉取ID数组，再循环调用request.get批量获取壁纸详情。全程无需后端，数据存在本地。
接入微信广告（15分钟）：在pages/index/index.wxml的瀑布流底部，插入<ad ad-unit-id="your_ad_unit_id" />；在app.json的"permission"字段中添加"scope.advertisements"；在微信公众平台开通流量主。广告展示逻辑由微信自动管理，你只需确保ad-unit-id正确。
更换壁纸源（1小时）：如果想用华为壁纸（https://consumer.huawei.com/zh/support/wallpaper/），只需重写request.js的fetchWallpapers方法：将URL改为华为API地址，调整参数名（如page→pageNum），解析返回的JSON结构（华为返回的是HTML片段，需用正则提取图片URL）。其他模块完全不用动。