微信小程序入门与实战升级版| 超20000人学习的好课|完结无秘

前端开发

课程简介

这套微信小程序课程在内容组织上有一个很明确的特点：它不是按 API 手册逐条讲，而是围绕几个真实页面把知识点拆开。从目录结构能看出来，阅读列表、电影页面、电影列表与搜索、自定义组件这几块是主干，setData 数据绑定、Swiper 组件的高宽处理、编译模式配置这些细节穿插在其中。对已经能写 HTML/CSS/JS、但没碰过小程序的人来说，这种组织方式比看…

已有 4 人浏览发布 2026-09-03 更新 2026-09-10

技术栈与知识边界

课程基于微信小程序原生框架，不引入第三方跨端方案。核心内容集中在 WXML 模板语法、WXSS 样式、Page 与 Component 的构造器用法，以及 setData 驱动的视图更新机制。这条路线的好处是概念少、链路短：没有编译期转换的中间层，数据从逻辑层到视图层的变化可以直接在调试器里观察。课程里专门有一段讲 Swiper 组件内容高宽的设置技巧，这类问题在原生开发里很典型——组件默认尺寸和实际内容尺寸不一致时，页面会出现留白或者裁切，处理方式依赖对 WXSS 盒模型和组件默认样式的理解，而不是靠某个配置项一键解决。

页面驱动的项目结构

从阅读列表到电影页面，再到电影列表与搜索，这几个模块之间是有依赖关系的。阅读列表用来熟悉列表渲染、事件绑定和 setData 的基本节奏；电影页面开始引入自定义组件，把可复用的部分从页面里抽出来；电影列表与搜索则涉及更复杂的列表状态管理，包括搜索关键词变化时如何只更新受影响的节点，而不是整体重渲染。这种递进关系意味着代码是可以逐层累加的，前面写的组件在后面会被继续引用和改造，而不是每个章节各写一个互不相干的 demo。

自定义组件部分单独占了一个章节，说明作者把它当作一个需要专门讲清楚的点。小程序的 Component 构造器和 Page 构造器在生命周期、属性传递、事件触发方式上都有差异，触发事件要用 triggerEvent 而不是直接改父级数据，这些约束在初学时容易踩坑。课程用电影页面的实际需求来带这部分内容，比抽象地讲组件规范更容易记住边界在哪。

可复用的模块与配置细节

几个值得留意的工程细节：编译模式的添加，用来在开发时直接跳到某个页面，省去每次手动导航的步骤；setData 的使用方式，关系到性能，频繁调用或者传入过大的对象都会拖慢渲染；Swiper 这类自带默认样式的组件，需要显式覆盖才能符合设计稿。这些点单独看都不复杂，但凑在一起就是一个页面能不能顺畅跑起来的关键。把课程里的处理方式记下来，换成自己的业务页面时可以直接套用，不用重新试错。

怎么用这份资料

建议的用法是边看边改，而不是顺序播放。每进入一个页面模块，先把当节的代码结构理清楚，再关掉视频自己写一遍，遇到对不上的地方回去查对应章节。自定义组件那一块尤其值得反复写，因为组件拆分的能力决定后面能不能把页面代码控制在可维护的范围内。如果已经做过 Vue 或 React，可以重点看小程序在数据绑定和组件通信上和它们的差异，这部分迁移成本主要来自约束而不是语法。

整体来看，这份资料适合当作对照实践的参照物：有明确的页面目标，有可以逐层复用的代码结构，也有具体的坑位说明。比起单纯看一遍视频，把它当成一个可以反复翻查的工程笔记来用，收益会更明显。

微信小程序入门与实战升级版| 超20000人学习的好课|完结无秘

深入浅出，实战提升

编辑点评

实战导向，系统学习微信小程序开发，涵盖组件、布局、数据绑定等核心知识，适合初学者及进阶者。

⭐ 编辑推荐

本课程深入浅出讲解微信小程序开发，从基础到实战，助你快速掌握小程序开发技能。

✨ 课程亮点

✦系统学习微信小程序开发

✦实战项目驱动学习

✦涵盖组件、布局、数据绑定等核心知识

课程目录

10-初识小程序的自定义组件11 集

10.06-新建第一个自定义组件.mp4 [45.9 MB]
10.08-自定义组件属性的简化定义.mp4 [34.3 MB]
10.10-分离文章到单独的自定义组件中.mp4 [41.9 MB]
10.11-自定义组件的嵌套引用.mp4 [82.9 MB]
10.09-自定义属性可以接收一个Object对象【优质资源‖关注：cunWorkNotes 解锁】.mp4 [39.7 MB]
10.02-小程序tabBar选项卡配置基础.mp4 [46.3 MB]
10.07-创建自定义组件的属性【更多精选‖公众号：CunWorknotes】 .mp4 [49.3 MB]
10.03-小程序tabBar的其他配置选项【更多精选‖公众号：CunWorknotes】 .mp4 [62.9 MB]
10.04-跳转到带有选项卡的页面需要使用switchTab.mp4 [17.1 MB]
10.05-初识自定义组件.mp4 [77.1 MB]
10.01-文章列表顶部轮播图跳转.mp4 [28.7 MB]

