微信小程序入门与实战 常用组件API开发技巧项目实战 升级版 视频课程

这是一门蜚声内外的高口碑微信小程序开发课程，也是领先上线的微信小程序开发课程。小程序早期开发者多数都是从这门课程走出去的，经过4年迭代，这里，从一个课程，发展成了一个用户活跃度高、用户技术水平高、用户素质高的“小程序开发社区”。

一门比微信官方还受开发者追捧的小程序课程

扎实的技术内容，持续的更新迭代，活跃的课程社区，浓烈的技术氛围

慕课网4年磨课，研发出的更高效的小程序开发学习方式

从课程上线至今，不只是迭代了课程的授课内容，更对课程的讲解方式进行了多次迭代

课程目录

第1章 全新版：初识微信小程序 试看6 节 | 35分钟
本章，我们初步了解什么是微信小程序。同时，我们会下载微信小程序工具、申请appid，并进行一些列开发的准备工作。

视频：1-1 微信小程序全新版重录说明 (04:55)
视频：1-2 下载小程序开发工具 (02:54)
视频：1-3 新建小程序项目 (08:04)
视频：1-4 小程序appid的注册 (01:49)
视频：1-5 新版小程序开发工具的一些基本设置 (10:24)
视频：1-6 小程序的基本单位-Page页面 (06:06)

第2章 全新版：小程序的基本目录结构与文件作用剖析3 节 | 25分钟
本章我们会了解小程序官方种子项目的目录结构，并介绍Page页面。同时我们还需要了解页面级别的文件和应用程序级别的文件有什么区别。

视频：2-1 小程序页面的4种基本文件类型详解 (09:39)
视频：2-2 小程序的全局配置文件、全局样式表和应用程序级别js文件 (07:44)
视频：2-3 认识一下我们要开发的Flower项目 (07:02)

第3章 全新版：rpx响应式单位与flex布局10 节 | 88分钟
本章我们通过制作第一个welcome欢迎页面来学习如何在小程序中做响应式。同时，我们需要学习非常重要的布局语法——flex布局。这是在小程序中用的最多也是 最为好用的布局方案。

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

第4章 全新版：阅读列表与setData数据绑定16 节 | 149分钟
本章我们通过编写新闻阅读页面来学习小程序的数据绑定的概念。同时，我们也会介绍LinUI组件库的用法。

视频：4-1 LinUI组件库介绍 (06:52)
视频：4-2 安装、编译LinUI (12:01)
视频：4-3 如何使用自定义组件 (13:05)
视频：4-4 l-avatar头像和昵称组件 (09:22)
视频：4-5 添加新的编译模式 (07:47)
视频：4-6 初步了解Swiper和Swiper-Item组件 (08:29)
视频：4-7 Swiper组件（1）通过插槽设置轮播内容 (08:49)
视频：4-8 Swiper组件（2）Swiper组件内容的高宽设置技巧 (08:40)
视频：4-9 属性设置一定要注意字符串以JS表达式的区别（重要） (12:26)
视频：4-10 布尔属性值赋值的良好建议 (04:44)
视频：4-11 Swiper组件的其他重要属性设置 (07:26)
视频：4-12 用Flex布局组织布局思路（1） (09:37)
视频：4-13 用Flex布局组织布局思路（2） (06:49)
视频：4-14 用Flex布局组织布局思路（3） (10:30)
视频：4-15 用Flex布局组织布局思路（4） (09:56)
视频：4-16 用Flex布局组织布局思路（5） (12:10)

第5章 全新版：条件渲染、列表渲染与小程序事件17 节 | 156分钟
本章我们来学习wx:if与wx：for等渲染语法。同时我们需要了解小程序的事件处理机制。

视频：5-1 使用LinUI的Icon组件代替图片ICON (11:20)
视频：5-2 LinUI Icon组件的颜色和大小设置 (08:18)
视频：5-3 小程序开发数据的流向（1） (09:42)
视频：5-4 单向数据绑定与双向数据绑定 (13:37)
视频：5-5 数据绑定与setData函数（1） (12:03)
视频：5-6 DOM优先 VS 数据优先 (08:26)
作业：
5-7 目的：提前了解ES6的常用语法
视频：5-8 理解Page.data与this.SetData的关系 (08:33)
视频：5-9 预先在data中定义绑定数据的初始值是值得推荐的做法 (06:20)
视频：5-10 小程序的生命周期函数与特殊回调函数 (13:32)
视频：5-11 数据绑定的实战应用 (07:59)
视频：5-12 Mustache语法解析 (18:02)
视频：5-13 条件渲染 (06:59)
视频：5-14 列表渲染（上） (14:01)
视频：5-15 列表渲染（下） (05:15)
视频：5-16 什么是事件 (04:35)
视频：5-17 bind来捕捉事件执行回调函数 (06:42)

第6章 全新版：路由函数与事件冒泡8 节 | 65分钟
本章我们将重点学习小程序的几个路由函数用于跳转页面，同时我们将学习小程序的事件冒泡机制。

