微信小程序开发视频教程整理

移动开发

课程简介

解决纯 API 文档难上手的问题微信小程序官方文档虽然详尽，但初学者直接阅读 API 列表往往感到枯燥且缺乏语境，容易陷入“知道了接口却不知道怎么组装页面”的困境。这套资料的核心价值在于提供了一批经过验证的完整案例源码，涵盖了从简单的待办事项（ToDo）到仿知乎日报、今日头条信息流，再到地图应用、商城交互等典型工作场景。它不像传统录播课那样依赖长篇视频讲…

已有 0 人浏览发布 2026-10-22 更新 2026-10-22

解决纯 API 文档难上手的问题

微信小程序官方文档虽然详尽，但初学者直接阅读 API 列表往往感到枯燥且缺乏语境，容易陷入“知道了接口却不知道怎么组装页面”的困境。这套资料的核心价值在于提供了一批经过验证的完整案例源码，涵盖了从简单的待办事项（ToDo）到仿知乎日报、今日头条信息流，再到地图应用、商城交互等典型工作场景。它不像传统录播课那样依赖长篇视频讲解，而是以“源码 + 少量引导”的形式，让你通过逆向阅读现有代码来理解组件结构、数据绑定和逻辑控制。这种学习方式更适合已经具备基础 HTML/CSS/JS 知识，但缺乏移动端实战经验的开发者，能帮你快速建立小程序特有的心智模型，避免在语法细节上反复查阅文档。

建议的学习路径与练习方法

不要试图一次性通读所有源码。建议将学习分为三个阶段：首先，从体积最小、逻辑最单纯的“简易小程序”或“Hello World”类项目入手，熟悉 `wxml`、`wxss` 和 `js` 三件套的基本协作方式，搞懂数据如何从控制器流转到视图层；其次，选择一两个中等复杂度的案例，如“仿豆瓣电影”或“音乐播放器”，重点观察它们如何处理列表渲染、图片懒加载以及用户交互事件，尝试修改其中的样式或文案，运行查看效果；最后，挑战带有异步数据请求的项目，如“公众号热门文章信息流”或“空气质量查询”，理解 Promise 或 API 调用在前端的表现形式。在练习时，务必配合微信开发者工具进行调试，每看懂一个功能模块，就尝试注释掉部分代码观察报错，以此反向验证你对执行流程的理解。资料中的说明文件通常简略，遇到困惑时，直接阅读源码中的注释和变量命名往往比查找文档更高效。

学完能独立做什么

掌握这套资料后，你应具备独立开发轻量级小程序原型的能力。具体而言，你可以完成一个包含列表浏览、详情页展示及简单搜索功能的资讯类或工具类小程序。你能独立处理常见的移动端交互细节，例如实现下拉刷新、上拉加载更多，或者集成地图组件实现位置标注。虽然这些案例多为前端逻辑或模拟数据，但为你接触后端接口打下了基础。对于转行者或职场新人，这类作品足以作为简历中的技能佐证，证明你具备将设计稿转化为可运行代码的动手能力，并能理解小程序特有的生命周期与组件化开发思维。它不会让你成为架构师，但能确保你在团队中接手维护类任务时，不再对代码结构感到陌生，能快速定位问题并做出修改。

课程目录

