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,微信小程序的音频背景播放组件。

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

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

课程简介：

1. 明白如何使用uni-file-picker组件来实现文件的多选或单选上传，包括图片和视频。你可以使用<limit属性来限制最多可以选择的文件数量，使用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. 学会如何通过<uni-icons标签来显示各种图标，例如，<uni-icons type="add"></uni-icons>。同时，也可以使用自定义前缀和类型属性来定制图标，如 <uni-icons custom-prefix="iconfont" type="icon-search" size="30"></uni-icons>。
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组件来展示列表数据。主要使用方式是在页面的<template>标签内使用<uni-indexed-list>标签包裹数据，并通过:items="items"属性绑定数据源。
3. 理解如何使用字母索引导航栏。通过在右侧添加一个字母索引导航栏，并监听其点击事件，当点击某个字母时，滚动到对应的区域。这部分主要是通过使用uni-app原生scroll-view组件的scroll-into-view方法实现。
4. 掌握如何处理请求获得的数据。对于通过API请求获取到的列表数据，需要进行一定的处理才能用于uni-indexed-list组件的展示。
5. 了解如何实现一个简单的通讯录应用。通讯录是一个常见的列表应用场景，可以使用uni-indexed-list组件来实现。可以参考官方案例hello-uniapp进行学习和实践。

uni-link 超链接 002-2-23

课程简介：

1. 了解uni-link是一个外部网页超链接组件。在小程序环境下，如果用户复制url，会提示在app内打开外部浏览器；在h5端，则会直接打开新网页。
2. 学会如何通过<uni-link>标签来显示超链接。例如<uni-link href="https://www.example.com" text="点击跳转"></uni-link>，href属性是必填项，用于指定要打开的URL地址。
3. 明白如何使用uni-link组件的属性，如text（自定义显示的文本），showUnderLine（是否显示下划线），以及type（指定跳转类型）。
4. 如果需要在app端打开新页面，可以查看uni-link的源码并使用plus.runtime.openURL方法进行优化。这个方法会在内置窗口中打开一个新页面，同时自带标题栏和返回按钮。此外，也可以使用app-plus的webview模块api进行管理。
5. 掌握如何在UniApp中实现跳转到外部链接，即打开一个网页的功能。具体步骤包括创建目标页面，首先在pages目录下创建一个新的文件夹，然后在该文件夹下创建一个webview.vue文件。

uni-list 列表 002-2-24

课程简介：

1. 明白如何使用uni-list和uni-list-item组件来创建基本的列表。其中，uni-list是父容器，而核心则是它的子组件uni-list-item，每个uni-list-item代表列表中的一个可重复行，这些子组件能够无限循环。
2. 学会如何通过内置的属性来满足一些常见的需求，例如设置列表的标题和小文字、显示箭头或者禁用状态等。
3. 了解如何利用扩展插槽自定义列表内容，这在内置属性无法满足特定需求时非常有用。
4. 熟悉一些基本的功能，如上拉刷新、下拉加载更多以及顶部提示语等，这些都是在新闻列表模式下非常实用的功能。
5. 掌握如何在列表组件中使用图标、略缩图或放置任何你想放的元素，以增强列表的视觉效果和信息表达。
6. 通过实战案例，理解如何基于uni-list组件实现一个具有底部导航栏的应用界面。

uni-load-more 加载更多 002-2-25

课程简介：

1. 如何引入uni-load-more组件到你的项目中。这通常包括从指定的路径导入uniLoadMore组件，然后在需要使用的地方进行调用。
2. 在数据中设置组件所需的参数。这包括reload（指示是否允许刷新）、status（当前状态，可以是’more’或者’nomore’）以及contentText（自定义的内容文本）。其中contentText是一个重要的属性，用于定制加载中的提示文字、无更多数据的提示文字以及上拉加载更多的提示文字。
3. 在模板中使用标签来显示加载更多组件。注意根据实际需要配置该标签的属性。
4. 理解组件的工作原理。当用户滑动到列表底部时，uni-load-more组件会自动触发加载更多数据的操作。这个过程是自动的，你无需编写额外的代码来实现这个功能。
5. 通过实战案例，了解如何基于uni-load-more组件实现一个带有上拉加载和触底加载功能的列表界面。这是一个很好的练习，可以帮助你更好地理解和应用uni-load-more组件。

uni-nav-bar 自定义导航栏 002-2-26

课程简介：

1. 了解如何在项目中安装和使用Uni NavBar组件库。具体包括在项目根目录下打开命令行工具，运行特定命令进行安装，以及在需要的页面或组件中引入图标。
2. 学会如何通过<uni-nav-bar标签来显示各种导航栏。例如，你可以使用left-icon和left-text属性来设置左边的返回按钮，使用right-text属性来设置右边的菜单按钮，title属性则用于设置导航栏的标题。
3. 熟悉一些基础的内容组件，比如文本、富文本和进度条等，并学习他们的使用方法。
4. 明白如何使用插槽(slot)来向NavBar里插入不同内容，以达到自定义的目的。如需插入标题栏、左侧和右侧内容，只需在NavBar组件内添加相应的代码即可。
5. 如果需要创建自定义导航栏，你可以在pages.json的"style"中通过"navigationStyle": "custom"属性来实现，也可以封装自定义导航栏组件，并通过父子传值控制背景色、回退图标、标题。
6. 注意处理自定义导航栏遇到通顶到状态栏的情况，此时应设置status-bar=“true”。
7. 理解当需要在关闭原生导航栏的情况下进行开发时，可以使用前端标签组件模拟导航栏进行开发。但是需要注意的是，官方说明中提到使用HTML组件模拟导航栏可能存在性能问题。

uni-notice-bar 通告栏 002-2-27

课程简介：

1. 如何安装并使用Uniapp的uni-notice-bar通告栏组件。这包括在项目中引入组件，以及在需要的页面或组件中正确配置和使用通告栏。
2. 理解如何使用text属性来设置通告栏的内容，无论是单行文本还是多行文本。
3. 掌握如何使用single属性来控制通告栏是否以单行方式显示。
4. 学会通过更改组件的属性如颜色、图标等来自定义通告栏的展示效果。
5. 明白如何使用API来实现通告栏的功能，作为uni-notice-bar组件的备用方案。
6. 通过实战案例，了解如何基于uni-notice-bar组件实现一个带有通告栏的应用界面。例如，在购物车的页面中添加一个带有商品数量变更通知的通告栏。

uni-number-box 数字输入框 002-2-28

课程简介：

1. 明白如何通过<input标签的type属性设置为"number"来创建一个只能输入数字的输入框。
2. 学会使用v-model指令来实现双向数据绑定，即在输入框中输入的数字能够实时反应到Vue实例的数据中，反之亦然。
3. 熟悉加减按钮的功能和使用，它们位于输入框旁边，可以进行数值的增减操作。
4. 掌握如何使用事件监听和处理函数对用户的操作进行响应。例如，可以通过@click指令为加减按钮添加点击事件，当用户点击时执行相应的处理函数。
5. 对于特殊需求，比如需要输入小数点后几位的数字，可以尝试修改uni-number-box.vue文件以满足项目需求。
6. 如果在使用中发现uni-number-box组件的高度超出预期，可以对uni-numbox__value进行调整以解决问题。

uni-pagination 分页器 002-2-30

课程简介：

1. 明白如何在项目中安装和使用uni-pagination组件。这包括在项目根目录下打开命令行工具，运行特定命令进行安装，以及在需要的页面或组件中引入该组件。
2. 学会如何通过<uni-pagination>标签来控制列表的显示数量以及跳转到指定页码，例如，<uni-pagination @change="onPageChange" :current-page.sync="currentPage" :total="totalPages"></uni-pagination>。同时，也可以使用@size-change、@current-change等事件监听分页器的变化。
3. 理解如何使用<uni-pagination>标签的:list属性来绑定一个数组，以便于渲染列表数据。
4. 熟悉一些基本的内容组件，比如文本、富文本和进度条等，并学习他们的使用方法。
5. 对于一些复杂的分页需求，如表格内容的分页查询，除了可以使用uni-pagination组件外，还可以结合使用MySQL的Limit语句和COUNT函数来实现。
6. 最后，通过实战案例，了解如何基于uni-pagination组件实现一个带有底部导航栏的应用界面。

uni-popup 弹出层 002-2-31

课程简介：

1. 明白如何使用uni-popup组件来显示各种弹窗、模态框和提示框。你可以通过在模板中添加<uni-popup标签并设置其属性，如isShow（控制弹出层是否显示）、position（设置弹出层的位置，包括中间、底部、顶部等）以及@close（监听关闭事件）。
2. 掌握如何处理uni-popup组件的样式。你可以使用内联样式或者单独的CSS文件来为uni-popup组件定义样式。
3. 学会如何通过API来实现弹出层的功能，作为uni-popup组件的备用方案。这通常应用在一些高级定制的场景中。
4. 对一些常见的弹出层需求，如在页面加载时显示一个加载提示，可在页面的onLoad生命周期方法中，通过设置isShow属性为true来显示uni-popup组件。同时，也可以监听uni-popup组件的@close事件，在事件回调中将isShow属性设置为false以隐藏弹出层。
5. 最后，通过实战案例，了解如何基于uni-popup组件实现一个包含登录表单的登录弹窗。这个案例将会涵盖表单验证、用户输入处理等知识点。

uni-rate 评分 002-2-32

课程简介：

