适合场景与入门门槛

这套课程针对的是希望掌握微信生态前端开发能力的初学者。微信小程序的语法基于 WXML、WXSS 和 JavaScript，如果你已经具备基础的网页开发知识，或者对前端生态有一定了解，上手会非常快。课程的核心价值在于帮你建立“小程序思维”，特别是理解它与普通 H5 页面在生命周期、数据绑定机制上的本质区别。

资料中提到的 LinUI 组件库是实际项目中常用的解决方案，这意味着课程不仅教语法，还教你如何在有限时间内快速构建出接近商业标准的产品界面。对于想独立承接小程序外包需求或进入相关技术岗位的开发者来说，这是一个从理论到实战的完整闭环起点。

学习路径与核心抓手

建议的学习顺序并非一味从头到尾播放，而是分阶段攻克。首先务必在第 3 章重点打磨布局能力。小程序的 rpx 响应式单位是适配不同手机屏幕的关键，而 flex 布局则是处理列表、卡片等复杂页面的基石。如果布局基础不牢，后续做界面时会非常痛苦。第 4 章的 setData 数据绑定是小程序逻辑层的核心，必须理解单向数据流如何驱动视图更新，这是区分“拼凑代码”与“真正掌握框架”的分水岭。

在资料配合方面，不要只看不练。第 1 章的 AppID 注册和工具设置是必经之路，遇到环境问题优先自行排查。第 2 章的目录结构解析要配合新建项目手动修改文件，理解 json、wxml、wxss、js 四个文件如何协作。对于 LinUI 这类第三方库的安装与使用，建议自己在本地环境复现一遍，这是真实工作中必备的技能，而非仅仅存在于课堂演示中。

学完能独立做什么

完成本套课程后，你将具备独立开发中型复杂度小程序的能力。具体而言，你可以独立完成包含首页轮播、分类导航、商品列表、详情展示以及用户信息展示等标准模块的构建。你能够熟练运用 flex 布局解决各种 UI 还原问题，懂得如何通过setData 高效更新页面状态，并能集成现有的 UI 组件库来加速开发流程。

更重要的是，你消除了对微信开放平台的陌生感，知道如何从注册、配置到编译预览的全流程操作。虽然单靠这一套课程可能还不足以应对高并发、复杂后端交互的企业级项目，但作为职场技能的第一个里程碑，它足以让你具备参与实际项目开发的基础资格，也为后续学习更高级的状态管理或云开发打下坚实基础。

课程目录

第1章 全新版：初识微信小程序 试看 6 节 | 35分钟 1-1 微信小程序全新版重录说明 (04:55).mp4
 1-2 下载小程序开发工具 (02:54).mp4
 1-3 新建小程序项目 (08:04).mp4
 1-4 小程序appid的注册 (01:49).mp4
 1-5 新版小程序开发工具的一些基本设置 (10:24).mp4
 1-6 小程序的基本单位-Page页面 (06:06).mp4
 第2章 全新版：小程序的基本目录结构与文件作用剖析 3 节 | 25分钟 2-1 小程序页面的4种基本文件类型详解 (09:39).mp4
 2-2 小程序的全局配置文件、全局样式表和应用程序级别js文件 (07:44).mp4
 2-3 认识一下我们要开发的Flower项目 (07:02).mp4
 第3章 全新版：rpx响应式单位与flex布局 

10 节 | 88分钟 3-1 JSON对象与JS对象的区别（重点） (06:13).mp4
 3-2 目的：充分学习Flex布局的技巧.mp4
 3-3 新建页面的技巧与规则 (08:01).mp4
 3-4 image标签显示一张图片 (07:06).mp4
 3-5 小程序rpx响应式单位的特点（非常重要） (16:14).mp4
 3-6 分离CSS样式到WXSS文件中 (06:57).mp4
 3-7 初识flex布局进行垂直分布布局 (10:46).mp4
 3-8 flex布局的align-items (06:45).mp4
 3-9 自己编写一个Button组件 (07:34).mp4
 3-

10 聊聊小程序的方便性与灵活性的悖论 (17:29).mp4
 第4章 全新版：阅读列表与setData数据绑定 

16 节 | 149分钟 4-1 LinUI组件库介绍 (06:52).mp4
 4-2 安装、编译LinUI (12:01).mp4
 4-3 如何使用自定义组件 (13:05).mp4
 4-4 l-avatar头像和昵称组件 (09:22).mp4
 4-5 添加新的编译模式 (07:47).mp4
 4-6 初步了解Swiper和Swiper-Item组件 (08:29).mp4
 4-7 Swiper组件（1）通过插槽设置轮播内容 (08:49).mp4
 4-8 Swiper组件（2）Swiper组件内容的高宽设置技巧 (08:40).mp4
 4-9 属性设置一定要注意字符串以JS表达式的区别（重要） (12:26).mp4
 4-