11-电影页面与实战自定义组件12 集

11.12-完成即将上映和top250【资源精选‖更多关注：CunworkNotes】.mp4 [62.0 MB]
11.10-绑定电影数据1-两种不同的评分方式.mp4 [44.2 MB]
11.06-外部样式类externalClasses的使用.mp4 [83.5 MB]
11.05-调整自定义组件间距.mp4 [42.5 MB]
11.07-小试牛刀访问服务端数据.mp4 [54.1 MB]
11.04-巧用Flex布局的Space-Between进行分布排列.mp4 [55.3 MB]
11.08-从服务器加载数据分页数据并传入自定义组件.mp4 [77.2 MB]
11.03-简易评分组件的实现思路(选看).mp4 [27.4 MB]
11.02-使用LinUI的评分组件快速实现分数预览.mp4 [70.1 MB]
11.11-绑定服务端电影数据2.mp4 [49.0 MB]
11.09-使用ES6箭头函数解决this指代的问题.mp4 [52.3 MB]
11.01-Movie自定义组件的构建【公重号：CunWorkNotes】.mp4 [59.5 MB]

12-电影列表与电影搜索11 集

12.10-显示搜索的电影数据.mp4 [49.5 MB]
12.08-向服务器请求搜索数据.mp4 [64.9 MB]
12.11-修复Space-Between2个元素两端分布的问题.mp4 [33.7 MB]
12.07-使用LinUI快速构建搜索栏.mp4 [48.5 MB]
12.01-wx.request的更多参数讲解【公重号：CunWorkNotes】.mp4 [41.5 MB]
12.06-更多电影5-加载不同类型的电影数据.mp4 [54.1 MB]
12.03-更多电影2-加载更多数据.mp4 [49.4 MB]
12.05-更多电影4-Flex布局对于普通样式类的影响【更多精选‖公众号：CunWorknotes】 .mp4 [35.4 MB]
12.04-更多电影3-Flex-Wrap的应用.mp4 [56.6 MB]
12.09-搜索结果与电影数据的切换显示.mp4 [49.9 MB]
12.02-更多电影1-分析更多电影页面的逻辑【不易整理‖请关注：CunWorkNoteS】.mp4 [66.0 MB]

04-阅读列表与setData数据绑定16 集

4.03-如何使用自定义组件.mp4 [78.2 MB]
4.08-Swiper组件2-Swiper组件内容的高宽设置技巧【更多精选‖公众号：CunWorknotes】 .mp4 [54.8 MB]
4.05-添加新的编译模式.mp4 [60.7 MB]
4.10-布尔属性值赋值的良好建议.mp4 [31.5 MB]
4.04-avatar头像和昵称组件【不易整理‖请关注：CunWorkNoteS】.mp4 [61.0 MB]
4.09-属性设置一定要注意字符串以JS表达式的区别（重要）【资源精选‖更多关注：CunworkNotes】.mp4 [82.8 MB]
4.16-用Flex布局组织布局思路5【持续更新‖免费提供：CunworknoteS】.mp4 [80.5 MB]
4.13-用Flex布局组织布局思路2.mp4 [46.0 MB]
4.06-初步了解Swiper和Swiper-Item组件.mp4 [48.1 MB]
4.01-LinUI组件库介绍【资源精选‖更多关注：CunworkNotes】.mp4 [47.9 MB]
4.15-用Flex布局组织布局思路4【持续更新‖免费提供：CunworknoteS】.mp4 [66.9 MB]
4.14-用Flex布局组织布局思路3.mp4 [67.1 MB]
4.12-用Flex布局组织布局思路1.mp4 [59.7 MB]
4.02-安装、编译LinUI.mp4 [69.7 MB]
4.07-Swiper组件1-通过插槽设置轮播内容【不易整理‖请关注：CunWorkNoteS】.mp4 [57.4 MB]
4.11-Swiper组件的其他重要属性设置.mp4 [46.0 MB]

05-条件渲染、列表渲染与小程序事件13 集