1. 如何引入和使用uni-rate组件，在需要的页面或组件中引用并显示评分。例如，<rate v-model="value" @change="onChange"></rate>。
2. 理解并应用基本的功能和属性，如设置评分值、最大评分数、是否支持滑动手势选择评分等。例如，使用:touchable="false"禁止滑动选择评分，使用:max="10"设置评分的最大值为10，或者通过size属性来调整星星大小。
3. 掌握如何对uni-rate组件进行更深入的定制化。例如，设置星星间隔可以通过:margin属性来实现。同时，也可以设置星星的颜色，比如将默认颜色修改为灰色，将当前选中星星的颜色设置为红色。
4. 学会处理一些特殊情况。例如，如果需要禁用uni-rate组件，可以使用:disabled="true"属性来实现，并通过disabledColor属性设置禁用时的颜色。
5. 最后，了解uni-rate组件的应用场景。该组件常用于商品评价打分、服务态度评价、用户满意度等场景。
6. 通过实战案例，学习如何基于uni-rate组件实现一个带有底部导航栏和应用界面的应用。

uni-row 布局-行 002-2-33

课程简介：

1. 理解并应用基础栅格布局。例如，你可以使用<uni-row标签来创建一行，然后在其中添加uni-col分栏来放置元素。
2. 掌握栅格系统的响应式特性。流式栅格系统能随着屏幕或视口分为24份，可以迅速简便地创建适应各种屏幕尺寸的布局。
3. 学会如何设置栅格间隔。你可以通过gutter属性来指定栅格间的间隔。
4. 熟悉混合布局的创建。在一行中混合使用多种分栏数，如等分（span）和占据全部宽度（12），以实现更复杂的布局设计。
5. 掌握分栏偏移（offset、pull、push）的用法。通过调整偏移量，可以实现元素的位移效果。
6. 了解如何使用class类名定义多个key，以控制样式和布局。
7. 最后，通过实战案例，学习如何基于uni-row组件实现一个带有底部导航栏和应用界面的应用。

uni-search-bar 搜索栏 002-2-34

课程简介：

1. 如何引入和使用uni-search-bar组件。在需要的页面或组件中引用并显示搜索栏，如<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @input="input" @cancel="cancel" @change="change" @clear="clear">。
2. 理解和应用基本的功能和属性，例如设置搜索框的值、是否自动聚焦、是否支持点击确认键搜索等。你可以使用v-model来实现双向数据绑定，通过@confirm事件来进行搜索操作。同时，还可以使用其他诸如@blur（失去焦点）、@focus（获得焦点）、@input（输入内容改变）、@cancel（取消搜索）和@change（搜索值改变）等事件来对搜索过程进行更精细的控制。
3. 学会如何处理一些特殊情况，例如禁用uni-search-bar组件，可以使用：disabled属性来实现，并通过disabledColor属性设置禁用时的颜色。
4. 进一步了解uni-search-bar的高级功能和扩展用法。例如，你可以自定义搜索按钮和搜索图标，或者为它添加一些自定义样式。此外，如果你需要在特定场景下使用uni-search-bar，比如日期范围筛选等，你可能需要结合其他组件或方法来实现更复杂的功能。
5. 最后，通过实战案例学习如何基于uni-search-bar组件实现一个带有底部导航栏和应用界面的应用。这将帮助你更好地理解uni-search-bar的实际应用和开发技巧。

uni-section 标题栏 002-2-35

课程简介：

1. 如何引入和使用uni-section组件以显示标题栏。例如，你可以在需要的页面或组件中引用并显示标题栏，如 <uni-section title="主标题" sub-title="副标题"></uni-section>。
2. 理解并应用基本的功能和属性，包括设置标题、副标题以及标题栏的类型。例如，可以通过type属性设置为"line"来添加竖线装饰。
3. 掌握如何进行更深入的定制化。例如，你可以使用:class属性来自定义样式，或者通过修改:style属性来调整标题栏的字体颜色和背景色。
4. 如果需要禁用uni-section组件，你可以使用:disabled="true"来实现，并通过disabledTextColor属性设置禁用时的文字颜色。
5. 学会处理一些特殊情况。例如，如果需要将uni-section组件置于页面顶部，可以使用position属性来实现，并通过offsetTop属性设置偏移量。同时，你也可以通过设置阴影效果来提升用户体验，比如使用is-shadow属性设置为false来取消阴影效果。
6. 最后，了解uni-section组件的应用场景。该组件常用于文章列表、商品分类等需要进行标题分类展示的场景。
7. 通过实战案例，了解如何基于uni-section组件实现一个带有底部导航栏和应用界面的应用。

uni-segmented-control 分段器 002-2-36

课程简介：

1. 如何正确安装并引入uni-segmented-control组件。这包括在dcloud插件市场查找并下载uni-segmented-control组件，并在需要的页面或组件中引用。
2. 学会如何使用uni-segmented-control组件展示分段内容。这主要通过<value="items"来设置选项的值，并通过@clickItem="onClickItem"来监听选项的点击事件。
3. 掌握一些基本的uni-segmented-control属性的使用。例如，current用于指定当前选中项的值，active-color用于设置当前项的颜色，以及style-type用于设置样式类型（可选值有text和button）。
4. 了解如何使用uni-segmented-control实现横向滑动的效果。这主要需要配合其他组件如swiper一起使用，以实现分类浏览数据的需求。
5. 明白如何处理uni-segmented-control在选项多的时候页面美观性的问题。如果项目需求中存在大量的选项，可能需要考虑优化设计或者寻找其他替代方案。
6. 最后，通过实战案例，学习如何基于uni-segmented-control组件实现一个带有底部导航栏的应用界面，包括顶部导航栏的制作等。

uni-steps 步骤条 002-2-37

课程简介：

1. 如何引入和使用uni-steps组件。在需要的页面或组件中引用并显示步骤条，例如<uni-steps :options="steps" @change="onChange"></uni-steps>。
2. 理解并应用基本的功能和属性，比如设置步骤条的当前进度、步骤条的颜色、步骤条的大小等。另外，还可以通过@change事件监听器来检测步骤条的变化，从而执行相应的业务逻辑。
3. 学会处理一些特殊情况。比如如果需要禁用uni-steps组件，则可以使用:disabled="true"属性来实现，并通过disabledColor属性设置禁用时的颜色。
4. 明白如何使用自定义模板来满足特殊的显示需求。例如，可以通过修改template模板来改变步骤条的显示方式。
5. 最后，了解uni-steps组件在实际开发中的应用场景。该组件常用于流程操作指引、步骤导航等场景。
6. 通过实战案例，学习如何基于uni-steps组件实现一个带有底部导航栏和应用界面的应用。

uni-swipe-action 滑动操作 002-2-38

课程简介：

1. 理解如何使用uni-swipe-action组件来实现滑动操作。这可以通过直接在模板中使用<200px组件来实现，例如<uni-swipe-action><view>内容</view></uni-swipe-action>。
2. 了解如何使用变量来控制SwipeAction的开启状态。如果需要在特定条件下禁用或启用SwipeAction，可以使用数据绑定来实现。
3. 掌握如何通过设置属性来自定义SwipeAction的行为。例如，如果想要禁止左右滑动，可以在uni-swipe-action-item组件上添加:disabled="true"属性。
4. 学习如何在列表中实现滑选删除功能。具体来说，当用户向左滑动列表项时，会显示一个删除按钮；当用户点击列表项或删除按钮时，SwipeAction会自动收缩。另外，如果需要弹出对话框询问用户是否确认删除，此时应保持删除按钮可见。
5. 熟悉如何在uni-swipe-action组件内部使用其他组件。例如，可以在<uni-swipe-action>标签内部使用<block v-for="(goods,i) in cart" :key="i">来为每个购物车商品创建一个滑动操作项。
6. 学会如何处理一些常见的问题。例如，由于Uniapp组件无法监听到除自身以外的点击事件，因此，为了在点击页面其他地方时自动关闭SwipeAction，可以在页面的根元素上添加点击事件的冒泡监听。同时，如果存在用户手动点击SwipeAction以外的地方，如某个按钮并使SwipeAction滑出的情况，则需要在该元素（这里是按钮）上添加@click事件来阻止事件冒泡到根元素，避免触发自动关闭的机制。
7. 最后，通过实战案例学习如何基于uni-swipe-action组件实现一个完整的带有底部导航栏和应用界面的应用。

uni-swipe-dot 轮播图指示点 002-2-39

课程简介：

1. 了解如何在项目中引入和使用uni-swipe-dot组件，并在需要的页面或组件中显示轮播图指示点。例如，<uws-swiper-dot @clickItem="clickItem" :info="info" :current="current"。
2. 掌握基本的uni-swipe-dot组件功能和属性，如通过点击指示点来切换轮播图、设置指示点的信息等。同时，也可以设置指示点的大小以及位置。
3. 学会如何进行更深层次的定制化。例如，如果需要修改指示点的颜色或者大小，可以通过修改样式来实现。另外，如果需要禁用uni-swipe-dot组件，可以使用:disabled="true"属性来达到目的。
4. 对于一些特殊需求，如果uni-swipe-dot无法满足，可以尝试自定义一个符合自己需求的轮播图指示点组件。
5. 最后，通过实战案例学习如何使用uni-swipe-dot组件实现一个包含底部导航栏和应用界面的应用。

uni-table 表格 002-2-40

课程简介：

1. 如何引入和使用uni-table表格组件，并在需要的页面或组件中显示和操作数据。这包括使用<data属性绑定数据源，以及使用<tr>、<th>、和<td>等标签来构建表格的结构。
2. 掌握表格的基本功能，如数据渲染、排序、筛选、分页、编辑和导出等。例如，可以使用:sortable="true"来开启列排序功能，通过:selectable="true"实现多选功能，使用:pagination="true"来实现表格的分页显示。
3. 了解如何扩展uni-table表格的功能，如进行数据的增添、删除、修改等操作。同时，也可以通过事件监听和处理函数，实现对应操作的交互效果。
4. 熟悉如何处理特殊情况。例如，如果需要禁用uni-table组件，可以使用:disabled="true"属性来实现，并通过disabledColor属性设置禁用时的颜色。
5. 最后，通过实战案例，学习如何基于uni-table组件实现一个带有底部导航栏和应用界面的应用。这将有助于你更好地理解uni-table组件的使用方法和应用场景。

