Uniapp Vue3 基础到实战 教学视频

每天都在更新

观看学习地址：视频教学地址（点击跳转）

Uniapp的介绍 1

什么是Uniapp？安装及部署 1-1

课程简介：

1. 了解uni-app是什么，它的优势和适用场景，以及它作为一个跨平台框架的基本概念。

2. 如何安装uni-app，包括环境配置和项目创建等步骤。

3. 如何进行uni-app项目的目录结构和代码规范的了解，这对于后续的项目开发至关重要。

4. 如何进行uni-app项目的打包和发布，以完成从开发到上线的整个过程。

5. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

Uniapp HBuilderX 界面介绍 1-2

课程简介：

1. 了解HBuilderX的基本概念和主要特点，以及它与uni-app开发的关系。
2. 如何安装和配置HBuilderX，为后续的uni-app项目开发做好准备。
3. 熟悉HBuilderX的界面布局和各项功能，包括项目管理、代码编辑、调试等。
4. 学习如何在HBuilderX中创建、编辑和调试uni-app项目，包括项目的创建、运行和打包等步骤。
5. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

Uniapp的组件教程 2

内置组件 2-1

视图容器 2-1-1

view 容器 002-1-1-1

课程简介：

1. 了解什么是视图容器，以及它的主要作用和应用场景。
2. 如何通过属性来设置各种视图容器的特性，如尺寸、位置、颜色等。
3. 平台兼容性问题，以确保开发的应用程序能在各种设备和系统上正常运行。
4. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

scroll-view 可滚动视图容器 002-1-1-2

课程简介：

1. 了解scroll-view组件的基本概念和主要作用，以及它在不同平台（如微信小程序、H5和APP）上的使用情况。
2. 学习和掌握如何使用scroll-view组件，包括创建页面、添加scroll-view组件、设置scroll-view的属性等步骤。如何通过给scroll-view一个固定高度来实现纵向滚动，或者通过添加white-space: nowrap样式来实现横向滚动。
3. 掌握通过scroll-view组件的scroll-top属性来设置容器竖向滚动条位置的方法。
4. 了解scroll-view组件的嵌套滚动容器功能，以及如何通过设置custom-nested-scroll = true来开启与父组件实现嵌套滚动协商。
5. 平台兼容性问题，以确保开发的应用程序能在各种设备和系统上正常运行。
6. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

swiper 滑块视图容器 002-1-1-3

课程简介：

1. 了解swiper组件的基本概念和主要作用，以及它在不同平台（如微信小程序、H5和APP）上的使用情况。
2. 学习和掌握如何使用swiper组件，包括创建页面、添加swiper组件、设置swiper的属性等步骤。例如如何通过给swiper一个固定高度来实现纵向滚动，或者通过添加white-space: nowrap样式来实现横向滚动。
3. 掌握swiper组件的常用属性，如indicator-dots（是否显示面板指示点）、indicator-color（面板指示点颜色）、autoplay（是否自动播放）、interval（自动播放时间间隔）和duration（自动切换动画时长）等。
4. 了解swiper组件的change事件，该事件返回的detail中包含一个source字段，表示导致变更的原因，值可能为autoplay（自动播放导致swiper变化）或touch（用户划动引起swiper变化）。
5. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

match-media 适配大屏小屏 002-1-1-4

课程简介：

1. 了解match-media组件的基本概念和主要作用，以及它在不同平台（如微信小程序、H5和APP）上的使用情况。
2. 学习和掌握如何使用match-media组件，包括创建页面、添加match-media组件、设置match-media的属性等步骤。例如如何通过媒体查询规则，满足查询条件时，这个组件才会被展示。
3. 掌握match-media组件的常用属性，如min-width（最小宽度）、max-width（最大宽度）等。
4. 了解uni-app的宽屏适配方案，从uni-app 2.9起，提供了PC等宽屏的适配方案，完成了全端统一。
5. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

movable-area movable-view 拖拽滑动容器 002-1-1-5

课程简介：

1. 了解movable-view和movable-area的基本概念和主要作用，以及它们在不同平台（如微信小程序、H5和APP）上的使用情况。
2. 学习和掌握如何使用movable-view和movable-area组件，包括创建页面、添加movable-view和movable-area组件、设置它们的属性等步骤。例如，movable-area必须设置width和height属性，不设置默认为10px。
3. 掌握movable-view和movable-area组件的常用属性，如top、left、width、height等。同时，movable-view提供了两个特殊事件：start和end。
4. 了解uni-app中的宽高适配方案，从uni-app 2.9起，提供了PC等宽屏的适配方案，完成了全端统一。
5. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

cover-view 覆盖原生组件文本视图容器 002-1-1-6

课程简介：

1. 了解cover-view组件的基本概念和主要作用，以及它在不同平台（如微信小程序、H5和APP）上的使用情况。
2. 学习和掌握如何在需要使用 Cover-View 组件的页面中找到需要添加的位置，例如可以在页面的 .vue 文件中直接编辑。如何创建一个包含一个 Cover-View 组件的页面，并设置其宽度、高度、背景颜色、文字颜色等样式。
3. 掌握cover-view组件的特性和使用方法，理解其设计原理和使用注意事项。
4. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

cover-image 覆盖原生组件图片视图容器 002-1-1-7

课程简介：