📁 【教程】掘金直播课程
📁 说明
[掘金直播] 微信小程序 Podcast 直播－录制_高清.mp4 [553.2 MB]
📁 【源码】小程序源码
wechat-weapp-gank-master.zip [4.7 MB]
仿豆瓣电影-demo.zip [4.4 MB]
todo-app.zip [14.4 KB]
xiaoyima.zip [22.5 KB]
Xiaoxiazhihu (知乎日报) 微信小程序 d.zip [4.4 MB]
PigRaising-master.zip [68.5 KB]
音乐播放器.zip [423.0 KB]
仿知乎日报.zip [1.5 MB]
狼人杀.zip [273.6 KB]
空气质量查询app.zip [6.9 KB]
微信小程序-公众号热门文章信息流.zip [307.6 KB]
小程序地图Demo.zip [304.8 KB]
仿今日头条app.zip [1.8 MB]
小程序 hello world 尝鲜.zip [105.3 KB]
果库.zip [41.3 KB]
WeChatMeiZhi.zip [7.7 MB]
BearDiary-master.zip [6.9 MB]
百度小说搜索.zip [262.2 KB]
微信小程序-吃货APP(上拉加载更多，下拉刷新).zip [81.0 KB]
仿手机淘宝.zip [3.1 MB]
闹钟应用.zip [658.7 KB]
爆米花popcorn.zip [89.3 KB]
空气质量查询app(1).zip [6.9 KB]
QuestMobile-TOP2000-201609.zip [16.2 MB]
艺术类网站demo.zip [451.0 KB]
微票源码-demo.zip [769.3 KB]
Caipu.zip [2.8 MB]
微信小程序-大好商城，wechat-weapp.zip [154.4 KB]
小米商城.zip [312.6 KB]
WeChatMeiZhi-master.zip [7.7 MB]
wechat-app-joke-master.zip [387.7 KB]
简易小程序源码.zip [717.1 KB]
2048小游戏 微信小程序开发.zip [56.0 KB]
dribbble.zip [75.1 KB]
展示美女模特福利图片.zip [12.3 KB]
公众号热门文章信息流.zip [307.6 KB]
技术社区-demo.zip [22.2 KB]
外卖demo.zip [8.9 KB]
芒果TV.zip [6.3 MB]
小程序贪吃蛇.zip [7.9 KB]
知乎日报.zip [4.3 MB]
artand.zip [451.0 KB]
微信小程序-移动端商城.zip [364.2 KB]
礼物说.zip [749.4 KB]
微信小程序的掘金信息流.zip [1008.8 KB]
小波说雨燕blog.zip [5.4 KB]
📁 【教程】极客学院小程序视频教程（店主推荐）
📁 课件资料demo
📁 说明
综合案例 - 用户登录.rar [1.5 MB]
地图与LBS.zip [7.9 KB]
WebSocket精讲.zip [39.3 KB]
微信小程序页面的生命周期和参数传递.rar [3.0 KB]
获取当前位置.zip [8.8 KB]
微信小程序的配置详解.rar [6.9 KB]
组件的使用.zip [8.8 KB]
微信小程序的生命周期与app对象的使用.rar [3.6 KB]
综合案例 - 评测小程序首页的实现.zip [6.0 MB]
请求服务器数据.zip [8.7 KB]
表单组件.zip [8.3 KB]
视图与渲染.rar [4.4 KB]
图片选择与调用微信拍照.zip [38.8 KB]
视图容器组件.zip [9.0 KB]
多媒体.zip [8.9 KB]
导航.zip [8.6 KB]
音乐的播放和控制.zip [8.8 KB]
基础内容组件.zip [8.8 KB]
缓存数据.zip [8.6 KB]
目录结构详解.rar [4.4 KB]
操作反馈小工具.zip [8.7 KB]
微信小程序事件.rar [3.2 KB]
文件上传与下载.zip [9.3 KB]
微信小程序开发工具的使用.rar [6.8 KB]
综合案例 - 快递查询.rar [3.4 KB]
6.2.2使用墨刀进行产品原型设计.mp4 [172.8 MB]
6.1课程介绍.mp4 [45.9 MB]
基于CNODE社区的API创建一个小程序.mp4 [22.8 MB]
4.3.2视图容器组件.mp4 [287.5 MB]
3.2.2微信小程序页面的生命周期和参数传递.mp4 [210.7 MB]
6.5.3使用 wx.request 取云端数据.mp4 [205.9 MB]
6.4.4节点页面开发.mp4 [68.2 MB]
4.4.1操作反馈小工具.mp4 [200.2 MB]
6.5.2使用 wx.navigateTo 完成页面跳转.mp4 [172.6 MB]
4.3.1组件的使用.mp4 [107.7 MB]
2.3.2微信小程序事件.mp4 [162.3 MB]
2.4综合案例 - 快递查询.mp4 [240.9 MB]
4.1微信小程序的UI精讲.mp4 [57.1 MB]
2.1微信小程序简介.mp4 [64.6 MB]
6.4.1组件讲解.mp4 [135.5 MB]
5.1微信小程序的API开发简介.mp4 [21.6 MB]
5.4.2导航和导航条.mp4 [134.1 MB]
6.4.5用户信息页面开发.mp4 [69.5 MB]
3.2.1微信小程序的生命周期与app对象的使用.mp4 [81.1 MB]
6.3.1路由配置，完成底部 TabBar 设计.mp4 [118.7 MB]
5.2.6缓存数据.mp4 [100.3 MB]
2.2.2微信小程序开发工具的使用.mp4 [126.2 MB]
6.4.6使用 WXSS 对页面组件进行美化.mp4 [78.5 MB]
2.2.1微信小程序开发准备.mp4 [16.2 MB]
5.2.3文件上传与下载.mp4 [320.0 MB]
2.2.3目录结构详解.mp4 [115.3 MB]
4.3.3基础内容组件.mp4 [80.0 MB]
6.6V2EX 小程序发布及注意事项.mp4 [64.1 MB]
5.2.1请求服务器数据.mp4 [140.2 MB]
3.1微信小程序的配置详解.mp4 [160.3 MB]
5.2.2图片选择与调用微信拍照.mp4 [116.7 MB]
1.1微信小程序从基础到实战课程概要.mp4 [142.4 MB]
4.3.4琛ㄥ崟缁勪欢.mp4 [192.3 MB]
5.2.5音乐的播放和控制.mp4 [240.5 MB]
5.2.7获取当前位置.mp4 [105.0 MB]
3.3综合案例 - 用户登录.mp4 [177.5 MB]
6.5.1wx.navigateTo、wx.redirectTo、wx.request 方法使用讲解.mp4 [58.0 MB]
6.3.2产品层级、组件模块化设计.mp4 [55.0 MB]
6.2.1使用 Xmind 进行产品需求分析.mp4 [50.6 MB]
📁 【教程】传播智客小程序实战
📁 说明
📁 传播智客
📁 教程源码工具
📁 开发工具
📁 说明
wechat_web_devtools_0.9.092300_ia32.exe [42.3 MB]
wechat_web_devtools_0.9.092300_x64.exe [47.7 MB]
wechat_web_devtools_0.9.092300.dmg [74.3 MB]
微信小程序.pdf [689.2 KB]
相关资料链接.pdf [92.8 KB]
基本操作步骤教程.pdf [750.9 KB]
豆瓣电影完整案例.zip [4.2 MB]
微信官方API示例.zip [138.1 KB]
README.pdf [866.7 KB]
随堂写的代码.zip [11.9 KB]
📁 前端福音！小程序实战开发第一天-video
05-项目结构2.wmv [22.6 MB]
03-案例体验.wmv [39.6 MB]
06-编程体验.wmv [100.4 MB]
01-内容介绍.wmv [9.4 MB]
02-微信小程序开发工具的安装.wmv [16.6 MB]
04-项目结构1.wmv [65.4 MB]
📁 前端福音！小程序实战开发第二天-video
02-导航条的配置.wmv [14.3 MB]
07-加载数据.wmv [50.9 MB]
03-创建页面及配置.wmv [12.2 MB]
01-回顾与概要.wmv [48.3 MB]
04-Swiper使用.wmv [43.4 MB]
05-列表样式.wmv [32.3 MB]
06-页面与页面之间传值.wmv [23.3 MB]
08-Demo结构介绍.wmv [28.0 MB]
前端福音！小程序实战开发第一天-资料online.zip [174.4 MB]
📁 前端福音！小程序实战开发第二天-video
📁 说明
08-Demo结构介绍.wmv [28.0 MB]
04-Swiper使用.wmv [43.4 MB]
05-列表样式.wmv [32.3 MB]
07-加载数据.wmv [50.9 MB]
01-回顾与概要.wmv [48.3 MB]
02-导航条的配置.wmv [14.3 MB]
03-创建页面及配置.wmv [12.2 MB]
06-页面与页面之间传值.wmv [23.3 MB]
📁 前端福音！小程序实战开发第一天-video
📁 说明
03-案例体验.wmv [39.6 MB]
01-内容介绍.wmv [9.4 MB]
02-微信小程序开发工具的安装.wmv [16.6 MB]
05-项目结构2.wmv [22.6 MB]
04-项目结构1.wmv [65.4 MB]
06-编程体验.wmv [100.4 MB]
📁 【教程】千锋教育微信小程序全套开发视频教程
📁 微信小程序开发视频_03数据绑定
📁 千锋微信小程序开发视频_第11讲_列表渲染(视频,源码)
📁 微信小程序数据绑定-列表渲染
📁 pages
📁 index
📁 说明
index.js [143.0 B]
index.wxml [636.0 B]
index.wxss [125.0 B]
📁 说明
app.json [289.0 B]
app.js [91.0 B]
app.wxss [160.0 B]
📁 说明
微信小程序数据绑定-列表渲染.pptx [29.4 KB]
千锋微信小程序开发视频_第11讲_列表渲染.mp4 [116.8 MB]
📁 千锋微信小程序开发视频_第10讲_条件渲染(视频,源码)
📁 微信小程序数据绑定-条件渲染
📁 pages
… 其余 209 项略，目录共 409 项