简介：一份汇集了100个微信小程序源码的学习资料包，覆盖从基础到进阶的多个应用场景，面向想系统入门或提升小程序开发能力的开发者、学生及初级工程师。源码按功能模块展示JavaScript逻辑层、WXML页面结构、WXSS样式布局、页面生命周期、数据管理与本地存储、wx.request网络请求等核心知识点，同时包含地图、支付、分享等常用API的集成写法，以及常见错误处理与性能优化思路，能够帮助读者理解小程序运行原理、规避典型坑点并快速复用成熟方案。压缩包整体约185.3MB，内含完整工程目录与可运行代码，目录结构清晰，便于按需检索、对照练习和二次开发。目前已有553人学习下载，适合需要参考真实项目、积累调试经验或寻找创新灵感的开发者收藏使用。 做微信小程序开发这么多年，源码是让我最有安全感的依据。页面路由异常、支付签名不通过、视频在iOS上全屏错位、导航栏高度对不齐……这一堆问题，最终都得到源码里找答案。有人开玩笑说，小程序源码相当于这个运行时的嵌入式内核，业务逻辑、配置权限、原生组件兼容性全被它管着，这话一点不夸张。最近我同时跟进原生微信小程序和uni-app跨端项目，从支付v3签名串一路调到内嵌webview的工具栏返回箭头，踩坑不少，也攒了很多可以直接复用的处理思路。
这篇文章适合三类人：正在做小程序毕设或者课程设计的学生，需要在公司维护线上小程序的前端或客户端开发，以及考虑用uni-app收编多端业务的团队负责人。我不会通篇讲理论，主要分享实际项目里怎么读源码、怎么改源码、怎么用源码快速定位线上问题，再附上一些我经历过的高频报错和解决办法，希望你看完能少走几步弯路。
1. 源码层面想清楚：技术栈与目录结构是第一步
1.1 原生、uni-app还是Taro，该怎么选
项目落地前，技术栈选型是最影响后续源码可维护性的决定。这个问题没有标准答案，但可以从团队基础、交付目标和项目复杂度来倒推。微信原生小程序源码的形态最直接，wxml、wxss、js、json四类文件各自负责视图、样式、逻辑和配置，微信开发者工具内置的文档和报错都集中在这套体系里，排查问题的路径最短。
uni-app把源码组织成vue文件，编译后产出小程序dist目录，同一套代码可以再发H5和App；Taro则更像严肃的工程化框架，适合已经重度依赖React或Vue生态的团队。我的个人感受是：毕设或工具型小程序，原生优先；团队已经有Vue技术栈并需要多端交付，直接上uni-app；如果是几十人协作的跨端大项目，再考虑Taro那套复杂构建链路。这里真正的风险不是选错框架，而是选完以后不读源码——很多人把框架当成黑盒，出了问题先去社区提问，其实自己打开编译产物看一遍比问谁都靠谱。
1.2 拿到源码先看目录，入口文件不要跳
不管选哪种方案，拿到一份源码后第一件事是看目录结构。原生小程序根目录下的app.js是全局逻辑入口，app.json管理页面路由、窗口外观和tabBar，app.wxss是全局样式；pages目录放页面，components目录放自定义组件，utils目录放工具函数。app.json里注册页面的顺序直接决定页面栈的初始状态和首页顺序，经常有人新增页面忘注册，编译时报“页面路径错误”，这种问题在源码里五秒钟就能定位。
uni-app项目一般有一个src目录，里面才是你写的源码，编译后才会生成小程序平台的产物。这里有个非常容易踩的坑：HBuilderX项目默认把源码放在src，而微信开发者工具打开的是dist目录，有些同学两边都改，结果一编译被覆盖，改半天白干。我接过别人发的“源码”，第一件事永远是确认它是源码目录还是编译目录，再决定要不要动手。读懂源码结构之后，顺着app入口一层层追调用链，基本不会迷路。
2. 源码里的核心模块：配置、支付与组件兼容
2.1 全局配置、路由与顶部导航栏高度的正确姿势
顶部导航栏高度是小程序里问得最多的问题之一。做自定义导航时，直接用固定像素值几乎必然在部分机型上出问题，因为小程序标题栏的高度与系统状态栏、胶囊按钮位置强相关。稳妥做法是拿wx.getMenuButtonBoundingClientRect()获取胶囊按钮的矩形信息，再通过wx.getSystemInfoSync()拿状态栏高度，然后按“导航栏高度 = 胶囊上边界到屏幕顶部距离 + 胶囊高度 + 胶囊下边界到状态栏底部距离 × 2”计算。听起来公式绕，但真机基本能对齐。
如果只是调整标题栏，app.json里的window配置是全局生效的，"navigationStyle": "custom"一旦打开，所有页面都需要自己处理返回按钮和胶囊避让。很多人在某个页面发现返回箭头没了，第一反应是去页面json里找配置，其实直接回app.json看全局配置就明白了。顺带提醒一句，如果做微信小游戏，入口文件是game.js和game.json，逻辑完全不同，别和小程序页面源码混在一起看。
2.2 微信支付v3对接，签名串细节决定成败
支付是商业化小程序躲不开的模块，v3接口相比v2文档规范不少，但签名要求也更严格。开发群里最常见的求助就是“签名错误”，我复盘下来问题高度集中在三处：证书序列号配错、签名串格式不对、nonceStr和timestamp不一致。v3签名串的规范格式为“请求方法、请求路径、请求时间戳、请求随机串、请求报文摘要、空行”，每个字段中间要用换行符分隔，最后一个字段后还要补一个换行。请求报文摘要是服务端用商户私钥对请求体做SHA256后得到的十六进制字符串，整个过程必须和官方API文档逐字对齐。
我见过太多人把文档里的\n当成字面量拼进去，或者把换行符误写成空格，结果验签一律失败。另一个关键点：v3签名必须在后端完成，绝不能把商户私钥放进小程序前端源码。前端小程序端只负责用wx.requestPayment拉起收银台，代码大致如下：
wx.requestPayment({ timeStamp: res.timeStamp, nonceStr: res.nonceStr, package: res.package, signType: 'RSA', paySign: res.paySign, success: (result) => { /* 跳转支付结果页 */ }, fail: (err) => { /* 提示用户重试 */ } });这里有个很容易被忽略的坑：package是wx.requestPayment的保留参数字段，参数名必须原样传，不要因为它在JavaScript里是保留字就改成packageName，否则支付回调参数校验会失败。支付结果到底以什么为准？一定要以后端异步通知为准，前端success回调只能做引导，不能当最终业务状态。
2.3 原生组件兼容性的三个高频改法，源码层直接处理
组件兼容问题在小程序里很常见，而且经常只在真机出现。第一个高频坑是iOS里swiper直接嵌套video，全屏播放时错位。旧版本微信里video是原生组件，层级最高，swiper的transform对原生层不生效，全屏方向容易乱。不要非要用cover-view死扛，最省事的方案是封面图代替视频、点击再播放，或者在fullscreenchange事件里手动收起全屏并重置样式。
第二个坑是输入框唤起软键盘后遮挡查询内容。这个问题在安卓上尤其明显，不同输入法行为不一致。我试过比较稳的方案是：输入框固定在顶部，内容区用flex布局，监听bindkeyboardheightchange事件拿到键盘高度，动态给内容区加padding或手动滚动到输入框位置。某些版本用adjust-position也能缓解，但别指望它覆盖所有机型。
第三个坑是内嵌webview后，H5页面工具栏左侧返回箭头消失。这个大概率不是小程序源码的问题，而是H5页面的history.pushState或全屏展示改变了WebView的工具栏状态。排查时先回到H5源码检查路由变更，再看是否需要在小程序端的webview组件层做返回拦截。如果只是想让H5通知小程序返回，可以用wx.miniProgram.postMessage，两边源码一起改才能根治。
3. 一套小程序源码从搭建到真机预览的完整流程
3.1 初始化项目，源码目录先摆正
新项目开发，原生小程序直接用微信开发者工具创建最省事。登录后选择“小程序”，填AppID或测试号，框架选JavaScript或TypeScript，工具会自动生成基础源码目录。生成后先改project.config.json里的appid与项目名，再在app.json注册页面，之后就能在编辑器里同步写wxml、js和wxss。
如果用uni-app，我习惯用HBuilderX创建项目，模板选uni-app，然后通过菜单“运行 -> 运行到小程序模拟器 -> 微信开发者工具”打开发布产物。再次强调：HBuilderX里改的是src源码，微信开发者工具里展示的是dist编译产物，二者不要混改。别人传给你一个“uni-app源码包”，拿到后先看根目录是src还是dist，把目录结构理清再动手，否则很容易改错地方。初始化后建议第一时间初始化git，并把node_modules、unpackage等编译产物加到.gitignore。
3.2 appid、request合法域名与调试开关，别等真机再抓狂
小程序开发阶段和正式环境的差别，最典型的就是网络请求。开发者工具可以在详情面板勾选“不校验合法域名”，让本地调试顺畅，但真机预览和线上环境必须在微信公众平台配置request合法域名。我见过最多的情况是：开发者工具里接口一切正常，一到真机全部失败，控制台报“url not in domain list”，一看就是域名没配。
除此之外，project.config.json里的urlCheck建议在开发期设为false，可以减少无谓的校验报错。真机调试优先用“真机调试2.0”，它能把实时console和网络请求同步到开发者工具，比单纯预览能少刷屏几次。团队协作时，公用的AppID权限要提前在成员管理里配置好，否则换台电脑登录就会被提示“不是开发者”，很多人卡在这一步，其实只要让项目管理员把微信号加进项目成员就能解决。
3.3 上传、审核与版本管理，发布前的最后几件事
本地调试完不代表能直接上线。开发完成后，点击“上传”把源码和编译产物提交到微信公众平台，再在后台提交审核和发布。上传前建议把app.json里的permission字段过一遍，尤其是用到getLocation、相册授权时，缺少声明很容易被平台驳回。另一个容易被忽视的细节是页面数，整个小程序源码包有体积限制，图片和依赖不要一味堆在本地，能走CDN的走CDN，能让后端返回的不要写死在前端源码里。
版本管理一般就在项目根目录用git，至少把node_modules、dist/unpackage这类编译产物ignore掉，不然仓库体积会膨胀得非常快。同事clone下来后执行依赖安装命令，就能把环境恢复起来。发布上线只是一个开始，真正的维护战场在小程序线上容易出现的问题，下一节我重点讲几个我实战里处理过的调试场景。遇到线上反馈时，最高效的路径永远是：先看报错日志，再对照源码。
4. 上线后最容易翻车的几个调试场景
4.1 PC端抓包分析小程序请求，先确认边界再动手
线上问题里，网络请求类占比很高。最简单的一层是用微信开发者工具的Network面板，直接记录请求头、响应体、耗时，这个工具对日常排查足够了。如果要做更深层的请求分析，比如查看加密字段、验证请求顺序，可以借助抓包工具对PC端小程序流量做HTTPS解密。要注意边界：抓包分析只适用于你自己开发或已获授权测试的小程序，不要对别人的线上包做越权操作。
用抓包工具抓PC端小程序，本质和拦截普通HTTPS流量一样，无非是设置代理端口、导入根证书、重启进程，然后再在小程序里复现操作。实际执行中常见的坑有三个：证书没装进系统信任区导致TLS握手失败；微信更新后进程重启，代理失效；小程序如果启用证书固定，即使证书安装正确也未必能解出明文。这些情况都说明抓包只是辅助，最终定位和修复仍然要回到小程序源码一层一层查，不要幻想一个工具解决所有问题。
4.2 常见报错速查与解决套路，直接收藏就行
下面这个表格是我在实战里高频遇到的，按现象、原因、解法整理好，遇到类似问题可以先查表再动手：
| 报错/现象 | 常见原因 | 排查/解决办法 |
|---|---|---|
| 页面路径错误 | app.json里没有注册该页面 | 检查pages数组是否包含页面路径 |
| url not in domain list | request合法域名未配置 | 后台配置域名或开发阶段关掉域名校验 |
| paused in debugger | 调试器断点或sourcemap断点残留 | 清除全部断点，重启调试会话 |
| video不能播放 | 视频源域名未加白名单、格式或编码不兼容 | 检查域名配置，真机看console报错 |
| 提示不是开发者 | AppID无权限或登录账号不对 | 重新登录，由管理员添加项目成员 |
| H5工具栏返回箭头消失 | H5侧路由状态或webview配置异常 | 回H5源码检查history与全屏逻辑 |
报错信息是最直接的线索，很多人拿到报错不去翻译，直接乱改代码，反而把问题扩大。我的习惯是先复制完整错误日志，再搜索关键词，必要时在源码里加临时日志，逐步缩小范围。比如“video不能播放”，先看是网络层问题还是解码层问题，再用不同格式的测试视频验证，比上来就替换播放器方案要靠谱得多。
4.3 源码反编译风险与工程规范，别等出事再补
小程序发布后，包资源会下载到用户本地，有心人用反编译工具可以还原出和源码非常接近的工程。这个风险是真实存在的，所以任何机密逻辑、密钥、签名证书都不能写进小程序包。我的工程规范一直是三层：前端源码只做展示与交互；核心算法放到后端；敏感接口做风控，比如session校验、频控、行为验证。
源码安全还涉及版本管理。上线前开启代码压缩上传，设置合理的项目权限，定期检查git历史里有没有误提交的测试key。很多团队忽略这一点，等到密钥泄露才追责，到那时候已经晚了。平时阅读源码也是一种提升，小程序代码结构清晰，跟着入口文件追一遍调用链，训练的是读核心系统源码的底子。我的建议是维护一个自己的调试笔记，把每种报错对应的源码位置记下来，三个月后你会发现排查速度比之前快一倍。
踩过的坑多了以后，我接手任何小程序项目都会按固定顺序做：先通读入口文件与全局配置，再拉通支付、登录授权这条业务主链路，最后才去看具体页面UI。顺序一旦固定，很多潜在风险在动手前就能暴露。最后分享一个小技巧：遇到某个API行为不明确时，直接在开发者工具里按ctrl+p搜索对应的wx.xxx调用位置，再顺着上下文读一遍源码，通常比翻文档更快，也更贴近真实运行环境。
本文还有配套的精品资源，点击获取