1. 了解cover-image组件的基本概念和主要作用，以及它在不同平台（如微信小程序、H5和APP）上的使用情况。
2. 学习和掌握如何使用cover-image组件，包括创建页面、添加cover-image组件、设置cover-image的属性等步骤。同时，要理解其可覆盖的原生组件同cover-view，并且支持嵌套在cover-view里。
3. 掌握cover-image组件的常用属性，如src（图片地址）、mode（裁剪模式）等。需要注意的是，CSS的position: fixed、opacity、overflow、padding、linebreak和white-space等属性在cover-image上是不支持的。另外，App端vue页面 cover-view、cover-image 中不支持嵌套其它组件，仅可覆盖video、map。
4. 了解平台差异性问题，比如App端还可以使用更强大的plus.nativeObj.view绘制原生内容。而nvue页面则不受上述限制。
5. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

基础内容002-1-2

icon 图标 002-1-2-1

课程简介：

1. 了解Icon组件的基本概念和主要作用，以及它在UniApp中的使用情况。
2. 学习如何在UniApp项目中注册阿里图标库账号，并挑选自己中意的图标加入购物车。
3. 掌握如何将选定的图标添加到自己的项目中，设置其font-class类以在页面中使用。
4. 学习如何在页面中使用Icon组件，包括设置图标的颜色、大小等属性。
5. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

text 文本 002-1-2-2

课程简介：

1. 了解文本组件的基本概念和主要作用，以及它在不同平台（如微信小程序、H5和APP）上的使用情况。
2. 学习和掌握如何使用文本组件，包括创建页面、添加文本组件、设置文本的属性等步骤。例如在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。
3. 掌握文本组件的一些常用属性，如align（文本对齐方式）、font-size（字体大小）、color（字体颜色）等。
4. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

rich-text 富文本 002-1-2-3

课程简介：

1. 了解和学习如何使用rich-text组件，包括创建页面、添加rich-text组件、设置其属性等步骤。例如如何将富文本数据传递给<200-text>组件的nodes属性，并在页面上展示富文本内容。
2. 掌握rich-text组件的重要属性如nodes，以及如何在页面上使用这些属性来控制富文本的展示效果。
3. 理解rich-text组件的事件屏蔽机制，如需对链接和图片进行点击操作时，不能使用此组件，而需使用其他插件。
4. 学习如何解决rich-text组件解析功能可能存在的问题，比如无法控制富文本中的代码块和图片宽度等，通过使用插件来进行解析。
5. 了解rich-text组件的优势和缺陷，如全端支持、高性能等特点，但存在只能整体设点的局限。
6. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

progress 进度条 002-1-2-4

课程简介：

1. 了解进度条组件的基本概念和主要作用，以及它在不同平台（如微信小程序、H5和APP）上的使用情况。
2. 学习和掌握如何使用进度条组件，包括创建页面、添加进度条组件、设置进度条的属性等步骤。例如如何通过属性来设置进度条的宽度、颜色和显示文字等。
3. 掌握进度条组件的常用属性，如percent（百分比）、show-info（是否显示信息）、stroke-width（进度条宽度）、text-inside（进度条文字显示位置）和text-color（进度条文字颜色）等。
4. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

表单组件002-1-3

button 按钮 002-1-3-1

课程简介：

1. 掌握button组件的基础用法，包括如何创建button，设置其显示的文字等。
2. 了解如何通过style属性和class来自定义button的样式。例如修改文字大小、颜色等。
3. 学习如何使用button组件来实现条件禁用或可用的功能，以满足不同的业务需求。
4. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

checkbox-group 多项选择 002-1-3-2

课程简介：

1. 了解checkbox-group组件的基本概念和主要作用，以及它在不同平台（如微信小程序、H5和APP）上的使用情况。
2. 学习和掌握如何创建和管理多项选择器，包括创建页面、添加checkbox-group组件、设置checkbox-group的属性等步骤。例如，通过数据绑定和循环语句来动态生成复选框选项。
3. 掌握checkbox-group组件的事件处理方式，如change事件。当用户改变选择时，会触发这个事件。
4. 进一步掌握修改组件样式的方法，以满足实际应用中的设计需求。
5. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

editor 富文本编辑器 002-1-3-3

课程简介：

1. 了解editor组件的基本概念和主要作用，以及它在不同平台（如微信小程序、H5和APP）上的使用情况。
2. 学习和掌握如何使用editor组件进行基本的文本编辑操作，例如如何设置编辑器的内容，以及如何在内容失去焦点时获取内容等。
3. 掌握editor组件的常用属性和方法，如@blur（编辑器失去焦点时触发的事件）、@change（监听内容改变的事件）等。
4. 进一步学习如何基于editor组件，自行开发一个简单的富文本编辑器。这包括如何设置文本样式的工具栏，如字体、颜色、加粗、斜体、下划线、删除线、对齐方式、有序/无序/列表、插入图片等常见功能。
5. 实战项目，通过实际操作案例来巩固和应用所学知识，提升解决实际问题的能力。

input 单行输入框 002-1-3-4

课程简介：

1. 基础概念：在HTML规范中，input元素能够呈现多种形式，如单行输入框、多选框、复选框、时间选择器、日期选择器以及文件选择功能等。但在uni-app规范中，input仅代表单行输入框。
2. 基本用法：学员可以通过v-model实现输入框的值与数据的双向绑定，同时也可以设置placeholder属性为输入框提供占位提示文字。
3. 事件处理：在实际开发过程中，当键盘输入时会触发input事件，可以通过处理函数对用户的输入进行处理。同时，还可以监听输入框的focus和blur事件，用以获取输入框的状态信息。
4. 自定义类型和显示效果：通过设置相关样式，可以实现输入内容的隐藏或者超出部分的省略显示。
5. 应用场景设计：例如在某些特定需求下，可能需要设计单个文字输入或者密码输入等特殊形式的输入框，学员可以根据实际需求进行相关布局和功能的设计。