5.16-bind来捕捉事件执行回调函数.mp4 [43.3 MB]
5.05-数据绑定与setData函数（1）.mp4 [76.7 MB]
5.06-DOM优先VS数据优先【公重号：CunWorkNotes】.mp4 [53.1 MB]
5.07-理解Page.data与this.SetData的关系【优质资源‖关注：cunWorkNotes 解锁】.mp4 [55.0 MB]
5.15-什么是事件【公重号：CunWorkNotes】.mp4 [29.3 MB]
5.08-预先在data中定义绑定数据的初始值是值得推荐的做法【更多精选‖公众号：CunWorknotes】 .mp4 [42.3 MB]
5.04-单向数据绑定与双向数据绑定.mp4 [82.5 MB]
5.14-列表渲染（下）【公重号：CunWorkNotes】.mp4 [32.0 MB]
5.02-LinUIIcon组件的颜色和大小设置.mp4 [54.1 MB]
5.10-数据绑定的实战应用.mp4 [50.8 MB]
5.09-小程序的生命周期函数与特殊回调函数.mp4 [86.9 MB]
5.03-小程序开发数据的流向（1）.mp4 [56.5 MB]
5.01-使用LinUI的Icon组件代替图片ICON【优质资源‖关注：cunWorkNotes 解锁】.mp4 [73.0 MB]

01-初识微信小程序6 集

1.1-微信小程序全新版重录说明【持续更新‖免费提供：CunworknoteS】.mp4 [11.6 MB]
1.3-新建小程序项目.mp4 [50.8 MB]
1.6-小程序的基本单位-Page页面【持续更新‖免费提供：CunworknoteS】.mp4 [38.4 MB]
1.4-小程序appid的注册【公重号：CunWorkNotes】.mp4 [13.6 MB]
1.5-新版小程序开发工具的一些基本设置【公重号：CunWorkNotes】.mp4 [65.9 MB]
1.2-下载小程序开发工具【优质资源‖关注：cunWorkNotes 解锁】.mp4 [18.0 MB]

课件1 条

V3-2020-master.zip [9.0 MB]

07-构建阅读详情页面10 集

7.09-在页面的onLoad函数中获取查询参数.mp4 [41.7 MB]
7.05-Flex的高级应用2-主轴和交叉轴【不易整理‖请关注：CunWorkNoteS】.mp4 [64.3 MB]
7.07-组件的自定义属性data【不易整理‖请关注：CunWorkNoteS】.mp4 [48.3 MB]
7.04-Flex的高级应用1【不易整理‖请关注：CunWorkNoteS】.mp4 [78.5 MB]
7.10-加载详情数据并填充页面【持续更新‖免费提供：CunworknoteS】.mp4 [62.7 MB]
7.03-构建文章详情页面3.mp4 [56.6 MB]
7.08-自定义属性data-的命名规则【优质资源‖关注：cunWorkNotes 解锁】.mp4 [71.9 MB]
7.01-构建文章详情页面1.mp4 [50.1 MB]
7.02-构建文章详情页面2.mp4 [25.3 MB]
7.11-为什么只传post-id【不易整理‖请关注：CunWorkNoteS】.mp4 [25.8 MB]

03-rpx响应式单位与flex布局8 集

3.8-自己编写一个Button组件【整理不易‖记得关注：CunWorKNotes】.mp4 [47.7 MB]
3.6-初识flex布局进行垂直分布布局.mp4 [71.2 MB]
3.4-小程序rpx响应式单位的特点（非常重要）.mp4 [107.7 MB]
3.5-分离CSS样式到WXSS文件中【优质资源‖关注：cunWorkNotes 解锁】.mp4 [45.3 MB]
3.3-image标签显示一张图片.mp4 [43.2 MB]
3.2-新建页面的技巧与规则【不易整理‖请关注：CunWorkNoteS】.mp4 [40.0 MB]
3.9-聊聊小程序的方便性与灵活性的悖论.mp4 [115.5 MB]
3.1-JSON对象与JS对象的区别（重点）【优质资源‖关注：cunWorkNotes 解锁】.mp4 [31.2 MB]

06-路由函数与事件冒泡7 集

6.7-事件冒泡的具体应用.mp4 [33.4 MB]
6.1-路由函数NavigateTo和RedirectTo的区别.mp4 [95.9 MB]
6.6-列表渲染的wxkey赋值规则.mp4 [37.3 MB]
6.3-js模块的导入导出（require与import）.mp4 [87.9 MB]
6.5-从列表页面跳转到文章详情页面【更多精选‖公众号：CunWorknotes】 .mp4 [55.6 MB]
6.4-用列表渲染展示导入的数组数据【资源精选‖更多关注：CunworkNotes】.mp4 [53.5 MB]
6.2-Catch与Bind事件的区别【优质资源‖关注：cunWorkNotes 解锁】.mp4 [57.5 MB]

02-小程序的基本目录结构与文件作用剖析3 集