10 布尔属性值赋值的良好建议 (04:44).mp4
 4-

11 Swiper组件的其他重要属性设置 (07:26).mp4
 4-12 用Flex布局组织布局思路（1） (09:37).mp4
 4-13 用Flex布局组织布局思路（2） (06:49).mp4
 4-14 用Flex布局组织布局思路（3） (10:30).mp4
 4-15 用Flex布局组织布局思路（4） (09:56).mp4
 4-16 用Flex布局组织布局思路（5） (12:10).mp4
 第5章 全新版：条件渲染、列表渲染与小程序事件 

17 节 | 156分钟 5-1 使用LinUI的Icon组件代替图片ICON (11:20).mp4
 5-2 LinUI Icon组件的颜色和大小设置 (08:18).mp4
 5-3 小程序开发数据的流向（1） (09:42).mp4
 5-4 单向数据绑定与双向数据绑定 (13:37).mp4
 5-5 数据绑定与setData函数（1） (12:03).mp4
 5-6 DOM优先 VS 数据优先 (08:26).mp4
 5-7 目的：提前了解ES6的常用语法.mp4
 5-8 理解Page.data与this.SetData的关系 (08:33).mp4
 5-9 预先在data中定义绑定数据的初始值是值得推荐的做法 (06:20).mp4
 5-

10 小程序的生命周期函数与特殊回调函数 (13:32).mp4
 5-

11 数据绑定的实战应用 (07:59).mp4
 5-

12 Mustache语法解析 (18:02).mp4
 5-

13 条件渲染 (06:59).mp4
 5-

14 列表渲染（上） (14:01).mp4
 5-

15 列表渲染（下） (05:15).mp4
 5-

16 什么是事件 (04:35).mp4
 5-

17 bind来捕捉事件执行回调函数 (06:42).mp4
 第6章 全新版：路由函数与事件冒泡 8 节 | 65分钟 6-1 路由函数NavigateTo和RedirectTo的区别 (14:44).mp4
 6-2 目的：JS模块的概念与导入导出的方式.mp4
 6-3 Catch与Bind事件的区别 (08:49).mp4
 6-4 js模块的导入导出（require与import）_1 (13:33).mp4
 6-5 用列表渲染展示导入的数组数据 (07:55).mp4
 6-6 从列表页面跳转到文章详情页面 (08:41).mp4
 6-7 列表渲染的wxkey赋值规则 (06:05).mp4
 6-8 事件冒泡的具体应用 (05:12).mp4
 第7章 全新版：构建阅读详情页面 

11 节 | 88分钟 7-1 构建文章详情页面（1） (07:32).mp4
 7-2 构建文章详情页面（2） (03:58).mp4
 7-3 构建文章详情页面（3） (09:13).mp4
 7-4 Flex的高级应用（1） (13:10).mp4
 7-5 Flex高级应用（2）主轴和交叉轴 (10:11).mp4
 7-6 Flex高级应用（3） (04:08).mp4
 7-7 组件的自定义属性data (07:27).mp4
 7-8 自定义属性data-的命名规则 (11:24).mp4
 7-9 在页面的onLoad函数中获取查询参数 (06:51).mp4
 7-

10 加载详情数据并填充页面 (09:59).mp4
 7-

11 为什么只传post-id (03:53).mp4
 第8章 全新版：缓存机制与异步API的async和await 

17 节 | 123分钟 8-1 app.js的意义和作用 (07:04).mp4
 8-2 目的：了解缓存的概念.mp4
 8-3 在app.js中保存全局变量 (03:58).mp4
 8-4 目的： 熟悉async和await的用法和意义.mp4
 8-5 小程序缓存的增删改查与清除 (11:06).mp4
 8-6 异步函数的几个方案：回调函数、promise与await (13:44).mp4
 8-7 文章收藏（1）分析思路 (10:48).mp4
 8-8 文章收藏（2）JS的动态属性 (05:39).mp4
 8-9 收藏未收藏的切换 (05:23).mp4
 8-

10 初始化收藏状态 (06:11).mp4
 8-

11 缓存如何不被覆盖？ (07:41).mp4
 8-

12 同步文章缓存状态 (06:59).mp4
 8-

13 showToast接口的应用 (08:53).mp4
 8-

14 牢记setData对于data属性的影响 (06:08).mp4
 8-15 showToast更换成showModal（1） (10:25).mp4
 8-

16 showModal的回调函数与Promise (10:12).mp4
 8-

17 showActionSheet的使用 (08:32).mp4
 第9章 全新版：音乐播放 