picker 滚动选择器 002-1-3-5

课程简介：

1. uniapp的picker支持五种选择器，分别是普通选择器、多列选择器、时间选择器、日期选择器和省区选择器。这些选择器通过mode属性进行区分。其中，普通选择器是默认的选择器。
2. 普通选择器的使用较为简单，通过设置mode为selector即可。
3. 多列选择器允许用户在多个选项中进行选择。例如，可以实现两列选择器，通过在模板中引入picker组件，并设置相应的属性和事件监听。
4. 时间选择器和日期选择器分别用于选择时间日期，这在日程管理、会议安排等应用中非常有用。
5. 省区选择器适用于需要选择特定省份、城市的应用，如电商的配送地址选择等。

picker-view 嵌入页面的滚动选择器 002-1-3-6

课程简介：

1. 掌握 uniapp 中 picker-view 组件的基本使用和配置方法。
2. 学会如何在 picker-view 中嵌入页面，实现滚动选择器的交互效果。
3. 熟悉 uniapp 中的数据绑定和事件处理机制，如 v-model、@change 等。
4. 学会如何根据实际需求自定义 picker-view 的样式和布局。
5. 掌握如何使用 uniapp 实现移动端页面的滚动选择器功能。

radio-group 单项选择器 002-1-3-7

课程简介：

1. 了解radio-group单项选择器的基础知识。radio-group是由多个radio元素组成，通过把这些radio元素包裹在一个radio-group标签下，实现这些radio的单选功能。
2. 掌握radio-group的属性说明，包括属性名、类型和默认值等。这有助于更准确地使用radio-group进行开发。
3. 学习如何处理radio的选择状态。radio不同于checkbox，点击一个已经选中的radio，不会将其取消选中。
4. 提升数据处理能力。因为radio-group本质上是一种数据绑定组件，通过传入数据可以实现不同的操作和效果。

slider 滑动选择器 002-1-3-8

课程简介：

1. 了解滑动选择器的基本原理和使用方法，以及如何在不同平台上应用。
2. 学习如何在表单中使用滑动选择器进行区间范围的选择，并通过v-model绑定一个值来初始化滑块的选择值。
3. 掌握滑动选择器的属性和事件，如SliderChangeEvent，以及如何利用这些属性和事件进行交互式操作。
4. 熟悉滑动选择器的兼容性问题，并学会如何解决这些问题，以确保在不同的平台上都能正常使用。
5. 通过实际案例，学习如何在特定场景下自定义滑动选择器，例如实现竖向放置和滑动的功能。
6. 了解不同版本插件之间的差异，以及如何在实际应用中做出合适的选择。

switch 开关选择器 002-1-3-9

课程简介：

1. 了解和理解uniapp框架中的switch组件，这是一个开关组件，用于控制一个布尔值的开关状态。
2. 能够熟练操作和使用switch组件，包括如何搭建使用该组件所需的框架，如何进行框架内容的改造、添加链接和样式等。
3. 掌握根据不同平台的默认颜色设置switch的颜色，微信小程序是绿色的，抖音小程序为红色，其他平台是蓝色的。同时，也能通过CSS来调整开关的大小。
4. 学习并实际应用switch在开/关按钮、是否接收通知等实际场景中。
5. 当需要接口时，能够给开关赋默认值，如通过获取接口数据进行赋值等操作。
6. 通过练习和实战操作，提升对uniapp switch组件的应用能力，提高解决问题的实战能力。

textarea 多行输入框 002-1-3-10

课程简介：

1. 如何通过代码创建textarea多行输入框：学员可以学习如何在uni-app中设置textarea的属性，如placeholder、rows、disabled等，以实现所需的多行输入框效果。此外，还可以了解如何动态调整输入框的高度和内容。
2. 事件处理：学员可以学习如何使用@input事件，在键盘输入时触发一些操作。例如，当输入框行数发生变化时，可以进行相应的处理。
3. 文本框美化：学员可以学习如何为textarea添加自定义样式，例如设置背景色、字体颜色、边框等，以及如何实现类似打印出来的学生考试试卷答题的那种多行下划线效果。
4. 输入框的位置和层级：学员可以学习如何通过设置「position」属性为「fixed」来解决输入框掉下的问题，同时还需要设置「z-index」属性以确保输入框在其他元素之上。
5. 光标与键盘的距离：学员可以学习如何取textarea距离底部的距离和cursor-spacing指定的距离的最小值，作为光标与键盘的距离，以便提供更好的用户体验。

form 表单 002-1-3-11

课程简介：

1. 数据的收集和提交：Form表单组件具有数据收集和提交数据的功能，它可以作为一个容器，内部可以包含input、checkbox、radio、picker等组件。所有的表单组件都必须置入form组件内，然后通过form组件收集内部组件的数据，并将这些内容通过接口发送至后台进行处理。
2. 交互设计：在项目中，用户和服务端数据的交互大部分是通过表单来实现的。因此，学习如何使用form表单，对于设计良好的用户界面和实现有效的用户交互至关重要。
3. 自定义组件的使用：在某些情况下，例如小程序端在form内的自定义组件内有input表单控件时，或者用普通标签实现表单控件，可以在form的submit事件内获取组件内表单控件值。
4. uni-forms组件库的使用：uni-forms是一个基于Vue.js的表单组件库，提供了各种表单元素和验证器，可以在uni-app中快速构建表单。

