简介一套包含123个微信小程序源码的zip压缩包大小179.32MB所涉案例覆盖视频、音乐、商城、资讯、工具、游戏等多类常见场景适合小程序入门者、前端开发者以及需要快速搭建Demo的爱好者参考。资源中既有“芒果TV”“AppleMusic”“B站首页界面设计”等热门界面仿写也有“仿网易云音乐”“知乎日报”“2048”“别踩白块”等完整小游戏与社区案例可集中学习组件化结构、tab切换、轮播图、瀑布流、侧滑布局、canvas绘图、地图定位、手势解锁、富文本解析等技术点。全部项目按目录独立拆分便于按需检索和对照调试能省去自行收集整理的时间。目前已有6968人学习下载使用热度较高想系统刷案例或找设计灵感的人可从中获得较丰富的模板与改造基础。1. 微信小程序源码包到手先别急着导入123 个项目是要筛着用的这批压缩包里是 123 个微信小程序工程从 B站首页、芒果TV、今日头条这类界面还原到移动小商城node 前后台、飞翔的小鸟canvas java 后端这类完整闭环再到手势解锁、二维码生成器、瀑布流布局这种单点功能。直接全部导入微信开发者工具会发现一半以上报错原因大多是老基础库的 API 写法过期但这不是坏事——它逼着你把项目当成「解剖样本」而不是「成品」。这堆源码真正值钱的是给两种人看刚入门的开发者需要大量真实工程做参照理解页面结构、数据流、组件边界一线工程师则能在给客户交付 demo 时从这里快速抽取界面骨架和功能模块做拼接。下文按「项目盘点 → 组件复用 → 前后端联调 → 批量验证」的顺序拆每一层都配可抄作业的命令和代码。2. 项目级源码怎么盘按目录、启动页与老接口迁移做筛选拿到压缩包先别急着解压后一个个双击打开。微信小程序工程的体积差别极大有完整商城的项目带后台、带图片资源能到几十 MB单页 demo 只有几 KB。正确做法是在命令行层面先做一次全量体检把项目分类、找出哪些工程值得深入研究再决定导入顺序。2.1 先给 123 个项目做体检三条命令完成分类解压后第一件事不是打开编辑器而是用三条命令把这批工程盘清楚。常见做法是到终端里做目录级统计比人工翻文件快得多而且能直接暴露一批文件的真实物理分布。unzip 123个微信小程序源码.zip -d mp_projects cd mp_projects # 只看两级目录避开 node_modules 和构建产物 find . -maxdepth 2 -type d | sort | head -80 # 按体积排序找出完整项目与单页 demo 的差异 du -sh */ | sort -h | tail -20 # 检查还有多少工程在用老授权接口这些必须改造 grep -rl wx.getUserInfo --include*.js . | head -30第一行find -maxdepth 2把嵌套过深的目录滤掉拿到每个小程序的第一层结构此刻能看到谁有pages、谁有components、谁带server目录。第二行du -sh */会瞬间拉开差距移动小商城、创客这类整站项目体积显著偏大而圆形菜单、摇一摇换文章这类单功能 demo 只有几十 KB。第三行grep -rl指向授权接口的地毯式扫描wx.getUserInfo在微信收紧隐私策略后从弹窗授权退化为静默失败还在用它的老工程必须改造成wx.getUserProfile或wx.login体系它直接影响项目能不能在真机上联动后端。我做归类时习惯把 123 个项目压成三张表。整站级且带后端的先看移动小商城node 前后台完整、飞翔的小鸟canvas 游戏 java 后端、腾讯云一站式解决方案界面还原级重点看 B站首页、芒果TV、星巴克中国、掘金首页信息流组件级则挑手势解锁、二维码生成器、瀑布流布局、富文本解析。分类维度代表项目主要学习点改造风险整站级带后端移动小商城、飞翔的小鸟、腾讯云一站式方案登录鉴权、接口分层、真机联调需要本地起后端服务环境变量多整站级纯前端创客、电商-拼团、车源宝、同乐居商城业务页面流、状态管理、tabBar 设计依赖大量网络图片域名需换界面还原级B站首页、芒果TV、今日头条、星巴克中国WXML 布局、轮播动画、导航栏适配视觉资源来自第三方本地会裂图组件/交互级手势解锁、二维码、瀑布流、城市切换组件封装、canvas 绘制、触摸事件单个文件即可抽走风险最低这里有个判断标准体积低于 100 KB 的直接按组件看待拆出你要的单文件就行体积几 MB 且带server或api目录的才需要完整跑起来。2.2 每个工程导入前先核对 app.json启动页与 tabBar 配置把工程拖进微信开发者工具之前我习惯先手写看一遍app.json再放行。这个文件决定了小程序启动后第一屏是谁、底部 tab 有几个、导航栏长什么样。很多源码包打开后白屏追根到底就是pages数组指向的文件不存在或者文件路径大小写和真实目录不一致而 Windows 和 macOS 的文件系统大小写敏感性不同老项目在 Windows 上解压后最容易踩这个坑。{ pages: [ pages/index/index, pages/category/category, pages/cart/cart, pages/mine/mine ], window: { navigationBarBackgroundColor: #ff2d4b, navigationBarTitleText: 电商小程序示例, navigationBarTextStyle: white }, tabBar: { list: [ { pagePath: pages/index/index, text: 首页 }, { pagePath: pages/category/category, text: 分类 }, { pagePath: pages/cart/cart, text: 购物车 }, { pagePath: pages/mine/mine, text: 我的 } ] } }pages数组第一项决定编译后加载的首页想快速预览某个页面把它挪到第一位就能直达。tabBar.list最少 2 项、最多 5 项text 超过 4 个汉字会出现省略号iconPath 不配置也可以运行但视觉上只剩文字。navigationBarTextStyle只有 black 和 white 两种取值深色背景配 white浅色背景配 black这个字段配错会直接导致导航栏标题看不见。对这批源码里的老项目还要额外检查顶部导航栏与胶囊按钮的兼容性。小程序右上角胶囊按钮的位置随机型变化保险的做法是用wx.getMenuButtonBoundingClientRect()拿到胶囊坐标再动态计算自定义导航栏高度直接硬编码 64 px 的方案在刘海屏和折叠屏上都会错位。2.3 老工程必改三处授权逻辑、基础库版本与 rpx 适配这 123 个源码里不少工程是 2018-2020 年前后写的导入后的报错集中在三块提前批量修比逐个等报错效率高得多。第一处是用户信息授权。微信在 2021 年 4 月之后不再支持wx.getUserInfo直接弹窗需要用户先点击某个按钮在回调里调用wx.getUserProfile才能拿到头像昵称。老代码的onLoad里自动弹窗逻辑全部失效改造要点是把取用户信息的动作绑到按钮 tap 事件上。// 老写法onLoad 里直接调2021 年后真机必然失败 // wx.getUserInfo({ success: res this.setData({ userInfo: res.userInfo }) }) // 新写法必须由用户的点击行为触发 bindGetUserProfile() { wx.getUserProfile({ desc: 用于完善会员资料, success: (res) { this.setData({ userInfo: res.userInfo }); wx.setStorageSync(userInfo, res.userInfo); }, fail: () wx.showToast({ title: 需要授权才能继续使用, icon: none }) }); }中文缩略语注意一下代码里的desc字段在wx.getUserProfile里是必填的微信审核时会审核这个文案是否与实际用途一致。老项目的授权拿到的userInfo不再包含手机号手机号需要走getPhoneNumber按钮能力这是另一套接口不要混用。第二处是基础库版本。开发者工具的「详情 - 本地设置」里把调试基础库切到 2.x 以上大部分老报错会直接消失wx.getSystemInfo这类 API 虽然废弃但还在兼容期只是控制台会刷警告。不兼容的是open-typegetUserInfo这类按钮行为它与上述授权策略属于同一批变更。第三处是 rpx 动态单位。老项目里大量用固定 px 布局在不同屏幕宽度下要么挤压要么留白新手拿到手不要急着全改优先处理首页首屏和商品列表卡片其余按需迁移。真正要修的地方是 canvas 类组件canvas 的尺寸单位是 px绘制前先通过wx.createSelectorQuery拿到节点实际宽高再做换算原样照搬大概率在真机上偏位。3. 从看页面到用组件把口罩源码里的功能模块抠出来做复用分类筛选之后下一步是挑出「能拿走直接用」的模块。这批源码里真正的宝贝不是整站代码而是手势解锁、二维码生成器、瀑布流布局、富文本解析、城市切换、圆形菜单这类只解决一个问题的独立模块。它们大多存在于完整项目内部需要你手动抠出来封装成小程序自定义组件才能在新项目里即插即用。3.1 为什么 demo 里的代码不能直接复制页面与组件有本质差异源码包里多数功能模块是用Page()写进某个业务页面的它和业务数据、事件回调、样式耦合在一起。直接复制文件只能带走界面带不走复用能力。微信小程序的组件化单位是Component()页面与组件的核心差异在于三条页面有onLoad、onShow这类生命周期组件另有attached、detached节点生命周期页面通过setData直接改自己的 data组件靠properties接收外部参数并通过triggerEvent向外部抛事件组件的样式默认隔离页面样式无法污染组件内部。判断一个模块能不能抽成组件看它和原有页面的耦合深度。二维码生成器只要输入一段字符串输出一张 canvas 图这种输入输出清晰的模块是最高优先级的抽取对象。而「你画我猜」和传感器、房间、计分都有关系抽组件的性价比就低很多更适合留在原工程里做整体阅读。3.2 手写一个可复用的二维码生成组件Component 四件套结构以资源包里的二维码生成器为例把它从原工程中抽出来做成通用组件需要四个文件qr-gen.js、qr-gen.json、qr-gen.wxml、qr-gen.wxss放在components/qr-gen/下。组件对外暴露两个属性内容content和尺寸size业务方传入任意字符串组件渲染出对应二维码。// components/qr-gen/qr-gen.js Component({ options: { multipleSlots: false }, properties: { content: { type: String, value: }, size: { type: Number, value: 200 } }, data: { codePath: }, observers: { content, size: function (content, size) { if (content) this.generate(content, size); } }, methods: { generate(content, size) { // 调用压缩包内 qrcode.js 的绘制逻辑输出图片临时路径 const codePath drawQrcode({ content, size, canvasId: qrCanvas }); this.setData({ codePath }); }, onTap() { // 向父组件抛事件比如让外部拿到二维码内容去做分享 this.triggerEvent(scan, { content: this.data.content }); } } });逻辑说明properties是组件的对外接口type: String表示这个属性接受字符串value: 是缺省值。observers类似 Vue 的 watchcontent, size两个字段任一变化都会触发回调适合二维码内容由接口动态返回的场景——数据到了才绘制避免首帧空白。画好的二维码先存成图片路径放到data.codePath再在 WXML 里用image渲染比直接操作 canvas 更方便做长按保存和分享。对应 WXML 只需三行绑定点击事件把图片路径交给 image 组件view classqr-wrap bindtaponTap image wx:if{{codePath}} src{{codePath}} stylewidth:{{size}}px;height:{{size}}px;/image canvas wx:else canvas-idqrCanvas/canvas /view补充一个细节首次渲染时codePath为空canvas 作为占位先出现绘制完成后再切换成 image保证使用方拿到的始终是图片。options.multipleSlots默认关掉多插槽只有需要向组件内部插入多个自定义区块时才必须开启开多了会影响组件性能按需设置。3.3 组件传参的隐藏坑Boolean 属性与默认值陷阱把模块组件化之后最先遇到的坑在传参类型。WXML 里传布尔值和传字符串的写法不一样这一点在从老代码里抽组件时很容易踩中。!-- 错误写法双引号里是字符串isShow 会被转成 true -- nav-bar is-showfalse/nav-bar !-- 正确写法必须用花括号包裹才能传布尔值 -- nav-bar is-show{{false}}/nav-bar !-- number 同理直接写数字也会被当字符串 -- progress-bar percent{{80}}/progress-bar这是因为 WXML 的静态属性一律按字符串解析只有双花括号绑定才保留原始类型。抽老组件时我见过太多maxLength12的写法类型被转成 String 后组件内部的数值校验和默认值逻辑全部跑偏。属性默认值也值得关注给Boolean类型的属性设置默认false外部不传时正常为关闭态一旦外部写了is-show{{false}}等同于显式赋值覆盖默认值两者语义不同调试时别被这个绕进去。顺手整理了一张组件参数排查表针对这批资源里的高频组件原始模块建议属性常见错误正确姿势富文本解析html: String直接渲染富文本里的 script先做标签过滤再传入瀑布流布局columns: Number固定写死两列不给外部改暴露列数属性内部按列分桶手势解锁points: Array只在模拟器测真机坐标偏用createSelectorQuery动态取宽高城市切换list: Array索引字母与头部吸顶不同步观察者监听 list 变化后重算索引城市切换这类模块原实现往往是页面里几百行 WXML 加 JS。抽组件时把「当前选中城市」和「城市列表」作为属性传入内部维护滚动位置选中结果通过triggerEvent抛出去外部不用关心它的滚动计算逻辑。4. 前端的联调与数据链路从 wx.request 到 node 后端组件抽完之后真正让这批源码跑起来的是数据链路。123 个项目里移动小商城带 node 前后台飞翔的小鸟带 java 后端腾讯云一站式方案则把环境配置也做成了模板。这三类工程的共同点是你不能只改前端还必须把本地后端拉起来小程序才能有数据可渲染。这一章把从封装请求到联调决算的完整链路走通。4.1 源码包里的 request 封装通常差在哪查看这批源码的网络层代码会发现一个共同短板请求封装过于简单多数只有一层wx.request包成 promise没有统一处理登录态、错误码和超时。移动小商城这类的utils/request.js稍好一些但依然把 baseURL 硬编码在业务文件里换环境要全局搜索替换。后端项目在本地跑通后前端必改的就是这个文件。4.2 一份可以直接换用的 request 封装统一收口与拦截处理我一般会建议把网络层收敛到一个文件里所有页面只依赖它。下文是一份可落地的封装代目录结构可直接覆盖源码包里的utils/request.js业务代码无需大改。// utils/request.js const request (url, method GET, data {}) { const token wx.getStorageSync(token) || ; return new Promise((resolve, reject) { wx.request({ url: ${getApp().globalData.baseURL}${url}, method, data, header: { Content-Type: application/json, Authorization: Bearer ${token} }, timeout: 10000, success: (res) { // 后端统一返回 { code, data, message }code 为 0 表示成功 const { code, data: payload, message } res.data || {}; if (code 0) { resolve(payload); } else { wx.showToast({ title: message || 业务异常, icon: none }); reject(res.data); } }, fail: (err) { wx.showToast({ title: 网络异常请检查后端服务, icon: none }); reject(err); } }); }); }; module.exports { request };逻辑说明这段代码把三个关键点做了统一收口。第一个是 token从本地缓存取出后放进Authorization请求头后端按 Bearer 格式解析一套模板适配多个老项目。第二个是超时控制timeout字段在小程序里默认 60 秒对商城的商品列表这类接口太慢统一设置为 10 秒能更快暴露后端假死问题。第三个是响应体约定所有后端返回都拆成code、data、message三层code 0才算成功其余错误直接 toast 提示并让 promise 进入 reject避免业务代码里到处写if (res.data.code ! 0)。与后端联调时我习惯在getApp().globalData里维护一份环境映射环境baseURL适用场景注意事项本地开发http://127.0.0.1:3000开发者工具模拟器工具内要关掉域名校验真机调试http://192.168.x.x:3000手机与电脑同一局域网后端监听需绑定0.0.0.0测试环境https://test-api.example.com多人联调域名需在小程序后台白名单4.3 本地联调的硬性条件域名校验、局域网 IP 与附件保存小程序与普通 Web 页面的最大不同是它强制校验请求域名必须配置在后台白名单且只认 https。开发阶段要绕开这个限制操作路径是微信开发者工具右上角「详情」-「本地设置」-「不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书」勾上这一项后 localhost 和局域网 IP 都可以直连。模拟器上跑http://127.0.0.1:3000没问题真机就不行因为手机的 127.0.0.1 指向手机自身。这时候需要把电脑的局域网 IP 填进 baseURL并保证后端监听所有网卡。node 端对应的修改// app.js老商城项目的入口文件 app.listen(3000, 0.0.0.0, () { console.log(API server listening on port 3000); });说明app.listen的第二个参数0.0.0.0表示监听所有网络接口省略它时 node 默认只监听本机回环地址局域网里的手机自然连不上。改完之后用ifconfig或ipconfig查本机 IP填回小程序的 baseURL 就能联调。另外文件下载类接口小程序保存附件用wx.downloadFile加wx.env.user_data_path拼路径落到本地这个 API 在开发者工具里路径是模拟的真机上才是真实沙箱目录调试时不要被路径不一致误导。4.4 长连接的正确姿势素材里的 TCP/IP 长连接项目怎么落地资源包里有「TCP,IP长连接」这个专题工程需要提前澄清一个技术前提小程序运行在微信客户端提供的 WebView 与原生层混合环境里页面 JS 没有操作裸 socket 的能力。TCP/IP 这种传输层协议在小程序端不是不能提而是你只能通过wx.connectSocket发起 WebSocket 连接由微信客户端完成底层的 TCP 握手和收包业务侧拿到的是经过解析的消息事件。const socket wx.connectSocket({ url: ws://192.168.1.20:3000/ws, header: { token: wx.getStorageSync(token) } }); socket.onMessage((res) { const msg JSON.parse(res.data); // 按消息类型分发到页面长连接心跳由服务端主动下推 console.log(recv msg type:, msg.type, msg.payload); });源码包里所谓「TCP/IP 长连接」真正落地时几乎都是 WebSocket 模拟出来的长连接语义。要设计可靠的长连接需要关注断线重连与心跳。心跳不能只靠前端定时发 ping要记录服务端最后一次下推时间超过阈值后主动重连并做消息补偿。IM 类应用必须带上自增序列号否则断线期间的离线消息会丢。这套逻辑在「会议精灵」「你画我猜」这类实时项目中都要自己补齐原包里基本没有。5. 批量验证与打包让 123 个项目都能在本地快速起服务最后一章聚焦收尾动作。面对 123 个工程逐个手工验证不现实写一个 Node.js 脚本扫描所有子目录的 app.json检查pages数组指向的页面文件是否真实存在可以一次暴露大部分启动即白屏的病根。const fs require(fs); const path require(path); const rootDir ./mp_projects; fs.readdirSync(rootDir).forEach((name) { const appJsonPath path.join(rootDir, name, app.json); if (!fs.existsSync(appJsonPath)) return; const app JSON.parse(fs.readFileSync(appJsonPath, utf8)); const missing (app.pages || []).filter((p) { return !fs.existsSync(path.join(rootDir, name, ${p}.js)); }); if (missing.length) { console.log([${name}] 缺少页面文件: ${missing.join(, )}); } else { console.log([${name}] 基本结构完整); } });这段脚本先读每个子目录的app.json如果连这个文件都没有说明它不是独立小程序工程跳过即可例如纯组件演示目录或纯素材目录。然后遍历pages数组把每个页面路径拼接成.js文件检查存在性一旦缺失就打印出来。这类缺失常见原因是源码包解压时大小写错乱或者页面路径在迁移后被改名却漏改 app.json。脚本跑完后再配合微信开发者工具「详情-本地设置」开启 ES6 转 ES5以及调试基础库版本切换到 2.x release 版本大部分老项目都能正常启动。打开后如果还有报错按这条顺序排查白屏优先看控制台有没有脚本报错脚本报错优先看 API 版本图片裂开看 network 面板里的请求域名把「不校验合法域名」勾上即可临时解决自定义导航栏错位就检查是否用了getMenuButtonBoundingClientRect动态算高度。最后留一个这批源码里最容易忽略的小技巧像芒果TV、B站首页这类仿制项目的navigationBarTitleText和分享卡片文案在app.json的window与页面级 json 里都能改改成自己的品牌名后记得保留navigationStyle的默认配置否则胶囊按钮与自定义导航栏会重叠下拉刷新也会失去原生加载动画。本文还有配套的精品资源点击获取