11 节 | 90分钟 9-1 浮动居中方案-通过left和top定位音乐图标 (12:23).mp4
 9-2 小程序音乐播放API介绍 (05:24).mp4
 9-3 小试音乐播放API (11:10).mp4
 9-4 切换音乐播放图标的两种方案：条件渲染与js表达式 (12:33).mp4
 9-5 音乐播放状态切换 (08:15).mp4
 9-6 背景音乐的监听相关API (04:56).mp4
 9-7 同步音乐总控开关与自有播放开光的状态 (09:46).mp4
 9-8 音乐控制面板的暂停与停止逻辑 (04:53).mp4
 9-9 全局变量解决音乐播放状态初始化不正确的问题 (07:11).mp4
 9-

10 分析一个不是问题的问题 (03:52).mp4
 9-

11 让每篇文章音乐独立显示状态 (08:43).mp4
 第10章 全新版：初识小程序的自定义组件 

11 节 | 80分钟 10-1 文章列表顶部轮播图跳转 (04:17).mp4
 10-2 小程序tabBar选项卡配置基础 (07:14).mp4
 10-3 小程序tabBar的其他配置选项 (09:29).mp4
 10-4 跳转到带有选项卡的页面需要使用switchTab (02:48).mp4
 10-5 初识自定义组件 (09:13).mp4
 10-6 新建第一个自定义组件 (07:12).mp4
 10-7 创建自定义组件的属性 (07:40).mp4
 10-8 自定义组件属性的简化定义 (05:06).mp4
 10-9 自定义属性可以接收一个Object对象 (06:12).mp4
 10-

10 分离文章到单独的自定义组件中 (06:30).mp4
 10-

11 自定义组件的嵌套引用 (13:58).mp4
 第11章 全新版：电影页面与实战自定义组件 

12 节 | 109分钟 11-1 Movie自定义组件的构建 (09:27).mp4
 11-2 使用LinUI的评分组件快速实现分数预览 (11:53).mp4
 11-3 简易评分组件的实现思路（选看） (04:20).mp4
 11-4 巧用Flex布局的Space-Between进行分布排列 (08:41).mp4
 11-5 调整自定义组件间距 (07:04).mp4
 11-6 外部样式类externalClasses的使用 (13:22).mp4
 11-7 小试牛刀访问服务端数据 (08:34).mp4
 11-8 从服务器加载数据分页数据并传入自定义组件 (12:20).mp4
 11-9 使用ES6箭头函数解决this指代的问题 (08:26).mp4
 11-10 绑定电影数据（1）两种不同的评分方式 (06:55).mp4
 11-11 绑定服务端电影数据（2） (07:34).mp4
 11-12 完成即将上映和top250 (09:51).mp4
 第12章 全新版：电影列表与电影搜索 

11 节 | 88分钟 12-1 wx.request的更多参数讲解 (05:59).mp4
 12-2 更多电影（1）分析更多电影页面的逻辑 (10:02).mp4
 12-3 更多电影（2）加载更多数据 (08:53).mp4
 12-4 更多电影（3）Flex-Wrap的应用 (08:33).mp4
 12-5 更多电影（4）Flex布局对于普通样式类的影响 (06:52).mp4
 12-6 更多电影（5）加载不同类型的电影数据 (08:43).mp4
 12-7 使用LinUI快速构建搜索栏 (07:52).mp4
 12-8 向服务器请求搜索数据 (09:45).mp4
 12-9 搜索结果与电影数据的切换显示 (07:56).mp4
 12-

10 显示搜索的电影数据 (07:31).mp4
 12-11 修复Space-Between2个元素两端分布的问题 (05:31).mp4
 第13章 全新版：电影详情与滑动加载数据、下拉刷新数据 

19 节 | 192分钟 13-1 上滑加载更多数据（1）onReachBottom (12:16).mp4
 13-2 上滑加载更多数据（2）showloading提示 (06:15).mp4
 13-3 下拉刷新数据（1） (11:58).mp4
 13-4 配置标题与动态配置标题 (13:19).mp4
 13-5 谈组件的独立性 (06:52).mp4
 13-6 自定义组件的自定义事件产生 (09:27).mp4
 13-7 获取自定义组件的detail参数 (07:19).mp4
 13-8 同时获取自定义属性和自定义组件的detail参数 (12:17).mp4
 13-9 电影详情页面（1）获取电影详情数据 (07:45).mp4
 13-10 电影详情页面（2）顶部区域 (10:19).mp4
 13-11 电影详情页面（3）头部元素浮动技巧 (10:11).mp4
 13-12 电影详情页面（4）图片预览效果只做 (10:06).mp4
 13-13 电影详情页（5）图片的多种mode模式 (09:00).mp4
 13-

14 数据预处理 (24:05).mp4
 13-

15 电影简介部分的CSS构建 (08:54).mp4
 13-

16 处理影人信息 (09:45).mp4
 13-

17 多层Flex布局的嵌套应用 (07:53).mp4
 13-

18 调整影人信息的CSS细节 (05:09).mp4
 13-

19 Scroll-View组件的应用与结束语 (08:25).mp4