路由与页面跳转 002-1-4

navigator 页面跳转并传值 002-1-4-1

课程简介：

1. 掌握链接跳转：这种方式是通过在navigator标签内使用：url属性来实现的。
2. 事件跳转：您可以在某个事件的函数中，利用uni.navigateTo()方法来实现跳转需求。

媒体组件 002-1-5

audio 音频 002-1-5-1

课程简介：

1. 了解如何使用uniapp的audio组件来播放音频。这包括如何通过src播放地址、poster封面图片地址以及name音频名称等属性来控制音频的播放。
2. 学会如何设置音频的循环播放。只需将loop属性设置为’true’，即可实现音频的循环播放。
3. 掌握如何在uniapp中处理平台差异。例如，微信小程序平台自基础库1.6.0版本开始不再维护audio组件，推荐使用API方式而不是组件方式来播放音频。
4. 了解如何使用API来创建和控制音频播放器。在微信小程序中，可以使用uni.createInnerAudioContext()方法获取音频的信息，并使用innerAudioContext.autoplay = true和innerAudioContext.loop=true来实现自动播放和循环播放。
5. 学习如何使用Uniapp插件uni-z-audio，这是一个支持h5, app, 微信小程序的音频背景播放组件。

camera 页面内嵌的区域相机组件 002-1-5-2

课程简介：

1. 如何通过uni-app的camera组件在页面内嵌入区域相机。这种组件不是点击后全屏打开的相机。
2. 了解如何使用该组件实现摄像头选择，包括前置和后置两种模式。
3. 学会使用闪光灯选项，包括on、off和auto三种状态。
4. 掌握如何在uni-app中处理平台差异。特别是在App和H5端，可以使用API方式来调用全屏摄像头，而不是采用组件内嵌方式。
5. 学习如何使用API来创建和控制相机。例如，可以通过CameraManager.openCamera()方法来打开指定相机。
6. 另外，了解如何使用unia-pp的组件camera以及API相机组件控制的相关方法，以增强对uniapp框架的理解和应用。

image 图片组件 002-1-5-3

课程简介：

1. 学习如何通过src属性来设置图片资源地址以显示图片。同时，了解如何使用mode属性来设置图片的缩放模式，包括aspectFit（使图片的长边能完全显示出来，完整的将图片显示出来）和aspectFill（短边能显示出来，通常只在水平或垂直是完整的，另一个方向会发生截取）。
2. 掌握如何处理不同平台的图片格式问题。例如，微信小程序上只支持网络地址的svg图，而Android4以上（含）、iOS14以上（含）系统内置支持webp，此时，在web、小程序、app等环境下都可以使用webp格式的图片。
3. 学会如何解决uniapp中image组件显示异常的问题。例如，如果在html的image标签中增加display:block样式，可以解决某些情况下图片无法正常显示的问题。
4. 了解除了image标签外，还可以使用background-image背景图方式来引入图片。

video 视频播放组件 002-1-5-4

课程简介：

1. 了解如何使用uniapp的视频播放组件来播放视频。这包括如何通过src属性设置视频地址，以及如何通过controls属性控制是否显示控制条。同时，也需了解video组件的默认宽度和高度，以及如何通过CSS来设定宽高。
2. 学会如何处理平台差异性。例如在微信小程序中，由于基础库版本1.6.0以后不再维护video组件，推荐使用API方式而不是组件方式来播放视频。
3. 掌握如何在uniapp中创建和控制视频播放器。在微信小程序平台，可以使用uni.createVideoContext()方法获取视频的信息，并通过videoContext.play()、videoContext.pause()等方法来控制视频的播放和暂停。
4. 理解uniapp提供多种视频播放组件的原因。除了video组件外，还包括多媒体组件（media）和WebView（内置Video标签），了解它们的区别和使用情况，有助于在不同情况下选择最适合的视频播放方案。
5. 学习使用插件uni-z-video，这是一个支持h5, app, 微信小程序的音频背景播放组件。

live-player 实时音视频播放 002-1-5-5

课程简介：

1. 了解如何利用live-player组件进行实时音视频播放，也称为直播拉流。这可以帮助你实现项目的直播功能，比如从上一个页面点击后直接跳转到对应的直播间。
2. 学会如何设置播放器的模式。例如，你可以设置mode为’live’以进行直播，设置为’RTC’则可以进行实时通话。
3. 掌握如何使用autoplay属性来实现视频的自动播放。
4. 学习如何在发布项目到微信小程序平台时，通过小程序的审核以及如何在小程序管理后台自助开通该组件权限。特别需要注意的是，有些指定的类目小程序才能使用live-player组件。
5. 进一步理解Uniapp应用程序在播放音频、背景音乐或视频时，是由媒体播放器组件提供支持的，加深对uniapp实时音视频SDK中媒体播放器组件功能和实现的理解。

live-pusher 实时音视频录制 002-1-5-6

课程简介：

1. 理解live-pusher是用于推送实时音视频流的组件。它能通过配置相应的属性和事件，将手机摄像头和麦克风采集到的音视频流传送到腾讯云的直播服务中。
2. 学会如何在uniapp中使用live-pusher进行视频录制。特别是在打包android端录制视频时，由于原生uni.chooseVideo对android端有限制，此时插件就可以起到很好的补充作用。
3. 了解live-pusher在各平台上的使用差异和注意事项。例如，小程序端中的live-pusher层级高于前端组件，需要在低版本微信中使用cover-view覆盖。而在App端的nvue文件中，live-pusher则没有这类限制。
4. 学会如何处理在使用live-pusher过程中可能遇到的问题。例如，华为手机推流正常，但部分安卓手机没有声音的情况，可能是由于推流延迟时间不够造成的。
5. 掌握如何使用微信小程序的实时音视频录制组件完成录制。需要注意的是，使用前需要用户授权 scope.camera、scope.record。