uni-tag 标签 002-2-41

课程简介：

1. 如何引入和使用uni-tag组件。这通常包括在需要的页面或组件中引用并显示标签。例如，<u-tag v-model="value" @change="onChange"></u-tag>。
2. 掌握基本的uni-tag组件功能和属性。例如，设置标签的值、是否支持切换选中状态等。通过属性值的设定，如:true或者:false来控制是否支持切换选中状态。
3. 理解如何使用事件监听器来响应用户的操作。例如，可以在@change事件中定义当标签的选中状态改变时需要执行的操作。
4. 熟悉如何对uni-tag组件进行更深入的定制化。例如，你可以使用type属性来设置标签的形状是实心还是空心；使用size属性来调整标签的大小；以及通过color属性来修改标签的颜色。
5. 对于一些特殊场景，如输入框和Tag标签的结合使用，如果需要在用户输入的同时创建新的标签，可以使用input组件配合u-tag来实现。
6. 最后，通过实战案例，了解uni-tag组件在实际项目中的应用，如展示商品分类、用户喜好等。

uni-title 章节标题 002-2-42

课程简介：

1. 如何引入和使用uni-title组件，在需要的页面或组件中引用并显示标题。例如，`<2. 理解并应用基本的功能和属性，如设置标题级别（一级标题、二级标题等）、标题样式（文本颜色、大小、加粗等）以及是否支持滚动动画等。
2. 掌握如何对uni-title组件进行更深入的定制化。例如，你可以通过修改组件的样式来改变标题的颜色、大小和字体等。同时，也可以设置标题的位置，比如将默认位置修改为居中对齐。
3. 学会处理一些特殊情况。例如，如果需要禁用uni-title组件，可以使用:disabled="true"属性来实现。此外，如果你需要在页面之间传递数据，可以使用uni.setNavigationBarTitle({ title:'设置标题(可以是变量)'})来动态修改标题。
4. 最后，了解uni-title组件的应用场景。该组件常用于记录页面标题，使用当前组件在 uni-app 开启统计的情况下，将会自动统计页面标题。
5. 通过实战案例，学习如何基于uni-title组件实现一个带有底部导航栏和应用界面的应用。

uni-tooltip 文字提示 002-2-43

课程简介：

1. 如何引入和使用uni-tooltip组件，在需要的页面或组件中引用并显示提示信息。例如，<uni-tooltip position="top" content="这是一段提示信息"。
2. 理解并应用基本的功能和属性，如设置提示信息的样式（文本颜色、大小、加粗等）、提示窗的位置（如上、下、左、右等）以及是否支持滚动动画等。此外，工具提示还提供了两个不同的主题：dark和light，你也可以自行添加样式。
3. 掌握如何对uni-tooltip组件进行更深入的定制化。例如，你可以通过修改组件的样式来改变提示信息的颜色、大小和字体等。同时，也可以设置提示窗的位置，比如将默认位置修改为居中对齐。
4. 学会处理一些特殊情况。例如，如果需要禁用uni-tooltip组件，可以使用:disabled="true"属性来实现。此外，如果你需要在页面之间传递数据，可以使用uni.setNavigationBarTitle({ title:'设置标题(可以是变量)'})来动态修改标题。
5. 最后，了解uni-tooltip组件的应用场景。该组件常用于记录页面标题，使用当前组件在 uni-app 开启统计的情况下，将会自动统计页面标题。
6. 通过实战案例，学习如何基于uni-tooltip组件实现一个带有底部导航栏和应用界面的应用。

uni-transition 过渡动画 002-2-44

课程简介：

1. 如何引入和使用uni-transition组件，在需要的页面或组件中包裹需要添加过渡效果的内容。例如，<uni-transition mode-class="fade" :show="true"></uni-transition>。
2. 理解并应用基本的功能和属性，如设置过渡模式（淡入淡出、滑动等）、过渡时间以及过渡延迟等。例如，使用mode-class="fade"来设置淡入淡出的过渡效果，或者通过:duration="300"设置过渡时间为300毫秒。
3. 掌握如何对uni-transition组件进行更深入的定制化。例如，你可以通过修改组件的样式来改变过渡效果的颜色、大小和速度等。同时，也可以设置过渡的方向，比如将默认方向修改为从左到右。
4. 如果需要在元素显示和隐藏时添加过渡动画效果，可以利用Vue组件的v-if和CSS过渡类来实现。
5. 最后，了解uni-transition组件的应用场景。该组件常用于列表数据的渲染、页面的跳转、弹出层的显示和隐藏等场景中。
6. 通过实战案例，学习如何基于uni-transition组件实现一个带有底部导航栏和应用界面的应用。

Uniapp的API教程 3

基础 003-1

日志打印 003-1-1

课程简介：

1. 如何在项目中使用console.log、console.info、console.warn、console.error等方法向控制台打印日志。这些方法分别用于打印普通信息、详细信息、警告信息和错误信息。
2. 在云函数中打印日志的方法。同样可以使用上述的console.log、console.info、console.warn和console.error来打印日志。
3. 如何利用HBuilderX工具查看在运行过程中打印出来的日志。这可以帮助开发者在调试阶段快速定位问题。
4. 了解不同日志级别之间的差异以及何时应该使用何种级别的日志。例如，当出现错误时应该使用console.error，当需要打印普通的运行信息时可以使用console.log。此外，还可以了解uni-app中的debug方法和log方法，它们等同于console.log和console.info。
5. 对于较复杂的项目场景，如需要处理售后问题或进行特殊操作时，可能还需要了解如何写一个前端保存操作日志的方法。

定时器 003-1-2

课程简介：

1. 如何在Uniapp中设置和使用定时器。这包括两种主要的定时器API，第一种是setTimeout函数，用于设置一个在指定时间后执行回调函数的定时器；第二种是setInterval函数，用于设置一个在指定时间间隔后重复执行回调函数的定时器。例如，你可以使用setTimeout(function(){uni.navigateBack();},2000)来设置一个在2秒后返回上一页的定时器。
2. 如何清除已设置的定时器。当页面中使用了定时器，在离开这个页面的时候一定要记得清除，避免出现bug。你可以通过在onUnload生命周期钩子中检查timer是否存在，如果存在则清除它，如onUnload() { if (this.timer) { clearTimeout(this.timer); }}。
3. 如何管理和控制多个定时器。比如，你可以定义一个timer data来管理所有的定时器，如data() { return { timer: null } }，并通过修改这个data里的timer变量来实现定时器的启动和停止。
4. 最后，了解定时器的应用场景。定时器常用于执行某些需要周期性执行或者延时执行的任务，如轮播图的自动播放、倒计时等。

Base64 字符串转成 ArrayBuffer 对象 003-1-3

课程简介：

1. 了解Base64编码和解码的概念。Base64是一种用64个字符表示任意二进制数据的方法，常用于在HTTP协议中传输二进制数据。
2. 掌握如何在Uniapp中进行Base64编码和解码。你可以使用uni.base64.encode()方法将二进制数据转换为Base64字符串，使用uni.base64.decode()方法将Base64字符串解码为二进制数据。
3. 学会如何通过uni.arrayBufferToBase64()和uni.base64ToArrayBuffer()方法实现数组缓冲区(ArrayBuffer)与Base64之间的转换。这两个方法分别用于将ArrayBuffer对象编码为Base64字符串，以及将Base64字符串解码为ArrayBuffer对象。
4. 理解ArrayBuffer对象的特性和应用。ArrayBuffer是一种通用的、固定长度的原始二进制数据缓冲区。由于其可以直接操作内存，因此常用于处理大量数据或执行高性能计算等场景。
5. 通过实战案例，学习如何使用这些方法来实现一些常见功能，如从服务器获取Base64编码的图片并显示在页面上，或者将用户输入的数据编码为Base64字符串并存储到数据库中等。

ArrayBuffer 对象转成 Base64 字符串 003-1-4

课程简介：

1. 理解ArrayBuffer对象：ArrayBuffer是一种通用的、固定长度的原始二进制数据缓冲区。它不能直接读取或操作，需要通过类型数组或DataView对象来操作其中的数据。
2. 掌握如何创建ArrayBuffer对象：可以使用JavaScript的内置构造函数new ArrayBuffer(size)来创建一个指定大小的ArrayBuffer对象。
3. 学会如何使用Uint8Array视图和TextEncoder接口将ArrayBuffer对象转换为Base64字符串。具体来说，首先需要使用new Uint8Array(arrayBuffer)来创建一个Uint8Array视图，然后使用TextEncoder().encode()方法将该视图编码为一个字符串。最后，再将这个字符串用btoa()函数转换成Base64字符串。

启动 003-1-5

uni.getLaunchOptionsSync() 获取启动时的参数 003-1-5-1

课程简介：

1. uni.getLaunchOptionsSync()是一个用来获取启动时的参数的方法。它能够返回本次启动时的参数，其返回值与App.onLaunch的回调参数一致。
2. 如何获取启动参数。在需要获取路径参数的页面或组件中，你需要首先引入UniApp的全局对象：import uni from 'uni-app'。然后，通过调用uni.getLaunchOptionsSync()方法，你就可以获取到启动参数。
3. 了解该方法的应用场景。当你的应用需要进行冷启动或热启动处理时，或者需要在启动后立即获取一些启动相关的参数时，你可以使用uni.getLaunchOptionsSync()方法。

uni.getEnterOptionsSync() 获取小程序页面跳转时的参数 003-1-5-2

课程简介：

1. 了解uni.getEnterOptionsSync()是用于获取小程序页面跳转时的参数。需要注意的是，各平台在启动时，参数获取存在差异。在App平台上，其返回值与App.onLaunch的回调参数一致；在Web平台上，也存在相同的情况，但是不同Vue版本对其支持的情况有所差异。
2. 学会如何使用uni.getEnterOptionsSync()来获取启动时的参数。例如，可以使用如下代码来获取启动时的参数：const options = uni.getEnterOptionsSync();。
3. 理解并应用基本的页面跳转及参数传递方法。例如，你可以通过链接跳转或事件跳转来实现页面的跳转需求，并在跳转过程中传递参数。
4. 如果需要在Uniapp项目中运行微信小程序并自动跳转，你也可以在App.vue文件中添加特定的代码来实现这一功能。

uni.onPageNotFound() 监听应用要打开的页面不存在事件 003-1-6

课程简介：

1. 理解uni.onPageNotFound()的基本用途和工作机制。这个API是用来监听应用打开的页面不存在的事件。当用户试图访问一个不存在的页面时，会触发这个事件。
2. 掌握如何使用uni.onPageNotFound()进行错误处理。例如，当应用程序发生未捕获的错误时，你可以使用此方法打印出错误信息，这对于调试和修复应用程序非常有帮助。
3. 学会如何正确地使用和取消监听uni.onPageNotFound()。记住，如果你在除了 App.vue 的其他时机中调用 uni.onPageNotFound，需要用uni.offPageNotFound取消监听，否则可能会出现监听多次的情况。
4. 通过实战案例学习如何在项目中实现页面导航和交互。比如，你可以在A页面中使用uni.$emit来触发一个自定义事件，然后在B页面中使用uni.$on来监听这个事件。当B页面接收到该事件后，可以使用uni.navigateBack返回A页面。
5. 熟悉其他相关的API，如uni.onError，它可以用来监听小程序错误事件，包括脚本错误或API调用报错等。

uni.addInterceptor() 添加拦截器 003-1-7

课程简介：

1. 了解如何通过uni.addInterceptor()添加拦截器。这个方法主要用于拦截uni的api，以添加全局属性或全局处理事件。例如，你可以使用uni.addInterceptor('navigateTo',{...})来拦截导航到页面的操作。
2. 熟悉uni.addInterceptor()的基本用法和参数含义。该方法接受两个参数，第一个参数是需要拦截的api名称，如’request’、'navigateTo’等；第二个参数则是一个包含回调函数的对象。
3. 学会如何在拦截器中处理请求和响应。在触发前（如’navigateTo’拦截器的invoke方法），你可以在拦截器中执行一些操作，比如修改url或者拼接额外的参数。而在请求成功后（success回调函数）和请求失败后（fail回调函数），你也可以进行相应的处理，例如修改返回的数据。
4. 掌握如何监听和处理特定事件。例如，通过监听to和from事件，你可以对小程序的路由跳转进行拦截。需要注意的是，对于小程序自带的返回按钮和底部tabbar切换，虽然无法拦截他们的跳转，但可以监听到这些事件。此外，uniapp在H5平台上可以实现对路由的全部拦截。
5. 最后，了解除拦截外，还可以使用uni.removeInterceptor(STRING)来移除已添加的拦截器。

uni.canIUse() 判断应用的 API，回调，参数，组件等是否在当前版本可用 003-1-8

课程简介：

1. 了解如何使用uni.canIUse()来判断应用的API、回调、参数、组件等是否在当前版本中可用。这个方法接受一个字符串参数，即需要判断的API、回调、参数或组件的名称。
2. 熟悉uni.canIUse()的基本用法和参数含义。该方法返回一个布尔值，如果指定的API、回调、参数或组件在当前版本中可用，则返回true；否则返回false。
3. 学会如何利用uni.canIUse()进行条件编译。通过这个方法，你可以根据不同的运行环境，为特定的API、回调、参数或组件编写不同的代码。例如，if (uni.canIUse('getSystemInfoSync')) { // 使用同步获取系统信息的API}。
4. 掌握如何检查特定API或组件的版本支持情况。例如，你可以使用uni.canIUse('live-player')来检查当前环境是否支持直播功能。
5. 最后，了解除了API之外，你还可以借助uni.canIUse()来检查微信小程序的各种接口和组件是否在当前版本中可用，如’getSystemInfoSync.return.screenWidth’、'request.object.method.GET’等。

网络 003-2

uni.request() 发起网络请求 003-2-1

课程简介：

1. 了解如何使用uni.request()来发起网络请求。这个方法主要用于向指定的URL发送网络请求，并可以携带请求头和请求数据等参数。例如，你可以使用uni.request({url: 'https://ceshi2.dishait.cn/api/v1/list',data: {text: 'uni.request'},header: {'custom-header': 'hello'}})来发起一个GET请求。
2. 理解uni.request()的基本参数。该方法接受一个对象作为参数，该对象中可以包含如url（必填）、data（选填）、header（选填）、method（选填）、dataType（选填）和success（选填）等属性。需要注意的是，对于不同的请求方式（如GET、POST等），可能需要设置不同的参数。
3. 掌握如何在uni.request()中处理请求和响应。你可以使用success回调函数来处理服务器返回的数据，error回调函数来处理请求失败的情况。同时，你还可以监听包括’uploadFileProgress’、‘downloadFileProgress’、'networkStatusChange’等在内的事件。
4. 了解除网络请求外，还需要知道如何进行网络请求的二次封装。在项目开发过程中，往往需要对请求进行二次封装，以实现多个环境的请求配置，对请求方式，数据格式等进行封装，将请求做到最简化。
5. 最后，了解uni.request()的其他用途。例如，可以使用它来实现文件上传和下载功能，也可以结合其他API使用，如uni.uploadFile()和uni.downloadFile()等。

uni.uploadFile() 资源上传下载 003-2-2

课程简介：

1. 如何利用uni.uploadFile()方法将本地资源上传到开发者服务器。该方法接受一个对象作为参数，这个对象中包含了用于指定上传文件的相关配置信息。
2. 了解uni.uploadFile()的基本用法和参数含义。这个方法的主要参数包括url（必填，服务器地址）、filePath（必填，需要上传的文件路径）、name（可选，上传文件时附带的原生文件名）、header（可选，设置请求头信息），以及formData（可选，设置请求体）。
3. 学会如何在uni.uploadFile()方法中处理上传成功和失败的情况。你可以通过监听’success’和’fail’事件来分别处理上传成功和失败的逻辑。
4. 除了上传文件，还可以使用类似的uni.downloadFile()方法来下载服务器上的资源。
5. 最后，了解一些与文件操作相关的其他API，如保存文件到本地的uni.saveFile()和打开文件预览的uni.openDocument()等。

uni.connectSocket() WebSocket 发送数据 003-2-3

课程简介：

1. 如何创建WebSocket连接。在需要使用的页面中，你可以通过调用uni.connectSocket({ url: 'ws://www.example.com' })来建立WebSocket长链接。
2. 了解如何在WebSocket连接成功后发送数据。你需要在uni.onSocketOpen回调之后才能发送数据。可以使用uni.sendSocketMessage({ data: 'Hello WebSocket' })来向服务器发送数据。
3. 学会如何使用uni-app官方提供的uni-ws插件。在页面中使用uni.createWebSocket(websocket地址，回调函数)方法创建websocket连接，并在回调函数中处理websocket连接的状态和数据。
4. 熟悉如何监听WebSocket接收到的数据。你可以使用uni.onSocketData(data)来监听服务器发送的数据。
5. 了解除连接外，还可以使用uni.closeSocket()来关闭WebSocket连接。
6. 最后，了解一些额外的功能。例如，你可以使用uni.offSocketOpen()来取消WebSocket连接成功的监听，或者使用uni.offSocketError()来取消WebSocket错误监听。
7. 实践案例：通过Uniapp创建一个聊天室页面，包含输入框和消息列表，并利用WebSocket实现实时聊天。

uni.connectSocket() SocketTask 接受数据 003-2-4

课程简介：

1. 如何通过uni.connectSocket()建立websocket连接。这个方法用于创建一个新的WebSocket连接，并返回一个SocketTask对象。例如，你可以使用var socketTask = uni.connectSocket({ url: 'wss://www.example.com/socket' });来连接到指定的websocket服务器。
2. 熟悉SocketTask的基本用法和参数含义。SocketTask对象包含了一些方法，如onOpen、onMessage、onError、onClose等，用于处理WebSocket连接的各种事件。
3. 学会如何在SocketTask中接收服务器返回的消息。你可以通过uni.onSocketMessage()方法来监听服务器返回的数据，例如：this.webSocketTask.onMessage((res) => { let data = JSON.parse(res.data); //判断服务器返回的type类型 switch (data.type) { //如果返回的ping，说明服务端ping客户端 case 'ping':。
4. 掌握如何监听WebSocket连接的各种状态。例如，你可以通过监听onOpen、onError、onClose等事件，来获取WebSocket连接的打开、错误和关闭等状态。
5. 了解除连接外，还可以使用SocketTask的close方法来关闭WebSocket连接。同时，如果需要设置重连延迟时间和重连次数，也可以在代码中自行扩展相应的属性。

页面跳转和路由 003-3

uni.navigateTo() 保留当前页面，跳转到应用内的某个页面 003-3-1

课程简介：

1. 如何利用uni.navigateTo()在保留当前页面的情况下，跳转到应用内的某个页面。例如，你可以使用uni.navigateTo({url: './home/index'})来实现这一功能。
2. 了解如何使用uni.navigateBack()返回到原页面。这个方法允许你在跳转新页面后，随时返回到之前的页面。
3. 明白页面跳转路径有层级限制，不能无限制地跳转新页面，只能跳转至tabBar页面的情况。因此，如果需要跳转到tabBar页面，你需要使用switchTab方法。
4. 获取如何在点击事件中进行页面跳转。例如，你可以在点击事件的处理函数中使用goAbout () { uni.navigateTo ({ url: '/pages/about/about',}) }来实现点击按钮后跳转到关于页面的操作。
5. 除了navigateTo方法外，你还可以了解到其他一些导航相关的uni-app API，如redirectTo、reLaunch、switchTab等。这些API提供了更多丰富和灵活的页面跳转功能。

uni.redirectTo() 关闭当前页面，跳转到应用内的某个页面 003-3-2

课程简介：

1. 理解uni.redirectTo()的核心功能。这个方法主要用于关闭当前页面，并跳转到应用内的某个页面。
2. 熟悉uni.redirectTo()的基本用法和参数设置。例如，你可以使用 uni.redirectTo({url: 'test?id=1'})来将当前页面关闭，并跳转到’test?id=1’这个页面。
3. 了解如何使用url参数指定目标页面的路径。在触发uni.redirectTo()的页面中，需要先导入uni-app的API。然后在需要的事件或方法中使用 uni.redirectTo进行页面重定向。
4. 学习如何处理跨平台问题。由于各端受自身限制，可能某些API无法使用，具体可参照每个API的兼容性说明。如果需要打开web url，在App平台可以使用 plus.runtime.openURL 或web-view组件；H5平台使用 window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）。
5. 最后，了解除redirectTo外，还可以通过uni.navigateTo()保留当前页面，跳转到应用内的某个页面，以及使用uni.reLaunch()关闭所有页面，打开到应用内的某个页面。

uni.reLaunch() 关闭所有页面，打开到应用内的某个页面 003-3-3

课程简介：

1. 理解uni.reLaunch()的核心功能。这个方法主要用于关闭所有页面，并打开到应用内的某个页面。
2. 熟悉uni.reLaunch()的基本用法和参数设置。例如，你可以使用 uni.reLaunch({url: 'test?id=1'})来关闭所有页面，并跳转到’test?id=1’这个页面。
3. 了解如何使用url参数指定目标页面的路径。在触发uni.reLaunch()的页面中，需要先导入uni-app的API。然后在需要的事件或方法中使用 uni.reLaunch进行页面重定向。
4. 学习如何处理跨平台问题。由于各端受自身限制，可能某些API无法使用，具体可参照每个API的兼容性说明。如果需要打开web url，在App平台可以使用 plus.runtime.openURL 或web-view组件；H5平台使用 window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）。
5. 最后，了解除reLaunch外，还可以通过uni.redirectTo()保留当前页面，跳转到应用内的某个页面，以及使用uni.navigateTo()关闭当前页面，跳转到应用内的某个页面。

uni.switchTab() 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 003-3-4

课程简介：

1. 理解uni.switchTab()的核心功能。这个方法主要用于跳转到tabBar页面，并关闭其他所有非tabBar页面。
2. 熟悉uni.switchTab()的基本用法和参数设置。例如，你可以使用 uni.switchTab({url: 'test?id=1'})来关闭所有页面，并跳转到’test?id=1’这个页面。
3. 了解如何使用url参数指定目标页面的路径。在触发uni.switchTab()的页面中，需要先导入uni-app的API。然后在需要的事件或方法中使用 uni.switchTab进行页面重定向。
4. 学习如何处理跨平台问题。由于各端受自身限制，可能某些API无法使用，具体可参照每个API的兼容性说明。
5. 最后，了解除switchTab外，还可以通过uni.redirectTo()保留当前页面，跳转到应用内的某个页面，以及使用uni.navigateTo()关闭当前页面，跳转到应用内的某个页面。

uni.navigateBack() 关闭当前页面，返回上一页面或多级页面 003-3-5

课程简介：

1. 理解uni.navigateBack()的核心功能。这个方法主要用于关闭当前页面，返回上一页面或多级页面。
2. 熟悉uni.navigateBack()的基本用法和参数设置。例如，你可以在需要传值的页面写 wx.navigateBack({delta: 1}); 来返回上一级页面。
3. 学习如何在页面间传递数据。你可以通过 uni.$emit 触发事件并传递参数来实现这一功能。
4. 了解如何获取从上一个页面传递过来的值。你可以在 onShow 生命周期钩子函数中获取传递过来的值。

uni.preloadPage() 预加载页面 003-3-6

课程简介：

1. 理解uni.preloadPage()的核心功能。这个方法主要用于预加载页面。
2. 熟悉uni.preloadPage()的基本用法和参数设置。例如，你可以使用 uni.preloadPage({url: 'test?id=1'})来预加载’test?id=1’这个页面。

窗口动画 003-3-7

课程简介：

1. 理解Uniapp中如何使用窗口动画。在Uniapp中，你可以通过配置animation属性来为页面添加窗口动画效果。
2. 熟悉Uniapp中的动画类型和配置项。例如，你可以使用transitionName来指定过渡动画的名称，或使用animationDuration来设置动画的持续时间。
3. 学习如何利用Uniapp提供的API来实现更复杂的动画效果。例如，你可以使用uni.createAnimation()方法来创建自定义动画实例，并通过调用实例的方法来控制动画的播放、暂停等操作。
4. 了解除窗口动画外，还可以通过学习Uniapp的过渡动画和动画组来实现更丰富的页面动效。

页面通讯传值监听 003-3-8

课程简介：

1. 理解Uniapp中如何使用页面通讯传值监听。在Uniapp中，你可以使用uni.$emit方法触发全局的自定义事件，并使用uni.$on方法监听该事件。
2. 熟悉如何在需要刷新的页面中使用uni.$emit方法发送一个自定义事件，并在目标页面中使用uni.$on监听该事件，在监听回调函数中执行刷新操作。
3. 学习如何在nvue页面使用uni.postMessage(data)发送数据，以及在app.vue页面里使用 onUniNViewMessage进行监听，接受数据。
4. 了解如何利用eventChannel实现AB页面之间的通信。当webview（B）页面打开成功后，向原页（A）发送成功的事件，A页面监听到事件后，再向B页面发送数据。
5. 注意事件的生命周期管理。使用时，注意及时销毁事件监听，比如，页面 onLoad里边 uni.on注册监听，onUnload里边 uni.off销毁监听。

位置 003-4

获取位置 003-4-1

课程简介：

1. 理解如何在Uniapp中根据经纬度获取当前位置。你可以使用uniapp官方提供的API，即uni.getLocation方法。该方法可以获取当前设备的地理位置信息，包括经度和纬度。
2. 学习如何在Uniapp中获取当前位置的周边位置信息。你可以使用uni.getLocation()获取当前位置的经纬度，然后调用第三方地图API（如高德地图API、腾讯地图API等）查询周边位置信息。
3. 了解除使用内置API外，还可以通过安装第三方插件来实现地图定位功能。在UniApp中，常用的地图插件包括uni-location和uni-app-plus。
4. 注意配置地图服务商的秘钥。对于H5端，使用地图和定位相关，需要在manifest.json内配置腾讯或谷歌等三方地图服务商申请的秘钥（key）。

查看位置 003-4-2

课程简介：

1. 理解如何在Uniapp中打开地图选择位置。你可以通过uniapp的内置API实现打开地图并选择位置的功能。
2. 学习如何在Uniapp中使用地图插件进行地图定位。你可以安装一个地图插件来实现地图定位功能，常用的地图插件包括uni-location和uni-app-plus。
3. 了解如何配置地图服务商的秘钥。对于H5端，使用地图和定位相关，需要在manifest.json内配置腾讯或谷歌等三方地图服务商申请的秘钥（key）。

位置更新 003-4-3

课程简介：

1. 理解Uniapp中如何获取当前设备的地理位置信息，包括经度和纬度。这部分主要包括调用uni.getLocation()方法等操作。
2. 学习如何在获取当前位置后，使用第三方地图API（如高德地图API、腾讯地图API等）查询周边位置信息。
3. 了解除使用内置API外，还可以通过安装第三方插件来实现地图定位功能。在UniApp中，常用的地图插件包括uni-location和uni-app-plus。
4. 注意配置地图服务商的秘钥。对于H5端，使用地图和定位相关，需要在manifest.json内配置腾讯或谷歌等三方地图服务商申请的秘钥（key）。

地图组件控制 003-4-4

课程简介：

1. 了解如何使用Uniapp提供的地图组件来展示地图，可以选择腾讯地图、高德地图、百度地图等。
2. 学习地图组件的属性，例如中心经度、中心纬度、缩放级别以及标记点等。
3. 掌握如何在地图上添加标记点和绘制路线。
4. 了解除使用内置组件外，还可以通过安装第三方插件来实现更丰富的地图功能。在UniApp中，常用的地图插件包括uni-location和uni-app-plus。
5. 注意配置地图服务商的秘钥。对于H5端，使用地图和定位相关，需要在manifest.json内配置腾讯或谷歌等三方地图服务商申请的秘钥（key）。

媒体 003-5

图片 003-5-1

课程简介：

1. 理解如何在Uniapp中加载和使用图片。你可以使用uniapp提供的image组件来加载网络图片或本地图片。
2. 学习如何对图片进行裁剪、缩放等操作。你可以使用uniapp提供的cropper组件来实现这些功能。
3. 了解除使用内置组件外，还可以通过安装第三方插件来实现更多图片处理功能。在UniApp中，常用的图片处理插件包括uni-canvas-poster和uni-simple-image-loader。

文件 003-5-2

课程简介：

1. 理解如何在Uniapp中进行文件的读取、写入和删除等操作。你可以使用uniapp提供的API来实现这些功能。
2. 学习如何对文件进行选择和上传。你可以使用uniapp提供的API来实现这些功能。
3. 了解除使用内置API外，还可以通过安装第三方插件来实现更多文件处理功能。在UniApp中，常用的文件处理插件包括uni-file-picker和uni-easyinput。

录音管理 003-5-3

课程简介：

1. 了解如何使用Uniapp提供的getRecorderManager()方法来创建一个录音管理器实例。
2. 学习如何控制录音的开始、暂停和停止等操作。你可以使用录音管理器实例提供的方法来实现这些功能。
3. 了解除使用内置API外，还可以通过安装第三方插件来实现更多录音处理功能。在UniApp中，常用的录音处理插件包括uni-recorder-miniprogram。

背景音频播放管理 003-5-4

课程简介：

1. 获取全局唯一的背景音频管理器backgroundAudioManager。
2. 学习如何控制背景音频的播放、暂停和停止等操作。你可以使用背景音频管理器提供的方法来实现这些功能。
3. 了解除使用内置API外，还可以通过安装第三方插件来实现更多音频处理功能。在UniApp中，常用的音频处理插件包括uni-audio。

音频组件控制 003-5-5

课程简介：

1. 创建并返回内部audio上下文innerAudioContext对象。平台差异说明innerAudioContext对象的属性列表和innerAudioContext对象的方法列表。
2. 如何控制音频的播放、暂停和停止等操作。你可以使用innerAudioContext提供的方法来实现这些功能。
3. 了解除使用内置API外，还可以通过安装第三方插件来实现更多音频处理功能。在UniApp中，常用的音频处理插件包括uni-audio。

视频 003-5-6

课程简介：

1. UniApp提供了多种视频播放组件，包括视频播放器（video）、多媒体组件（media）、WebView（内置Video标签）等。video组件是基于HTML5 video标签的UniApp视频播放组件，支持常见的视频格式（如MP4、M4V、MOV等）。
2. 掌握视频播放组件常用的几个属性：autoplay（自动播放），loop（循环播放），muted（静音播放），controls（使用默认配置好的播放控件（播放/暂停按钮、播放进度、播放时长、进度的滑动手势、屏幕放大等））。
3. 了解如何在写视频上传时解决小程序端有多视频上传，但是Android和ios没有的问题。

视频组件控制 003-5-7

课程简介：

1. 了解如何使用UniApp提供的媒体组件来实现动画、音频、摄像头、图片、视频和直播功能。
2. 学习如何对视频进行选择和上传。你可以使用uniapp提供的API来实现这些功能。
3. 了解除使用内置API外，还可以通过安装第三方插件来实现更多视频处理功能。在UniApp中，常用的视频处理插件包括uni-video-player。

相机组件控制 003-5-8

课程简介：

1. 了解如何使用UniApp提供的camera组件来调用设备的摄像头，并选择前置或后置摄像头。
2. 学习如何对摄像头进行配置，例如闪光灯的开启和关闭。
3. 了解除使用内置API外，还可以通过安装第三方插件来实现更多相机处理功能。在UniApp中，常用的相机处理插件包括uni-camera-scanner。
4. 注意平台差异，在App和H5端，可以使用API方式来调用全屏摄像头。

直播组件控制 003-5-9

课程简介：

1. 了解如何使用UniApp提供的直播组件来实现视频直播功能。你可以使用live-pusher组件来实现实时视频推送功能。
2. 学习如何获取推流地址、推流码和拉流地址等直播相关参数。你可以使用uniapp提供的API来实现这些功能。
3. 了解除使用内置API外，还可以通过安装第三方插件来实现更多直播处理功能。在UniApp中，常用的直播处理插件包括uni-live-pusher。

富文本 003-5-10

课程简介：

1. 了解如何在UniApp中使用富文本组件来展示丰富的文本格式。你可以使用rich-text组件来实现这个功能。
2. 学习如何对富文本进行格式化操作，例如设置字体样式、颜色、大小等。你可以使用rich-text组件提供的方法来实现这些功能。
3. 了解除使用内置API外，还可以通过安装第三方插件来实现更多富文本处理功能。在UniApp中，常用的富文本处理插件包括uview-ui。

音视频合成 003-5-11

课程简介：

1. 了解如何在UniApp中进行音视频合成操作。你可以使用uniapp提供的API来实现这个功能。例如，通过uni.createInnerAudioContext()方法来创建音频上下文对象，然后使用该对象的src属性来指定要播放的音频文件路径。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多音视频处理功能。在UniApp中，常用的音视频处理插件包括ZEGO即构实时音视频和阿里云的音视频终端SDK。

设备 003-6

系统 003-6-1

获取设备基础信息 003-6-1-1

课程简介：

1. 了解如何使用UniApp提供的API来获取设备的系统信息。你可以使用uni.getSystemInfo()方法来异步获取系统信息，或者使用uni.getSystemInfoSync()方法来同步获取系统信息。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多设备信息获取功能。在UniApp中，常用的设备信息获取插件包括uni-device-info。

获取窗口信息 003-6-1-2

课程简介：

1. 了解如何使用UniApp提供的API来获取窗口的大小、位置等信息。你可以使用uni.getWindowInfo()方法来获取窗口信息。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多窗口信息获取功能。在UniApp中，常用的窗口信息获取插件包括uni-ui。

获取微信 APP 基础信息 003-6-1-3

课程简介：

1. 了解如何在UniApp中通过微信小程序官方API接口wx.getSystemInfo()来获取系统信息，例如操作系统版本、设备型号、屏幕分辨率等。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多微信 APP 基础信息获取功能。在UniApp中，常用的微信 APP 基础信息获取插件包括uni-wxapp。
3. 学习如何获取微信用户信息，例如头像、昵称等。你可以使用微信小程序官方API接口wx.getUserInfo()来获取用户信息。
4. 了解如何通过服务供应商获取用户登录凭证code和用户基础信息。

获取 APP 授权设置 003-6-1-4

课程简介：

1. 了解如何使用UniApp提供的API来获取用户的授权设置信息。你可以使用uni.authorize()方法来请求用户的授权，然后使用回调函数来处理授权结果。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多授权设置获取功能。在UniApp中，常用的授权设置获取插件包括uni-app-auth。

获取设备设置 003-6-1-5

课程简介：

1. 了解如何使用UniApp提供的API来获取设备的系统设置信息。你可以使用uni.getSetting()方法来异步获取系统设置，或者使用uni.getSettingSync()方法来同步获取系统设置。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多设备设置获取功能。在UniApp中，常用的设备设置获取插件包括uni-device-info。

跳转系统授权管理页 003-6-1-6

课程简介：

1. 了解如何使用UniApp提供的API来引导用户跳转至小程序的设置页面进行授权操作。例如，如果用户未授权麦克风访问权限，系统会弹出麦克风授权弹窗，向用户说明权限的用途，并询问用户是否同意授权。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多跳转系统授权管理页功能。在UniApp中，常用的跳转系统授权管理页插件包括uni-app-auth。
3. 学习如何实现从微信跳转到uni-app应用，需要在uni-app应用中进行相关的配置和代码编写。例如，在微信公众平台中配置公众号的网页授权域名和JS接口安全域名，确保能够访问到uni-app应用的页面。
4. 学习如何让用户自己去设置中，用户体验不会很差，比如打开蓝牙、打开通知栏通知等功能，我们可以通过代码自动的跳转到需要设置的页面。

获取网络状态 003-6-2

课程简介：

1. 了解如何使用UniApp提供的API来获取设备的网络状态信息。你可以使用uni.getNetworkType()方法来异步获取网络类型，或者使用uni.getConnectedWifiSSID()方法来同步获取当前连接的WiFi名称。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多网络状态获取功能。在UniApp中，常用的网络状态获取插件包括uni-network-info。

监听罗盘数据 003-6-3

课程简介：

1. 了解如何使用UniApp提供的API来监听设备的罗盘数据。你可以使用plus.android.compass.onchange事件来监听罗盘数据的变化。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多罗盘数据获取功能。在UniApp中，常用的罗盘数据获取插件包括uni-sensors。

监听陀螺仪数据变化事件 003-6-4

课程简介：

1. 了解如何使用UniApp提供的API来开始和停止监听陀螺仪数据。你可以使用uni.startGyroscope()方法来开始监听陀螺仪数据，然后使用回调函数onchange来处理陀螺仪数据的变化。同时，你也可以通过调用uni.stopGyroscope()方法来停止监听。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多陀螺仪数据获取功能。在UniApp中，常用的陀螺仪数据获取插件包括uni-sensors。

拨打电话 003-6-5

课程简介：

1. 了解如何使用UniApp提供的API来拨打电话。你可以使用uni.makePhoneCall()方法来拨打电话。

调起客户端扫码界面 003-6-6

课程简介：

1. 了解如何使用UniApp提供的API来调起客户端的扫码界面。你可以使用uni.scanCode()方法来调起客户端的扫码界面。

设置系统剪贴板的内容 003-6-7

课程简介：

1. 了解如何使用UniApp提供的API来设置系统剪贴板的内容。你可以使用uni.setClipboardData()方法来设置系统剪贴板的内容。例如，你可以设置data参数为需要复制的文本或链接。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多剪贴板功能。在UniApp中，常用的剪贴板插件包括uni-clipboard。
3. 学习如何监听系统剪贴板的变化。你可以使用uni.addClipboardWatcher()方法来监听系统剪贴板的变化，然后使用回调函数onChange来处理剪贴板内容的变化。

设置屏幕亮度 003-6-8

课程简介：

1. 了解如何使用UniApp提供的API来设置设备的屏幕亮度。你可以使用plus.screen.setBrightness()方法来设置屏幕亮度。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多屏幕亮度获取和设置功能。在UniApp中，常用的屏幕亮度获取和设置插件包括uni-screen。

监听用户主动截屏事件 003-6-9

课程简介：

1. 了解如何使用UniApp提供的API来监听用户的截屏事件。你可以使用plus.screen.on(‘capture’)事件来监听用户的截屏事件。同时，你也可以通过调用plus.screen.off(‘capture’)方法来停止监听该事件。

使手机发生振动 003-6-10

课程简介：

1. 了解如何使用UniApp提供的API来使手机发生振动。你可以使用uni.vibrate()方法来使手机发生振动。例如，你可以设置震动时间为1000毫秒。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多振动功能。在UniApp中，常用的振动插件包括uni-haptics。
3. 需要注意的是，iOS设备上需要手机设置“打开响铃时震动”或“静音时震动”，否则无法震动。

新增手机系统通讯录 003-6-11

课程简介：

1. 了解如何使用UniApp提供的API来新增手机系统通讯录。你可以使用plus.contacts.add()方法来新增通讯录。例如，你可以设置displayName参数为联系人的显示名称，setValue()方法来设置联系人的各个字段的值。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多通讯录功能。在UniApp中，常用的通讯录插件包括uni-contacts。

蓝牙 003-6-12

课程简介：

1. 了解如何使用UniApp提供的API来获取设备的蓝牙适配器信息。你可以使用plus.bluetooth.getAdapter()方法来获取蓝牙适配器信息。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多蓝牙功能。在UniApp中，常用的蓝牙插件包括uni-bluetooth-serial。

Wi-Fi 模块 003-6-13

课程简介：

1. 了解如何使用UniApp提供的API来控制设备的Wi-Fi功能。你可以使用uni.startWifi()和uni.stopWifi()方法来开始和停止Wi-Fi连接。同时，你也可以使用uni.getConnectedWifi()方法来获取当前已连接的Wi-Fi信息。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多Wi-Fi功能。在UniApp中，常用的Wi-Fi插件包括uni-WiFi。

获取设备电量 003-6-14

课程简介：

1. 了解如何使用UniApp提供的API来获取设备的电量信息。你可以使用plus.battery.getInfo()方法来获取电量信息。例如，你可以设置success回调函数来处理获取到的电量信息。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多电量功能。在UniApp中，常用的电量插件包括getBatteryInfo。

生物认证 003-6-15

课程简介：

1. 了解如何使用UniApp提供的API来检查设备支持的生物认证方式。你可以使用uni.checkIsSupportSoterAuthentication()方法来检查设备是否支持生物认证。例如，如果设备支持生物认证，该方法会返回一个包含支持的认证方式的对象。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多生物认证功能。在UniApp中，常用的生物认证插件包括uni-soter。

键盘003-7

隐藏软键盘 003-7-1

课程简介：

1. 了解如何使用UniApp提供的API来隐藏软键盘。你可以使用uni.hideKeyboard()方法来隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多隐藏软键盘功能。在UniApp中，常用的隐藏软键盘插件包括uni-hidekeyboard。

监听键盘高度变化 003-7-2

课程简介：

1. 了解如何使用UniApp提供的API来监听键盘的高度变化。你可以使用uni.onKeyboardHeightChange(CALLBACK)方法来监听键盘高度的变化，其中CALLBACK为回调函数。例如，当键盘高度发生变化时，会触发该回调函数。
2. 了解除使用内置API外，还可以通过安装第三方插件来实现更多监听键盘高度变化功能。在UniApp中，常用的监听键盘高度变化的插件包括uni-keyboard-height。

取消监听键盘高度变化事件 003-7-3

课程简介：

1. 了解如何使用UniApp提供的API来取消监听键盘的高度变化事件。你可以使用uni.offKeyboardHeightChange(CALLBACK)方法来取消监听键盘高度变化事件，避免内存消耗。其中CALLBACK为之前用于监听键盘高度变化的回调函数。

获取输入框的光标位置 003-7-4

课程简介：

1. 了解如何使用UniApp提供的API来获取输入框的光标位置。你可以使用uni.getSelectedTextRange(OBJECT)方法来获取光标的位置。需要注意的是，此方法在input、textarea等focus之后才能获取到光标的位置。然而，这个方法可能无法在表单已经激活后再次拖动光标时获取最后的位置。

界面003-8

显示消息提示框 003-8-1

课程简介：

1. 了解如何使用UniApp提供的API来显示消息提示框。你可以使用plus.nativeUI.toast API来实现更多功能。例如，你可以使用uni.hideToast()方法来隐藏消息提示框，使用uni.showLoading(OBJECT)方法来显示loading提示框，需要主动调用uni.hideLoading()才能关闭提示框。

动态设置当前页面的标题 003-8-2

课程简介：

1. 了解如何使用UniApp提供的API来动态设置当前页面的标题。你可以使用uni.setNavigationBarTitle(TITLE)方法来动态设置当前页面的标题，其中TITLE为你想要设置的标题字符串。

动态设置 tabBar 003-8-3

课程简介：

1. 了解如何使用UniApp提供的API来动态设置底部导航栏，即tabBar。在多tab的应用中，我们可以在pages.json中使用tabBar配置项来指定底部导航栏以及tab切换时显示的对应页面。如果需要根据业务需求实时改变底部tabbar样式和功能，可以通过使用自定义组件和条件渲染来实现。
2. 除了基础的配置，还可以创建自定义的tabBar组件，隐藏不需要的tabBar页面对应的导航栏，并根据用户身份或登录状态匹配出需要展示的tabBar页面。

动态设置窗口的背景色 003-8-4

课程简介：

1. 在Uniapp中，你可以通过设置页面的样式来更改背景颜色。打开你想要设置背景颜色的页面的vue文件，然后在template部分添加一个div或者其他容器元素用来包裹页面内容，最后通过修改该元素的样式来改变背景颜色。

将页面滚动到目标位置 003-8-5

课程简介：

1. 可以使用uni.pageScrollTo()方法来将当前页面滚动到指定的目标位置。这个方法接受两个参数，第一个参数为滚动的目标位置的top值，第二个参数为滚动的时间，单位为毫秒。

监听窗口尺寸变化事件 003-8-6

课程简介：

1. 了解如何使用UniApp提供的API来监听窗口尺寸的变化。你可以使用uni.onWindowResize()方法来监听窗口尺寸的变化。这个方法会在窗口尺寸发生变化时触发一个回调函数。

获取对应窗口的样式 003-8-7

课程简介：

1. 了解如何使用UniApp提供的API来获取当前窗口的样式信息。你可以使用uni.getSystemInfo()方法来异步获取系统信息，其中会包含屏幕宽度、高度等信息。

动态加载字体 003-8-8

课程简介：

1. 了解如何使用UniApp提供的API来动态加载字体。你可以使用@font-face规则来定义自定义字体，并通过CSS3的@font-face属性来实现字体的动态加载。

下拉刷新 003-8-9

课程简介：

1. 在UniApp中，可以使用下拉刷新组件来实现下拉刷新加载数据的功能。首先，在你的页面中添加一个 <uni-scroll-view 组件，用于包裹需要下拉刷新的内容。然后，给 uni-scroll-view 添加 @scrolltoupper 事件监听器，当触发下拉刷新时会执行相应的操作。
2. 开启下拉刷新的方式有两种：一是在 pages.json 里，找到当前页面的 pages 节点，并在 style 选项中开启 enablePullDownRefresh；二是通过调用 uni.startPullDownRefresh 方法来开启下拉刷新。
3. 也可以使用第三方组件如 mescroll 来实现下拉刷新和上拉加载的功能。

查询节点信息的对象 003-8-10

课程简介：

1. 在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。NodesRef 对象包含了多个方法，如 nodesRef.fields 可以获取节点的相关信息，第二个参数是回调函数，参数是指定的相关节点信息；nodesRef.boundingClientRect 可以添加节点的布局位置的查询请求，其功能类似于 DOM 的 getBoundingClientRect，返回的是对应的 SelectorQuery。

获取当前设置的语言 003-8-11

课程简介：

1. UniApp提供了API来获取当前设置的语言。你可以使用 uni.getLocale() 方法来异步获取系统语言类型。例如，你可以设置一个回调函数来处理获取到的语言类型。此外，你也可以使用 uni.setLocale(OBJECT) 方法来手动设置应用的语言类型。

文件 003-9

保存文件到本地 003-9-1

课程简介：

1. UniApp提供了LocalStorage和本地文件系统存储两种方式。你可以使用LocalStorage将数据以键值对的形式存储在浏览器或微信小程序的本地缓存中，需要注意的是存储的数据需要转换为字符串形式，可以使用JSON.stringify()函数进行转换。另一种方式是使用uniapp提供的plus.io.requestFileSystem()方法请求本地文件系统对象，创建或打开文件来存储数据。

获取本地已保存的文件列表 003-9-2

课程简介：

1. 对于LocalStorage，你可以使用localStorage.getItem('key')方法来异步获取指定键名的值，从而获取到已保存的文件列表。
2. 若使用plus.io.requestFileSystem()方法保存文件，你需要先请求本地文件系统对象，然后通过该对象的root属性来访问文件目录，进一步获取到文件列表。

获取本地文件的文件信息 003-9-3

课程简介：

1. 对于LocalStorage中存储的文件信息，你可以使用localStorage.getItem('key')方法来异步获取指定键名的值，从而获取到文件的信息。
2. 如果文件是保存在本地文件系统中的，你可以通过plus.io.resolvePath(path,resolve)方法来异步解析出绝对路径，其中path为相对路径，resolve为回调函数，获取到文件的绝对路径后就能获取到文件的信息。

删除本地存储的文件 003-9-4

课程简介：

1. UniApp提供了uni.removeStorage方法来进行本地存储的文件的删除。你可以使用此方法来删除指定键名的数据。例如，你可以使用uni.removeStorageSync('key')来同步删除指定键名的数据。

获取文件信息 003-9-5

课程简介：

1. 对于本地存储的文件信息，你可以使用uni.getStorageSync('key')方法来同步获取指定键名的值，从而获取到文件的信息。

新开页面打开文档，支持格式：doc,xls,ppt,pdf,docx,xlsx,pptx 003-9-6

课程简介：

1. 在UniApp中，你可以使用plus.io.resolvePath(path,resolve)方法来异步解析出绝对路径，其中path为相对路径，resolve为回调函数，获取到文件的绝对路径后就能获取到文件的信息。然后，你可以使用uni.navigateTo或uni.redirectTo方法来打开新的页面并加载文件。需要注意的是，打开新页面的方式取决于你的应用架构和需求。

获取全局唯一的文件管理器 003-9-7

课程简介：

1. 在UniApp中，你可以通过my.getFileSystemManager()方法来获取全局唯一的文件管理器。这个文件管理器可以用来进行应用级别的本地存储和文件操作。

绘画 003-10

创建离屏 canvas 实例 003-10-1

课程简介：

1. 在UniApp中，你可以使用my.createOffscreenCanvas()方法来创建离屏canvas实例。这个方法会返回一个画布节点，你可以通过此节点来进行后续的绘制操作。
2. 此外，你也可以使用wx.createOffscreenCanvas()方法来创建离屏canvas实例。该方法会返回一个画布节点，你可以通过此节点来进行后续的绘制操作。

创建 canvas 绘图上下文 003-10-2

课程简介：

1. 在UniApp中，你可以通过调用canvas的getContext(‘2d’)方法来创建canvas的2D绘图上下文。这个方法会返回一个RenderingContext对象，你可以使用这个对象来进行后续的绘制操作。
2. 对于更复杂的绘制需求，例如使用WebGL，你也可以调用canvas的getContext(‘webgl’)方法来创建canvas的WebGL绘图上下文。

生成指定大小的图片 003-10-3

课程简介：

1. 在UniApp中，你可以使用uni.canvasToTempFilePath()方法来将画布内容导出为图片文件。这个方法会返回一个Promise对象，你可以在其回调函数中获取到图片的临时路径。需要注意的是，你需要先创建一个画布节点，并在此节点上进行绘制操作。
2. 在生成图片时，为了提高性能，你可以使用LRU（最近最少使用）缓存策略来存储生成的图片，避免重复渲染；同时，合理控制图片的分辨率和文件大小，以适应不同网络环境。
3. Uniapp其实自带一个图片压缩的API uniapp.compressImage，但此方法目前存在一些问题，例如在安卓系统中压缩后体积反而变大，而且没办法控制其压缩至具体指定的大小。

将像素数据绘制到画布的方法 003-10-4

课程简介：

1. 你可以使用CanvasRenderingContext2D接口提供的putImageData()方法来将像素数据绘制到画布上。这个方法接受一个ImageData对象和一个坐标参数，可以将指定的像素数据绘制到画布上的指定位置。
2. 除了putImageData()方法外，你也可以通过drawImage()方法来绘制图像。这个方法接受一个Image对象、一个坐标参数和一个宽度和高度参数，可以将指定的图像绘制到画布上的指定位置和尺寸。

描述 canvas 区域隐含的像素数据 003-10-5

课程简介：

1. 你可以使用CanvasRenderingContext2D接口提供的getImageData()方法来获取画布上指定区域的像素数据。这个方法接受一个矩形区域参数，可以返回一个ImageData对象，其中包含了指定区域的所有像素数据。

canvas属性 003-10-6

课程简介：

1. 在UniApp中，Canvas是一个非常重要的绘图工具。你可以通过Canvas API来操作画布，例如绘制矩形、圆形、文字等。同时，你也可以使用CanvasRenderingContext2D接口提供的API来操作像素数据，例如getImageData()和putImageData()方法。
2. 除此之外，你还可以使用uni.canvasToTempFilePath()方法将画布内容导出为图片文件，并使用此图片进行分享。

第三方服务 003-11

登录 003-11-1

课程简介：

1. UniApp提供了一套完整的登录流程。你可以使用uni.login()方法获取用户的登录信息，例如用户名、头像和性别等。然后，你可以使用这些信息来进行用户身份验证或个性化设置。
2. 此外，UniApp还提供了一些与登录相关的API，例如uni.getUserInfo()方法用于获取用户的信息，以及uni.setStorageSync()和uni.getStorageSync()方法用于本地存储用户信息。

分享 003-11-2

课程简介：

1. UniApp提供了丰富的分享功能。你可以使用uni.share()方法来调用社交SDK进行分享，也可以使用plus.share.sendWithSystem()方法来呼起手机操作系统的系统分享菜单。
2. 在进行分享时，你可以自定义分享的内容、形式和平台。例如，你可以使用Canvas API来生成海报并保存为图片，然后使用uni.share功能来实现分享。

支付 003-11-3

课程简介：

1. UniApp提供了一套完整的支付流程。例如发起微信支付、支付宝支付等。在进行支付时，你需要先获取用户的支付信息，然后调用相应的支付接口进行支付。
2. 在支付完成后，你还需要处理支付结果通知。你可以监听支付结果的回调函数，根据返回值来判断支付是否成功，并进行相应的业务处理。

推送 003-11-4

课程简介：

1. UniApp提供了消息推送功能。你可以使用uni.push()方法来发送推送消息，例如透传消息、自定义音频通知等。在进行推送之前，你需要先获取用户的设备信息，然后调用相应的推送接口进行推送。
2. 在接收到推送消息后，你可以监听推送事件的回调函数，根据返回值来判断推送类型和内容，并进行相应的业务处理。

语音识别朗读 003-11-5

课程简介：

1. UniApp并没有直接封装语音识别API，但可以使用第三方SDK来实现语音识别功能。例如，你可以使用App端Speech模块来封装市场上主流的三方语音识别SDK，并提供JS API统一调用语音识别功能。
2. 你可以使用tts-vue库来实现文字转语音的功能。这个库提供了很多语音类型，可以自由切换；同时支持多种语言识别和英文、中文的朗读。

附加 003-12

授权 003-12-1

课程简介：

1. UniApp提供了一套完整的授权流程。例如获取用户信息、相册权限等。在进行授权之前，你需要先判断用户是否已经授权，如果未授权则调用相应的授权接口进行授权。
2. 在接收到授权结果的通知时，你可以监听授权事件的回调函数，根据返回值来判断授权类型和结果，并进行相应的业务处理。如果用户取消了授权，你也可以通过代码逻辑来再次获取授权。

设置界面 003-12-2

课程简介：

1. UniApp提供了一套完整的设置界面。你可以使用uni.setStorageSync()和uni.getStorageSync()方法来存储和读取本地数据，例如用户信息、系统设置等。同时，你也可以使用plus.runtime.openSetting()方法来打开系统设置界面，让用户自行修改相关设置。
2. 在进行设置操作时，你可以自定义设置项和功能。例如，你可以使用Canvas API来生成海报并保存为图片，然后使用uni.share功能来实现分享。

获取用户收货地址 003-12-3

课程简介：

1. 你可以调用 uni.chooseAddress() 方法来获取用户收货地址。这个方法会调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。需要注意的是，为了使用这个功能，你需要先获取用户的收货地址授权。
2. 在使用 uni.chooseAddress() 方法时，它的返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象。因此，你需要通过这样的方式 if (err === null && succ.errMsg === ‘chooseAddress:ok’) { // 为 data 里面的收货地址对象赋值 this.address = succ } 来获取成功选择的收货地址。

小程序跳转 003-12-4

课程简介：

1. 在UniApp中，你可以使用uni.navigateTo()和uni.redirectTo()方法来实现微信小程序的页面跳转。uni.navigateTo()方法用于实现页面跳转，其参数是一个对象，包含要跳转的页面路径；而uni.redirectTo()方法则可以实现页面跳转并关闭当前页面，其参数同样是一个对象，包含要跳转的页面路径。
2. 进行页面跳转时，你需要确保跳转页面的路径写全，包括页面所在的文件夹路径和文件名。

获取当前帐号信息 003-12-5

课程简介：

1. 获取当前帐号信息主要通过微信的API来实现。你可以先调用uni.login()方法来获取code，然后再调用uni.request()方法发送请求到微信服务器，从而获取用户的OpenID、SessionKey和UnionId等信息。
2. 如果需要返回小程序的Appid或者插件的信息，你可以通过相应的API来获取。例如，你可以返回小程序的Appid，如果使用了微信小程序的云端插件，还可以返回当前插件的Appid和版本号。

小程序更新 003-12-6

课程简介：

1. 要将Uniapp应用程序转换成原生的小程序，首先需要创建一个新的小程序项目，并将Uniapp代码导入到项目中。然后需要修改项目配置，处理跨平台的组件和API。这是充分发挥小程序特性和性能优势的关键步骤。

实战 4

商城开发 004-1

课程简介：

1. 商城开发的相关知识：比如商品列表、购物车、订单等模块的开发，这将直接涉及到商城的业务流程。
2. 实战项目的练习：参考一些实战项目合集，进一步提升开发能力和经验积累。
3. 了解VUE+UNI-APP+JS+AJAX等前端必学框架APP开发，拓宽技术视野。

个人博客 004-2

课程简介：

1. 博客开发的相关知识：比如文章列表、文章详情、评论等模块的开发，这将直接涉及到博客的业务流程。
2. 实战项目的练习：参考一些实战项目合集，进一步提升开发能力和经验积累。

原文地址：https://blog.csdn.net/weixin_54226053/article/details/134755277