视频：6-1 路由函数NavigateTo和RedirectTo的区别 (14:44)
作业：
6-2 目的：JS模块的概念与导入导出的方式
视频：6-3 Catch与Bind事件的区别 (08:49)
视频：6-4 js模块的导入导出（require与import）_1 (13:33)
视频：6-5 用列表渲染展示导入的数组数据 (07:55)
视频：6-6 从列表页面跳转到文章详情页面 (08:41)
视频：6-7 列表渲染的wxkey赋值规则 (06:05)
视频：6-8 事件冒泡的具体应用 (05:12)

第7章 全新版：构建阅读详情页面11 节 | 88分钟
本章我们主要构建新闻详情页面，同时介绍Flex的主轴和交叉轴、自定义属性data-等技术和知识

视频：7-1 构建文章详情页面（1） (07:32)
视频：7-2 构建文章详情页面（2） (03:58)
视频：7-3 构建文章详情页面（3） (09:13)
视频：7-4 Flex的高级应用（1） (13:10)
视频：7-5 Flex高级应用（2）主轴和交叉轴 (10:11)
视频：7-6 Flex高级应用（3） (04:08)
视频：7-7 组件的自定义属性data (07:27)
视频：7-8 自定义属性data-的命名规则 (11:24)
视频：7-9 在页面的onLoad函数中获取查询参数 (06:51)
视频：7-10 加载详情数据并填充页面 (09:59)
视频：7-11 为什么只传post-id (03:53)

第8章 全新版：缓存机制与异步API的async和await17 节 | 123分钟
本章我们通过制作文章收藏的功能，学习小程序的缓存机制与异步API的调用方案，同时我们将学习如何使用async和await来简化异步API的调用。

视频：8-1 app.js的意义和作用 (07:04)
作业：
8-2 目的：了解缓存的概念
视频：8-3 在app.js中保存全局变量 (03:58)
作业：
8-4 目的： 熟悉async和await的用法和意义
视频：8-5 小程序缓存的增删改查与清除 (11:06)
视频：8-6 异步函数的几个方案：回调函数、promise与await (13:44)
视频：8-7 文章收藏（1）分析思路 (10:48)
视频：8-8 文章收藏（2）JS的动态属性 (05:39)
视频：8-9 收藏未收藏的切换 (05:23)
视频：8-10 初始化收藏状态 (06:11)
视频：8-11 缓存如何不被覆盖？ (07:41)
视频：8-12 同步文章缓存状态 (06:59)
视频：8-13 showToast接口的应用 (08:53)
视频：8-14 牢记setData对于data属性的影响 (06:08)
视频：8-15 showToast更换成showModal（1） (10:25)
视频：8-16 showModal的回调函数与Promise (10:12)
视频：8-17 showActionSheet的使用 (08:32)

第9章 全新版：音乐播放11 节 | 90分钟
本章我们将只做音乐播放功能，通过音乐播放我们重点学习如何编写复杂的业务逻辑，这对于大家的逻辑思维能力有很好的培养效果。

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

第10章 全新版：初识小程序的自定义组件11 节 | 80分钟
本章我们将学习如何开发类似LinUI一样的自定义组件。自定义组件对于小程序来说非常重要，一定要好好学习。同时我们将介绍小程序的tabBar配置方案。

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

第11章 全新版：电影页面与实战自定义组件12 节 | 109分钟
我们将全部用组件化思维构建电影页面，在这个章节我们将学习什么是组件化思维，并深入了解自定义组件的机制。

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

第12章 全新版：电影列表与电影搜索11 节 | 88分钟
本章我们主要学习制作电影列表宫格页面与电影搜索功能。本章的重点在于小程序的布局技巧与前面知识的复习与练习

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

第13章 全新版：电影详情与滑动加载数据、下拉刷新数据19 节 | 192分钟
本章我们重点制作电影详情页面，电影详情页面比较复杂，元素和CSS都比较多。同学们需要重点学习CSS布局的一些技巧。同时我们还会介绍如何滑动加载更多分页数据、如何刷新数据。Flex布局的嵌套应用与Scroll-View组件的应用也需要认真学习...

视频：13-1 上滑加载更多数据（1）onReachBottom (12:16)
视频：13-2 上滑加载更多数据（2）showloading提示 (06:15)
视频：13-3 下拉刷新数据（1） (11:58)
视频：13-4 配置标题与动态配置标题 (13:19)
视频：13-5 谈组件的独立性 (06:52)
视频：13-6 自定义组件的自定义事件产生 (09:27)
视频：13-7 获取自定义组件的detail参数 (07:19)
视频：13-8 同时获取自定义属性和自定义组件的detail参数 (12:17)
视频：13-9 电影详情页面（1）获取电影详情数据 (07:45)
视频：13-10 电影详情页面（2）顶部区域 (10:19)
视频：13-11 电影详情页面（3）头部元素浮动技巧 (10:11)
视频：13-12 电影详情页面（4）图片预览效果只做 (10:06)
视频：13-13 电影详情页（5）图片的多种mode模式 (09:00)
视频：13-14 数据预处理 (24:05)
视频：13-15 电影简介部分的CSS构建 (08:54)
视频：13-16 处理影人信息 (09:45)
视频：13-17 多层Flex布局的嵌套应用 (07:53)
视频：13-18 调整影人信息的CSS细节 (05:09)
视频：13-19 Scroll-View组件的应用与结束语 (08:25)