map 地图 002-1-6

课程简介：

1. 掌握如何在uniapp中集成和使用地图组件，包括腾讯地图、高德地图以及百度地图等。这其中包括如何去显示一个地图，如何选择所需的地图类型。
2. 学会获取用户的位置信息。在uniapp中，有专门的方法提供这项功能，如uni.getLocation API。需要注意的是，获取到的坐标为gcj02格式。
3. 进一步理解map组件的属性和回调函数，以适应更复杂的开发需求。如果需要使用原生地图对象进行一些特殊操作，可以通过$getAppMap来获取。
4. 参考官方文档和示例代码，深入理解并掌握uniapp map组件的使用方法和技巧。

canvas 画布 002-1-7

课程简介：

1. 如何创建和配置画布。你可以在页面中添加一个canvas标签，并设置宽高属性来创建一个画布。例如，< canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"> 。在JS文件中，你可以通过相应的方法获取到这个画布对象。
2. 如何绘制图形。Uniapp的canvas提供了丰富的API来实现图形的绘制，例如：线条、矩形、圆形等。
3. 如何绘制图片。你可以使用ctx.drawImage()方法在canvas上绘制图片，只需要提供图片路径、位置以及尺寸等参数即可。
4. 如何处理平台差异。例如，在微信小程序平台自基础库1.6.0版本开始不再维护canvas组件，推荐使用API方式而不是组件方式来绘制图形。而在app-nvue下如需使用canvas，则需要下载插件。
5. 如何使用canvas实现更复杂的功能，比如绘制水印。这需要一定的逻辑和编程技巧。

web-view 浏览器组件 002-1-8

课程简介：

1. 认识到web-view是一个浏览器组件，它能够在应用中承载网页的容器，自动铺满整个页面。需要注意的是，在nvue中使用需要手动指定宽高。
2. 了解web-view组件的应用和限制。例如，小程序端的web-view组件会带有原生导航栏，并且其下方始终是全屏的web-view组件。此外，uniapp并没有为web-view组件提供直接的横屏显示支持。
3. 学会如何在uniapp中使用web-view组件来加载和显示指定URL的网页内容。这对于需要在应用中嵌入特定网页的功能非常有用。
4. 掌握如何处理web-view组件在加载大量数据时可能出现的通信问题。这包括如何在uni-app中使用web-view实现大量数据通信。
5. 理解各小程序平台在使用web-view组件时的安全限制。例如，web-view加载的url需要在后台配置域名白名单，包括内部再次iframe内嵌的其他url。

扩展组件 002-2

uni-badge 数字角标 002-2-1

课程简介：

1. 明白如何使用uni-badge组件在页面上显示数字角标。这通常应用在未读消息提示中，例如未读消息数量为0时，即使角标上的数值置为0，角标也会依旧存在并显示为0。
2. 学会如何通过修改uni-badge组件的属性来控制角标的显示内容和样式。包括type（用于指定徽标类型，如error）、absolute（是否绝对定位）、offset（角标的偏移位置）、max（最大显示的数字），以及value（需要显示的数值）。
3. 理解当文本超过最大数(max-num)时，badge的宽度不再是根据文本的长度来计算，而是会通过CSS来计算实际的展示宽度。
4. 掌握如何在uni-badge无法使用时，使用其他方式如API来实现数字角标的功能。
5. 通过案例学习，了解如何实现一个通用九宫格组件，该组件在右上角带有数字角标，并且支持每行显示3个或4个格子。

uni-breadcrumb 面包屑导航显示当前页面的路径 002-2-2

课程简介：

1. 明白如何使用uni-breadcrumb组件在页面上显示当前页面的路径。这有助于用户快速返回之前的任意可跳转页面。
2. 学会如何通过修改uni-breadcrumb组件的属性来控制面包屑导航的显示内容和样式。包括separator（用于指定分隔符）、is-router（是否开启路由模式）、is-inline（是否内联显示），以及routes（用于指定路由信息）。
3. 理解当文本超过最大数(max-num)时，面包屑的宽度不再是根据文本的长度来计算，而是会通过CSS来计算实际的展示宽度。
4. 掌握如何在UniApp中实现面包屑导航。例如，可以在页面中定义一个数据变量用于存储面包屑导航的数据，比如 breadcrumb，并在页面的 onLoad 生命周期函数中初始化面包屑导航的数据。可以根据当前页面的路由信息动态生成面包屑导航数据。
5. 通过案例学习，了解如何实现一个通用九宫格组件，该组件在右上角带有数字角标，并且支持每行显示3个或4个格子。

uni-calendar 日历 002-2-3

课程简介：

1. 明白如何使用uni-calendar日历组件在页面上显示日历。这通常应用于日程安排、活动规划和其他需要展示时间线的场合。
2. 学会如何通过修改uni-calendar组件的属性来控制日历的展示样式和行为。包括是否显示标记（insert）、是否显示农历日期（lunar）、禁用的日期（disable-before）以及日历的起始和结束日期（start-date 和 end-date）。
3. 理解如何处理弹出模式时日期不可选择的问题。对于这种情况，可以通过修改uni-calendar组件中的choiceDate方法来实现。在该方法中，可以定义一个数组来接收每次选择的日期信息，并根据需要添加或删除日期值。
4. 掌握如何扩展uni-calendar的功能。比如，zjy-calendar日历是对uniapp uni-calendar日历的增强版本，支持圆点和文字的自定义颜色。
5. 通过实际案例学习，了解如何实现一个简单的月历组件，该组件能够以月为单位展示当月的日期，用户点击某一天时，会弹出一个小窗口显示这一天的详细信息。

