微信小程序开发全攻略·文章版｜00 总览：74集学习路径与知识地图

微信小程序 74 集学习路径总览：从注册账号到发布上线，一张地图带你走完全程

📊 交互式知识图谱在线版：

摘要

：这是《2026 最全微信小程序开发全攻略》的总览篇，对应 B 站合集 BV18VTW6TEwE 全部 74 个分 P（总时长约 11 小时 48 分）。本文不展开细节，而是先给你一张 "地图"：整套课程如何从环境搭建，逐级走到全局与页面配置、常用组件、事件与模板渲染、路由交互网络与音乐播放器实战，最后落到进阶能力、登录体系与自定义组件。学完这张地图，你会清楚每个模块在整条学习链里的位置、前置依赖、学完能做出什么，以及一天速通时每个小时该干什么。本文适合：刚决定学小程序、还不知道从哪下手的零基础或前端转岗新人；也适合学了一半、想回头校准进度、查漏补缺的同学。照着本文的模块顺序与里程碑走，最终你应当能独立做出并真机发布一个属于自己的微信小程序。

[1. 这套课程讲什么：74 集全景一览](#1. 这套课程讲什么：74 集全景一览)
[2. 七个模块分别在学什么：逐模块拆解](#2. 七个模块分别在学什么：逐模块拆解)
[3. 74 集完整学习路径表](#3. 74 集完整学习路径表)
[4. 一天速通时间安排建议](#4. 一天速通时间安排建议)
[5. 前置准备与推荐学习方法](#5. 前置准备与推荐学习方法)
[6. 贯穿全程的两条主线：数据流与页面栈](#6. 贯穿全程的两条主线：数据流与页面栈)
[7. 各阶段里程碑与验收标准](#7. 各阶段里程碑与验收标准)
[8. 常见学习误区与避坑指南](#8. 常见学习误区与避坑指南)
[9. 学习打卡清单](#9. 学习打卡清单)
[10. 知识图谱](#10. 知识图谱)

1. 这套课程讲什么：74 集全景一览

微信小程序是内嵌在微信里、"即用即走" 的轻量级应用。它的技术栈和网页前端高度相似 ------ 布局写 WXML（相当于小程序版 HTML）、样式写 WXSS（相当于 CSS，额外多了 rpx 响应式单位）、业务逻辑写 JavaScript，再叠一层 JSON 配置；但它又不止是 "跑在微信里的网页"，因为它额外提供了一整套原生组件和一组 wx.* 开头的微信能力 API：登录、支付、分享、扫码、定位、缓存、网络请求、音视频、地图、相机等等。

这套课程就是把 "从什么都不会，到独立发布一个小程序" 的完整链路拆成了 74 集。它的组织逻辑非常清晰，可以概括成一句话：先把环境跑起来，再学会配页面、摆组件、响应交互，然后把多个页面串起来并联上网，最后补上真实业务绕不开的登录态、缓存、上传与组件复用。

对一个完全没接触过的人来说，74 集听起来挺吓人；但拆开看，它其实只要求你分七步把一个空项目 "养大"：先让它能跑，再让它能配，再让它好看，再让它能动，再让它能联网、能导航，再让它认得用户、存得住数据，最后把重复的部分整理干净。每一步都只比上一步多学一点，没有哪一步是凭空跳跃的。

全课程拆为 7 个模块、对应 7 篇分册笔记，外加你正在读的这篇总览。各模块之间是层层递进的依赖关系，而不是并列的知识点拼盘：

如果你是第一次接触这套课程，建议先把本页从头到尾读一遍，在脑子里建立 "七块拼图" 的位置感，再按顺序去看每一集。知道下一个知识点会挂在哪、前面学的东西后面什么时候会用到，学起来就不会迷路。这也是为什么总览要放在最前面 ------ 它本身不教你写任何一行代码，但它决定了你后面 73 集是 "越学越清晰" 还是 "越学越乱"。

模块一、二负责 "打地基"：让你能把项目跑起来、能配出想要的窗口和页面。
模块三、四负责 "画界面 + 响应交互"：认识官方组件，学会事件绑定和数据渲染。
模块五负责 "连成应用并联网"：页面路由、交互弹窗、网络请求，并用一个完整的音乐播放器把前面学的全串起来。
模块六、七负责 "补生产能力"：本地缓存、文件上传、分享裂变、用户登录，以及把重复 UI 抽成自定义组件。

📝 素材覆盖说明：课程为 B 站合集 BV18VTW6TEwE（UP 主 "汉室幽而复明"，2026-07-03 发布），共 74 个分 P、总时长约 11 小时 48 分。其中仅第 1 集本地有 AI 总结（据实整理）；其余各集无字幕、无 AI 总结，分册笔记依据 "集标题 + 微信小程序官方标准 API 与权威知识" 补全，正文补全处用 📝 标注。所有内容以微信官方文档（

developers.weixin.qq.com

）为准。

2. 七个模块分别在学什么：逐模块拆解

下面把每个模块 "为什么学、学什么、学完能做什么" 讲清楚，方便你判断自己当前处在哪个阶段。

模块一・入门与环境搭建（第 1-4 集，约 36 分钟）。 这是整个课程的第一步，目标只有一个：把开发环境从零搭起来。内容包括小程序的产品定位与优势、在微信公众平台注册账号并拿到 AppID、安装稳定版微信开发者工具、看懂标准目录结构与 .wxml / .wxss / .js / .json 四类文件的分工，最后手写一个点按钮就变文字的 Hello World。学完你应当能新建并运行一个自己的项目。这一阶段几乎没有难度，但它解决了新手最常见的 "不知道在哪写代码" 的问题。

模块二・全局与页面配置（第 5-15 集，11 集，约 2 小时）。 跑起来之后，就要学会 "怎么配"。本模块讲 app.json 全局配置（pages 路由注册、window 窗口表现、tabBar 底部标签栏）、单个页面 .json 的局部配置如何覆盖全局、用 App() 注册小程序与全局生命周期、用 Page() 定义页面的 data 与页面生命周期（onLoad /onShow/onReady 等）。这一块是后面所有页面的地基 ------ 你以后每写一个页面都要跟 data、生命周期和配置打交道。学完你应当能配置出带自定义导航栏和底部 tab 的多页小程序骨架。

模块三・常用组件全解（第 16-31 集，16 集，约 2 小时 20 分）。 这是内容最密的模块之一，逐个讲官方组件：视图容器（view /scroll-view/swiper 轮播）、基础内容（text /rich-text）、表单组件（button /input/checkbox /radio/picker /switch）、导航（navigator）、媒体（image /audio/video）、地图 map、相机 camera 等。学完你应当能用这些组件拼出一个静态的、长得像模像样的页面。组件是 "积木"，积木认全了，画界面就是拼搭。

模块四・事件系统与模板渲染（第 32-41 集，10 集，约 1 小时 27 分）。 光有静态界面不算应用，本模块让界面 "动起来"：事件的分类与绑定（bindtap /catchtap、冒泡与捕获）、事件传参（data-*）、条件渲染 wx:if 与 hidden 的区别、列表渲染 wx:for 与 wx:key 的作用、以及 template 模板的定义与引用。学完你应当能写出 "点击按钮加一"" 根据数据动态渲染列表 ""抽一段重复结构成模板" 这类交互逻辑。

模块五・路由、交互、网络与播放器实战（第 42-60 集，19 集，约 3 小时）。 这是篇幅最长、也最 "像真实项目" 的模块。四类页面跳转 API（navigateTo / redirectTo / reLaunch / switchTab）的区别与页面栈概念、交互反馈（wx.showToast/showModal /showActionSheet）、网络请求 wx.request 的封装、下拉刷新与上拉触底，最后用一个完整的音乐播放器把路由、请求、媒体组件、页面传参全部串起来。学完你应当能把多个页面连成一个有导航、能联网、有完整交互的应用。

模块六・进阶能力与登录体系（第 61-69 集，9 集，约 1 小时 28 分）。 到这里，你已经能做一个 "看起来完整" 的玩具项目；本模块补的是真实业务必备的能力：模块化组织代码、文件上传、本地缓存（同步与异步两套 API）、微信分享裂变，以及最核心的用户登录体系 ------ 从 wx.login 拿临时 code、到服务器端 code2Session 换 openid、再到自定义 token 的存储与鉴权。学完你应当能独立实现一套安全的登录与数据上传闭环。

模块七・自定义组件（第 70-74 集，5 集，约 51 分钟）。 最后一步是 "从会用组件，到会造组件"。用 Component() 构造器封装可复用 UI，通过 usingComponents 注册，吃透 properties /data/methods / 组件生命周期，用 slot 插槽做内容分发，用 triggerEvent 做父子通信，最终亲手封装一个可复用的 Dialog 弹窗。学完你应当能把项目里重复的卡片、弹窗、导航条抽成独立组件，做到一次编写、处处复用。

为什么这套课要把 74 集拆成 "层层依赖" 而不是按知识点平铺？因为小程序是一个有状态、有界面、有导航 的完整运行时，脱离了上下文单点学 API 基本记不住。比如你单独背 "wx.navigateTo 保留当前页跳转 "，毫无感觉；但当你在模块五把两个页面用它连起来、亲手点了返回键看到上一页还在，这个区别立刻就刻进脑子了。所以课程的编排逻辑是：每学一个新东西，都尽量让它挂在一个你已经做出来的东西上。模块一做出空项目，模块二给它配窗口，模块三往上摆积木，模块四让积木响应点击，模块五把几屏连起来联网，模块六给它加上账号和数据持久化，模块七把重复的部分拆干净。

你也可以把这七个模块理解成盖房子：模块一是打地基通水通电，模块二是砌墙留出门窗位置，模块三是往里摆家具，模块四是把家具装成能开合、能推拉，模块五是把好几间屋用走廊连起来接通自来水，模块六是给房子装门锁和电表，模块七是把重复的门窗模具标准化。地基不打就摆家具，后面一定返工 ------ 这就是为什么反复劝你别跳模块。

3. 74 集完整学习路径表

模块	模块名	集范围	集数	时长	核心内容
01	入门与环境搭建	1-4	4	36:30	小程序定位、账号申请、开发者工具、目录结构
02	全局与页面配置	5-15	11	2:00:56	pages/window/tabBar、单页配置、App 注册、生命周期、data
03	常用组件全解	16-31	16	2:20:27	视图 / 表单 / 导航 / 音视频 / 相机 / 地图等组件
04	事件系统与模板渲染	32-41	10	1:27:04	事件分类 / 传参、条件 / 列表渲染、wx:key、模板
05	路由・交互・网络与播放器实战	42-60	19	3:03:27	四类路由、交互弹窗、wx.request、下拉 / 上拉、音乐播放器
06	进阶能力与登录体系	61-69	9	1:28:11	模块化、上传、缓存、分享、用户信息、登录 code2Session
07	自定义组件	70-74	5	51:21	Component、properties/methods、插槽、Dialog 实战与事件

📌 学习主线是层层递进的：模块 1-2 打地基（能跑、能配），模块 3-4 学 "画界面 + 响应交互"，模块 5 把页面串成应用并联网（含完整播放器实战），模块 6-7 处理真实业务必备的登录态、缓存、上传与组件复用。

建议不要跳模块

，后面会反复用到前面的配置与事件知识。

这张表里有几个数字值得多看一眼。集数最多的是模块三（16 集，全是组件）和模块五（19 集，全是实战与联网）------ 这两块也是整个课程 "信息密度最高、最需要动手" 的地方，时间预算要给足。反过来，模块七只有 5 集，却站在整个课程的顶端：它要求你已经把前面所有东西都用熟了，才能理解 "为什么要把界面拆成组件"。时长上，全课程约 11 小时 48 分，听一遍是半天多，但真要每集都跟着敲、把报错都解决，实际花的时间通常是听课时长的两到三倍 ------ 这很正常，说明你真的在学，而不只是在看。

4. 一天速通时间安排建议

如果你有一整天的整块时间，可以参考下面这个节奏把 74 集过一遍。注意：这里的 "速通" 指 "跟完一遍、每个例子都敲过"，而不是 "看完视频就完事"------ 看视频不动手，第二天就忘光。

时段	对应模块	目标产出
第 1 小时	模块 1 + 模块 2 前半	装好工具、拿到 AppID、跑通项目，配好 pages/window
第 2-3 小时	模块 2 后半 + 模块 3	理解生命周期 /data，能用常用组件搭出静态页面
第 4-5 小时	模块 4	事件绑定 / 传参、条件与列表渲染、模板复用
第 6-8 小时	模块 5	页面跳转、弹窗、wx.request 封装，完成音乐播放器实战
第 9-10 小时	模块 6	缓存、上传、分享，跑通 wx.login 登录全链路
第 11 小时	模块 7	抽出自定义组件，完成可复用 Dialog
收尾	发布上线	真机预览 → 上传 → 提交审核 → 发布属于自己的小程序

一天跑通的关键，是把时间大头留给模块五（实战）和模块六（登录）。这两块最容易 "看懂了却写不出"，必须反复敲。

如果你没有一整天的整块时间，也可以把这张表摊到两三周：工作日每晚啃一两个模块，周末集中做模块五的实战。节奏可以松，但顺序不要乱 ------ 地基没打完就去碰实战，只会在反复报错中消磨信心。无论你用什么节奏，建议每完成一个模块就回到本页的打卡清单打个勾，让进度看得见。看得见的进度，是能坚持学完 74 集最重要的动力。

5. 前置准备与推荐学习方法

前置知识： 了解基础 HTML / CSS / JavaScript 即可。没有前端基础也能学，但建议先认识变量、函数、对象、数组与简单事件 ------ 否则你会把大量时间花在 " 这个 function 是什么 " 上，而不是小程序本身。

必备工具： 稳定版微信开发者工具、一个小程序账号（学习期可用测试号）、一台能扫码的手机微信（用于真机预览）。

学习方法：

边看边敲。每个组件、每个 API 都在开发者工具里真实跑一遍，不要只盯着视频。看懂和能写出来之间，差的就是这一遍键盘。
善用调试器 。看数据用 AppData 面板，看网络用 Network 面板，打日志用 console.log，看结构样式用 Wxml 面板。
"改了不生效" 先清缓存。这是新手第一高频问题：先点编译，不行就 "清缓存 → 全部清除" 再重新编译。
代码记不住就查官方文档。小程序 API 高度标准化，没有人能背下全部参数；真正要刻在脑子里的只有两条主线 ------ 下面第 6 节。

除了这四条，再补充几个能显著提速的习惯。其一，建立自己的代码片段库 ：把跑通的请求封装、弹窗、列表渲染存成模板，下次新项目直接复制改，比从零写快得多。其二，遇到报错先读红色提示 ，而不是急着问人 ------ 开发者工具的 Console 会明确告诉你是哪个文件、哪一行、什么原因，九成问题看一眼报错就有方向。其三，不要追求一次写对 ，先跑起来再打磨，让程序 "能跑但丑" 远胜过 "想了半天还没开始"。其四，每个模块学完做个小回顾：合上工具，用自己的话讲讲这节讲了什么，讲不顺的地方就是没吃透的地方，回去再敲一遍。

最后给不同背景的同学一句定心丸：如果你已经会前端，这套课会很轻松，重点放在小程序特有的部分 ------rpx、App/Page 生命周期、wx.* API、页面栈和登录链路；如果你是零基础，也别被 "74 集" 吓到，平均每集只有十来分钟，真正的难点集中在模块五和模块六，其余都是熟悉规则。按里程碑一步步来，发布上线并不是遥不可及的事。

6. 贯穿全程的两条主线：数据流与页面栈

学完整套课程后，你会发现所有知识点其实挂在两条主线上。抓住这两条，零散的 API 就不再是死记硬背的清单。

主线一：数据流（setData 驱动视图）。 小程序是 "数据驱动视图" 的：界面长什么样，由页面 data 决定；用户操作触发事件函数，函数里调用 this.setData() 修改数据，框架再自动把界面重新渲染。你在模块二学 data、模块三学组件绑定 {``{}}、模块四学事件与列表渲染、模块六学缓存与登录态、模块七学组件 properties，本质上都是在围绕 "数据从哪来、怎么变、变了之后界面怎么跟着变" 这一件事展开。记住口诀：改数据，用 setData；直接给  this.data.x 赋值，界面不会更新。

主线二：页面栈（路由与跳转）。 小程序用一个 "栈" 管理打开过的页面：navigateTo 入栈、navigateBack 出栈、redirectTo 替换当前栈顶、reLaunch 清空整个栈、switchTab 专门跳 tabBar 页。理解了栈，你就明白为什么有的跳转 "返回" 键能回到上一页、有的不能，为什么 tab 页之间要用 switchTab 而不是 navigateTo。这条主线集中在模块五，但模块二的 pages 注册、模块六的分享 path、模块七的组件传参都和它有关。

为什么要在总览里就把这两条主线点出来？因为大多数人学到后面觉得 "API 太多记不住"，本质是没有抓住纲。数据流回答的是 "界面凭什么长这样"------ 一切显示都来自 data，一切变化都走 setData；页面栈回答的是 "我现在在哪、能退回到哪"。剩下的组件、缓存、登录、组件化，全都是这两条主线在不同场景下的具体应用。比如模块六的登录 token，既要靠数据流存进 data 又要靠缓存持久化；模块七的 properties，就是数据流在父子组件之间的传递。抓住这两条纲，后面每学一个新 API，你都能问自己一句："它是在动数据，还是在动页面栈？"------ 归类清楚，就不再是零散记忆。

7. 各阶段里程碑与验收标准

怎么判断自己 "真的学会了"，而不是 "感觉看懂了"？用下面这组里程碑自测，每达成一个，就对应一个模块的真正闭环：

里程碑	对应模块	验收标准（能独立做到）
能搭静态页	模块三	不用照抄教程，用 view/text/image/button 拼出一个商品列表页
能响应交互	模块四	列表能渲染、点按钮能增删条目、表单能取值
能联网串页面	模块五	用 wx.request 拉数据，两个页面之间能跳转传参并返回
有登录态与持久化	模块六	启动自动登录、token 存本地、退出再进不用重新登录
组件化复用	模块七	把一个重复弹窗抽成自定义组件，两个页面都能用
成功发布	收尾	真机预览无误 → 上传 → 提交审核 → 发布

8. 常见学习误区与避坑指南

把新手最容易掉的坑提前说在前面，能帮你省下大量排查时间：

只看视频不动手。 小程序是练出来的，不是看出来的。一个 API 你看十遍演示，不如自己敲一遍报错再修好。
跳模块学。 直接上来就学登录或自定义组件，结果连 data 和页面注册都没搞懂，只会处处报错。后面模块默认你已经会前面的。
改数据不生效。 直接写 this.data.x = 1 而不用 this.setData，是初学者第一大错。
新建页面不注册。 页面路径没加进 app.json 的 pages 数组，小程序根本不知道这个页面存在，结果白屏。
JSON 里写注释或尾逗号。 .json 文件不支持 // 注释和多余尾逗号，一旦写了整个项目编译失败。
真机请求被拦。 开发阶段记得在工具详情里勾选 "不校验合法域名"；上线前再去后台配置 request /uploadFile 合法域名。
AppSecret 写进前端。 这是安全大忌。AppSecret 只能放在你自己的服务器，前端永远只碰 AppID 和临时 code。
缓存当数据库用。 本地缓存只是副本，适合存 token、偏好，不适合存需要实时一致的核心业务数据。

再补两条心态层面的坑，它们比技术坑更影响能不能学完。一是贪多求快 ：总想跳过练习直接看下一集，结果看了二十集却一个完整项目都没做出来。小程序是手艺活，手熟比眼快重要。二是遇到报错就怀疑 "是不是我不适合编程"：报错是这个职业的日常，老手一天也会撞上几十个红色提示，区别只是他们读报错比你快。把每次报错当成一次定位问题的训练，而不是对自己的否定。三是不做综合项目：把七个模块分别学完后，一定要逼自己独立做一个完整小应用 ------ 哪怕是个待办清单、个简单的记账工具 ------ 从注册、配页面、写组件、联网到登录走通一遍。只有在一个真实小项目里，这些分散的知识点才会真正长在一起，变成你自己的能力。

9. 学习打卡清单

完成模块一：开发环境就绪并跑通第一个小程序
完成模块二：掌握全局 / 页面配置、生命周期与 setData
完成模块三：能用常用组件独立搭出静态页面
完成模块四：掌握事件、条件 / 列表渲染与模板
完成模块五：跑通路由、网络请求与音乐播放器实战
完成模块六：掌握缓存 / 上传 / 分享与登录全链路
完成模块七：能编写带插槽和事件的自定义组件
综合实战：独立完成一个完整小程序并真机预览
已上传代码、提交审核并成功发布上线

10. 知识图谱

整张课程的知识结构，可以用下面这张 "模块依赖 + 能力递进" 的关系图静态呈现：

cpp 复制代码

模块一 入门与环境搭建（能跑起来）
   │  产出：项目骨架 / AppID / 开发者工具
   ▼
模块二 全局与页面配置（能配）──────────┐
   │  产出：pages / window / tabBar / App&Page 生命周期 / data
   ▼                                  │
模块三 常用组件全解（会画界面）         │ 反复回用到：
   │  产出：view/form/media/navigator 等积木
   ▼                                  │
模块四 事件系统与模板渲染（会响应）     │  数据流 setData（纵贯 2→7）
   │  产出：bindtap / wx:for / wx:key / template
   ▼                                  │
模块五 路由·交互·网络与实战（连成应用）  │  页面栈路由（贯穿 2→6）
   │  产出：4 类跳转 / 弹窗 / wx.request / 音乐播放器
   ▼                                  │
模块六 进阶能力与登录体系（补生产能力）  │
   │  产出：模块化 / 上传 / 缓存 / 分享 / wx.login→code2Session→token
   ▼                                  │
模块七 自定义组件（会造组件）────────────┘
      产出：Component / properties / slot / triggerEvent / Dialog

七个模块与最终能力的对应关系：

阶段	模块	学完后你的能力边界
地基	1 → 2	有一个能跑、能配窗口和 tab 的小程序骨架
表达	3 → 4	能用积木搭界面，并让它响应点击、渲染列表
串联	5	多页面导航 + 联网 + 完整播放器，像个真应用
生产	6 → 7	有登录态、能上传分享、能复用组件，可接真实业务

📊 交互式知识图谱在线版：

微信小程序 · 74集学习路径总图谱