2.3-认识一下我们要开发的Flower项目【持续更新‖免费提供：CunworknoteS】.mp4 [49.0 MB]
2.2-小程序的全局配置文件、全局样式表和应用程序级别js文件.mp4 [51.7 MB]
2.1-小程序页面的4种基本文件类型详解【资源精选‖更多关注：CunworkNotes】.mp4 [66.2 MB]

08-缓存机制与异步API的async和await13 集

8.06-文章收藏2-JS的动态属性.mp4 [35.5 MB]
8.03-小程序缓存的增删改查与清除.mp4 [70.6 MB]
8.04-异步函数的几个方案：回调函数、promise与await【优质资源‖关注：cunWorkNotes 解锁】.mp4 [85.2 MB]
8.09-缓存如何不被覆盖.mp4 [46.2 MB]
8.01-app.js的意义和作用.mp4 [45.5 MB]
8.12-牢记setData对于data属性的影响.mp4 [39.0 MB]
8.02-在app.js中保存全局变量.mp4 [26.2 MB]
8.14-showModal的回调函数与Promise【整理不易‖记得关注：CunWorKNotes】.mp4 [63.6 MB]
8.07-收藏未收藏的切换【更多精选‖公众号：CunWorknotes】 .mp4 [35.4 MB]
8.15-showActionSheet的使用【持续更新‖免费提供：CunworknoteS】.mp4 [51.8 MB]
8.05-文章收藏1-分析思路.mp4 [67.9 MB]
8.08-初始化收藏状态.mp4 [39.5 MB]
8.10-同步文章缓存状态.mp4 [45.5 MB]

09-音乐播放11 集

9.02-小程序音乐播放API介绍【公重号：CunWorkNotes】.mp4 [36.5 MB]
9.07-同步音乐总控开关与自有播放开光的状态.mp4 [61.4 MB]
9.11-让每篇文章音乐独立显示状态.mp4 [47.1 MB]
9.05-音乐播放状态切换.mp4 [51.0 MB]
9.09-全局变量解决音乐播放状态初始化不正确的问题【不易整理‖请关注：CunWorkNoteS】.mp4 [48.6 MB]
9.06-背景音乐的监听相关API.mp4 [28.4 MB]
9.01-浮动居中方案-通过left和top定位音乐图标【持续更新‖免费提供：CunworknoteS】.mp4 [76.5 MB]
9.08-音乐控制面板的暂停与停止逻辑【更多精选‖公众号：CunWorknotes】 .mp4 [30.2 MB]
9.03-小试音乐播放API【资源精选‖更多关注：CunworkNotes】.mp4 [67.8 MB]
9.10-分析一个不是问题的问题.mp4 [25.0 MB]
9.04-切换音乐播放图标的两种方案：条件渲染与js表达式.mp4 [79.4 MB]

13-电影详情与滑动加载数据、下拉刷新数据19 集

13.12-电影详情页面4-图片预览效果只做【资源精选‖更多关注：CunworkNotes】.mp4 [62.2 MB]
13.10-电影详情页面2-顶部区域.mp4 [67.2 MB]
13.18-调整影人信息的CSS细节.mp4 [31.3 MB]
13.19-Scroll-View组件的应用与结束语.mp4 [55.7 MB]
13.14-数据预处理.mp4 [149.9 MB]
13.13-电影详情页5-图片的多种mode模式.mp4 [55.7 MB]
13.15-电影简介部分的CSS构建.mp4 [55.2 MB]
13.11-电影详情页面3-头部元素浮动技巧.mp4 [65.6 MB]
13.03-下拉刷新数据1.mp4 [77.8 MB]
13.09-电影详情页面1-获取电影详情数据.mp4 [48.5 MB]
13.08-同时获取自定义属性和自定义组件的detail参数【持续更新‖免费提供：CunworknoteS】.mp4 [76.6 MB]
13.04-配置标题与动态配置标题.mp4 [85.1 MB]
13.16-处理影人信息.mp4 [60.8 MB]
13.07-获取自定义组件的detail参数.mp4 [46.6 MB]
13.17-多层Flex布局的嵌套应用【公重号：CunWorkNotes】.mp4 [41.0 MB]
13.06-自定义组件的自定义事件产生.mp4 [61.5 MB]
13.05-谈组件的独立性【优质资源‖关注：cunWorkNotes 解锁】.mp4 [41.9 MB]
13.02-上滑加载更多数据2-showloading提示.mp4 [39.9 MB]
13.01-上滑加载更多数据1-onReachBottom.mp4 [82.9 MB]

适合人群

微信小程序开发者
前端开发爱好者
初学者

🎯 学习收获

掌握微信小程序开发基础
能够独立开发小程序项目
提升小程序开发技能

🎉 祝您学习愉快！