uni-card 卡片 002-2-4

课程简介：

1. 明白如何使用uni-card组件来展示卡片式的视图。这在需要统一风格，并需要显示大量列表条目的场景中非常有用。
2. 学会如何在页面中引入uni-card组件。具体操作就是在页面的template部分使用u-card标签来引用uni-card组件。
3. 掌握设置卡片内容和样式的方法。包括title（卡片标题）、description（卡片描述）、extra-text（卡片额外文本）和header-bg-color（头部背景颜色）等属性。
4. 理解平台差异。比如微信小程序在某些版本中可能不支持uni-card的某些属性或事件，这时就需要了解如何通过API等方式进行处理。
5. 学习如果在使用uni-card时遇到问题，如无法找到依赖组件等问题，应如何进行解决。
6. 通过案例学习，掌握如何使用uni-card组件实现一个九宫格效果，进一步增强实操能力。

uni-collapse 折叠面板 002-2-5

课程简介：

1. 明白如何使用uni-collapse组件在页面上创建可折叠/展开的内容区域。主要使用和标签，并通过在中设置title属性来确定每个面板的标题。
2. 学会如何通过修改uni-collapse组件的属性来控制折叠面板的行为和样式。例如，可以使用open属性来默认打开一个特定的面板，使用disabled属性来禁用某个面板。
3. 了解如何在uni-collapse组件中引入自定义的CSS样式以满足特定的设计需求。例如，可以去掉uni-collapse自带的伪类所带来的两条分割线和背景色，给uni-collapse-item外部套上圆弧边框，去掉了uni-collapse-item自带的分割线。
4. 掌握如何在数据加载回来时，对获取自服务器端的分页数据进行重新计算并更新到collapse-body的高度。

uni-combox 组合框 002-2-6

课程简介：

1. 如何导入和使用uni-combox组件。在HBuilderX中，可以将combox组合框导入并在项目中使用。此外，也可以在uni-app项目中新建一个页面，然后在页面文件中插入uni-combox，并绑定数据源和字段，设置相关属性。
2. 理解和运用uni-combox组件的主要属性，如data、value、inputAttrs、@change等，这些用于控制组件的显示内容和行为。
3. 学习如何处理uni-combox组件的常见问题。例如，某些情况下选中某个选项后，需要手动清除选项才可以再次选择其他选项。此时，学员可以查看并修改部分源代码以解决这个问题。
4. 通过案例学习如何使用API实现模糊搜索和多选下拉框功能。具体来说，当需要获取输入的数据和用户下拉选择的数据时，可以利用uni-combox的@input事件和@select事件来实现。

uni-countdown 倒计时 002-2-7

课程简介：

1. 如何在自己的Vue组件中定义一个变量以存储倒计时的剩余时间。例如，可以设置初始倒计时时间为60秒。
2. 如何在组件的mounted生命周期钩子函数中启动计时器，并每秒更新倒计时的剩余时间。
3. 如何使用uni-countdown组件实现活动倒计时。这需要获取当前时间和活动开始时间，其相减得出的时间差就是倒计时。
4. 明白如何使用import语句在script中引用uni-countdown组件。
5. 学会实时展示倒计时数值的方法，支持毫秒级精度。
6. 掌握uni-countdown组件的基础用法，如设置倒计时的天数、小时、分钟和秒数等属性值。
7. 了解倒计时组件的停止功能，可以在倒计时结束时执行自定义操作。

uni-data-checkbox 数据选择器 002-2-8

课程简介：

1. 明白如何使用uni-data-checkbox组件在页面上创建数据选择器。这个组件是一个数据绑定型组件，只需要给它绑定一个data，它就能自动渲染一组候选内容。
2. 学会通过修改uni-data-checkbox组件的属性来改变其显示内容和样式。这包括name（用于标识名称）、true-value（选中的值）以及false-value（未选中的值）等属性。
3. 掌握如何选择和设置默认选项。当选中类型为"toggle"时，可以通过设置default-checked属性来指定默认选中的项。
4. 理解如何运用uni-data-checkbox来实现基于条件渲染的功能。例如，根据复选框的取值对列表的数据加标记，选中为true，非true则为未选中。
5. 了解如何使用API与uni-data-checkbox组件进行交互，以实现更丰富的功能。
6. 通过案例学习，掌握如何实现一个基于uni-data-checkbox的数据选择器，它可以实时获取并展示云端数据，同时配合表单组件使用。

uni-data-picker 级联选择器 002-2-9

课程简介：

1. 如何导入uni-data-picker插件。这是数据驱动的picker选择器，常用于需要进行多级分类选择的场景，如省市区城市选择、公司部门选择等。
2. 如何设置并使用uni-data-picker组件。主要通过在页面中添加标签，并对其属性进行配置，包括mode（选择模式，分为multiSelector和singleSelector两种）、range（显示的数据范围）、value（默认选中的值）等。
3. 明白如何使用uni-data-picker实现多列级联选择器。这通常应用于需要从多个预设选项中进行连续选择的场景，例如从公司部门到小组再到具体成员的选择。
4. 了解如何处理uni-data-picker在H5和微信小程序中只能选择到叶子级的问题。这可能出现在选择年级时不选班级的情况。
5. 学习如何改写uni-data-picker级联选择器，增加搜索和多选功能，以及列出选择和删除功能。

uni-data-select 下拉框 002-2-10

课程简介：

1. 明白如何使用uni-data-select组件创建下拉列表。了解它的一些基本属性，例如value用于绑定值、placeholder用于显示提示信息、options用于设置下拉列表的选项等，并能通过这些属性来自定义下拉框的内容和样式。
2. 掌握如何修改uni-data-select组件的样式。这可以通过在样式文件中直接修改组件样式，或者在组件标签上添加自定义属性，然后使用该自定义属性进行样式修改。同时，也可以使用JavaScript代码动态修改组件的样式。
3. 理解改变uni-data-select组件样式的一些特殊技巧，比如当外层container有样式时，需要去掉最外层的class="container"才能正确显示。另外，需要注意的是，uniapp框架中的组件样式作用域是组件封装内部的，所以如果需要修改全局的样式，可以在App.vue文件中添加相应的全局样式。
4. 了解如何使用uni-data-select组件的插槽用法以及如何修改其视图组件的样式。
5. 通过案例学习如何实现一个省市区三级联动选择器。这不仅能够增强实战经验，也有助于更深入地理解和应用uni-data-select组件。

uni-dataformat 日期格式化 002-2-11

课程简介：

1. 明白如何使用uni-dateformat组件来格式化日期和时间。具体来说，你可以使用< date="timestamp" 这样的语法将时间戳、JavaScript时间对象或者时间字符串传入到组件中。其中，format属性则用于设置时间显示的格式。
2. 掌握如何处理时间戳转换的问题。在开发过程中，如果遇到显示的日期或时间为1970年的情况，只需将数据库里的值乘以1000即可。
3. 学会如何使用API来实现日期格式化的功能，作为uni-dateformat组件的备用方案。
4. 通过实战案例，了解如何实现一个基于uni-dataformat组件的倒计时功能。

uni-datatime-picker 日期选择器 002-2-12

课程简介：

1. 明白如何使用uni-datetime-picker组件来选择年、月、日。你只需在页面中引入该组件，并设置mode为date即可启用日期选择器功能。
2. 学会如何通过修改组件的属性来改变日期选择器的显示效果。例如，你可以设置border属性为true，以使日期选择器具有边框效果。
3. 掌握如何处理时间选择器的问题。在需要使用时间选择器的情况下，你可以通过设置mode为time来使用时间选择器功能。
4. 了解当uni-datetime-picker组件发生更改时，@change事件将会被触发，你可以在这个事件的处理函数中加入相应的业务逻辑。
5. 知道如果遇到问题或者需要对uni-datetime-picker进行一些定制化修改，比如修改组件的源代码等，应该如何操作。
6. 通过实战案例，理解如何实现一个基于uni-datetime-picker组件的预约功能，包括选择预约的日期和时间等。

uni-drawer 抽屉侧滑菜单 002-2-13

课程简介：

1. 明白如何使用uni-drawer组件来创建抽屉式的侧滑菜单。例如，你可以在按钮的点击事件中调用showDrawer方法来显示Drawer。
2. 掌握如何通过设置组件的属性来实现自定义的配置。例如，你可以设置width属性来调整抽屉的宽度，尽管这个属性可能会失效。此外，还可以通过visible属性来控制抽屉的显示和隐藏。
3. 学会如何在template中使用uni-drawer组件。你可以通过插槽的形式插入内容，并在插槽内部添加你需要展示的内容。
4. 了解如何处理uni-drawer组件中内容超出样式设置溢出滚动的问题。此时，你可以尝试使用scroll-view组件并设置其scroll-y属性为true，以便实现纵向滚动。
5. 通过实战案例，理解如何基于uni-drawer组件实现一个可触发的抽屉导航菜单。

uni-easyinput 增强输入框 002-2-14

课程简介：

1. 明白如何使用uni-easyinput组件来增强原生input组件的功能。你可以使用<200>< uni-easyinput type="text" v-model="formData.age" placeholder="请输入年龄" />这样的语法将数据双向绑定到输入框中。
2. 掌握如何处理一些常见的开发问题，例如如何去掉输入框中的首尾空格。在uni-easyinput中，你可以通过设置trim属性为"all"来实现这个功能。
3. 学会如何使用API来实现输入框的基本功能，作为uni-easyinput组件的备用方案。
4. 通过实战案例，了解如何实现一个基于uni-easyinput组件的表单提交功能。

uni-fab 悬浮按钮 002-2-15

课程简介：

1. 明白如何使用uni-fab悬浮按钮在页面中的固定位置显示，而且这个按钮能够随着用户的滚动保持可见性，以便用户在需要时随时使用。
2. 学会如何通过设置uni-fab的属性来控制按钮的样式和行为。例如，通过设置isOpened属性为true或false，你可以控制按钮的展开和收起状态。
3. 理解如何监听uni-fab的open和close事件，并据此对按钮的状态进行响应。同时，你也需要了解如何利用uni-fab提供的单双击事件来执行相应的业务逻辑。
4. 掌握如何在Uniapp中使用API来实现悬浮按钮的功能，作为uni-fab组件的备用方案。
5. 通过实战案例，了解如何实现一个基于uni-fab组件的可拖动悬浮按钮。这将帮助你更深入地理解该组件的用法和功能。

uni-fav 收藏按钮 002-2-16

课程简介：

1. 明白如何使用uni-fav组件实现应用内的收藏功能。你可以使用属性来控制是否显示为已收藏状态，使用value属性来设置或获取当前的状态值。
2. 学会如何通过绑定事件的方式，例如点击事件，来实现点击收藏按钮后的相应操作。
3. 理解并运用父组件向子组件传值以及子组件接收到值后的数据初始化方法。这样，在用户执行收藏操作时，可以实时更新并反馈到页面上。
4. 了解当组件的属性发生变化时，如checked和value等，如何触发相应的处理函数，以实现更复杂的业务逻辑。
5. 通过案例学习，掌握如何使用uni-fav组件来实现商品或文章的点赞和取消点赞功能，进一步增强应用的交互性和用户体验。
6. 如果遇到问题或者uni-fav组件无法使用的情况，知道如何采用API的方式来替代，保证功能的正常运行。

uni-file-picker 文件选择上传 002-2-17

课程简介：

1. 明白如何使用uni-file-picker组件来实现文件的多选或单选上传，包括图片和视频。你可以使用属性来限制最多可以选择的文件数量，使用value属性来设置默认已选中的文件。
2. 掌握如何处理文件上传成功后的操作，例如使用@success事件监听函数来处理上传成功的逻辑。
3. 理解当uni-file-picker组件没有设置上传空间时，它将使用默认的uniCloud为上传目标。如果需要改变上传位置，如使用自己的服务器，可以使用uni.uploadFile()方法。需要注意的是，在H5上传和微信小程序上传时，参数不能共存。
4. 学会如何使用API来实现文件选择和上传的功能，作为uni-file-picker组件的备用方案。
5. 通过实战案例，了解如何基于uni-file-picker组件实现图片预览功能。
6. 了解该组件的更多配置选项，如限制选择文件的数量、设置图片预览的大小等。

uni-forms 表单 002-2-18

课程简介：

1. 明白如何使用uni-forms组件来进行表单校验和提交。每一个uni-forms-item是它的一个表单域组件，用于承载表单具体内容。你可以使用ref属性来获取表单实例，然后通过validate方法来触发表单校验。
2. 学会如何使用JSON字符串来设置表单数据，以及如何根据参数配置表单的行为和样式。
3. 掌握常用的表单校验需求，如即时校验、自定义校验规则和异步校验。这些功能都是通过uni-forms插件来实现的。
4. 理解如何使用uni-forms组件实现类似html的select标签功能，以满足不同的开发需求。
5. 通过实战案例学习，了解如何实现一个简单的登录界面，这个界面包括账号、密码输入框以及登录按钮。

uni-goods-nav 商品导航 002-2-19

课程简介：

1. 明白如何使用uni-goods-nav组件来实现电商类应用底部的商品导航。你可以自定义添加购物车、购买等操作。
2. 掌握如何在项目中引入并使用uni-goods-nav组件。例如，你可以在HBuilderX中选中项目后导入插件，然后在需要使用该组件的页面中直接调用即可。
3. 理解如何使用uni-goods-nav组件API进行二次开发。这包括设置商品导航栏的背景颜色、字体颜色、字体大小等属性。
4. 解决一些常见的开发问题，例如当商品导航栏无法正常显示时如何进行调整。
5. 了解uni-goods-nav组件的版本更新情况，以便及时获取最新的功能和修复的错误。
6. 学习如何将uni-goods-nav组件与其它Uniapp组件（如uni-forms表单、uni-grid宫格等）一起使用，以开发出更复杂的应用。

uni-grid 宫格 002-2-20

课程简介：

1. 明白如何使用uni-grid组件来创建网格布局。你可以设置每行显示的项目个数（column），以及项目之间的间距（itemSpace）。此外，你还可以给每个项目添加徽标组件（badge）或者图标。
2. 学会如何处理change事件。当用户切换网格项时，会触发change事件。你可以通过在uni-grid上监听这个事件，获取到当前选中项目的索引（index）。
3. 如何扩展uni-grid组件的功能。例如，你可以将uni-grid组件扩展为左右滑动的轮播形式。同时，你还可以在自定义组件中通过onClick方法获取被点击的格子信息。
4. 了解平台差异。不同的平台（如App、H5和小程序）在使用uni-grid组件时可能会有一些细微的差异。

uni-icons 图标 002-2-21

课程简介：

1. 了解如何在项目中安装和使用Uni Icons组件库。这包括在项目根目录下打开命令行工具，运行特定命令进行安装，以及在需要的页面或组件中引入图标。
2. 学会如何通过标签来显示各种图标，例如，。同时，也可以使用自定义前缀和类型属性来定制图标，如 。
3. 明白如何使用图标字体来显示图标。需要注意的是，由于图标本质上仍然使用的是字体，所以目前还不支持多色图标。
4. 熟悉一些基本的内容组件，比如文本、富文本和进度条等，并学习他们的使用方法。
5. 对于一些不常见的移动端图标需求，如果Uni Icons无法满足，也可以尝试模仿Uni Icons组件，使用阿里巴巴图标矢量库的图标来自定一个图标组件。
6. 最后，通过实战案例，了解如何基于uni-icons组件实现一个带有底部导航栏的应用界面。

uni-indexed-list 索引列表 002-2-22

课程简介：

1. 明白如何引入uni-indexed-list和uni-icons组件。这包括从uni-app插件市场下载或从HBuilder X提供的hello uni-app模板中复制这两个组件。
2. 学会如何在页面中使用uni-indexed-list组件来展示列表数据。主要使用方式是在页面的