4.1.9. 普通标题

标题内置了多种常用背景颜色，支持快速切换标题单色背景颜色及渐

变背景颜色。是否显示更多，更换标题图标。

4.1.10. 底部按钮

底部按钮支持自定义图标、图标显示徽标、图标颜色、按钮突出显示

等属性。

4.1.11. 进度条

进度条占比、高度、内置颜色库或自定义背景颜色、静态条纹、动态

条 纹

4.1.12. 其他通用组件

视频组件、音频组件、时间轴、步骤条、网页容器。

4.2.容器组件

容器组件支持通过高度和宽度来定义容器大小，接受其他组件的嵌入。

系统内置了常用的几款容器组件。

4.2.1. FLEX 组件

Flex 布局可以简便、完整、响应式地实现各种页面布局，所以本软件

研发出来 FLEX 组件。Flex 组件是本软件布局的核心，只有掌握好 flex

组件布局，你才能打造出优秀的个性化页面。

 排列方向 flex-direction

默认水平、水平逆序、垂直、垂直逆序

flex-direction: row | row-reverse | column | column-reverse;

 对齐方式 justify-content

元素和容器的左端对齐、右端对齐、居中、元素之间保持相等的距离、

元素周围保持相等的距离

justify-content: flex-start | flex-end | center | space-between |

space-around;

 纵轴(交叉轴)对齐 align-items

元素与容器的顶部（起点）对齐、元素与容器的底部(终点)对齐、元

素纵向居中、元素在容器的基线位置显示、元素被拉伸以填满整个容

器

align-items: flex-start | flex-end | center | baseline | stretch;

 换行方式 flex-wrap

默认不换行|自动换成多行|自动换成逆序多行

flex-wrap: nowrap | wrap | wrap-reverse;

FLEX 组件简易用法

1. 拖动 FLEX 组件进设计器

2. 拖动文本内容进 FLEX 组件

FLEX 组件默认拖出来为垂直布局。拖动两个文件组件进 FLEX 组件容

器里，修改文本组件内容分别为内容 1、内容 2。

3、修改排列方向为水平

修改属性为水平后，发现内容 1、内容 2 并没有水平显示。如果要强

制水平需设置换行方式为不换行。

4、设置内容文本背景、字体大小

设置内容文本背景颜色、文本大小，方便我们来理解 FLEX 占比。

5、修改内容栅格大小

选择内容 2 组件，改变栅格大小，旁边内容 1 的占比会跟着变化。

6、对齐方式设置

对齐方式为了更好理解效果，我们把文本内容组件都栅格大小为 0。

都栅格为 0 后，两个内容并排挤一起，此时可以可以改对齐方式来查

看不同的效果。

比如下方的效果，就是大量使用了 FLEX 组件、图片组件、文本组件

组合效果。

FLEX 组件是重个软件核心，FLEX 布局是必须要掌握的一个关键组件。

后面将在案例里，通过案例来教大家使用 FLEX 组件做到不同的效果，

大家可以直接使用组件模板或页面模板来学习 FLEX 组件。

点击模板后直接会加到设计区，可以轻松修改模板改为自己所有。

4.2.2. 自由面板组件

4.2.3. 组件轮播

组件轮播跟图片轮播相似，只是为了更灵活轮播其他组件，将组件拖

到轮播组件里，每个轮播里可以分别设置不同的组件。

多宫格轮播组件

1. 拖动轮播组件进设计器

2. 拖动宫格组件进轮播容器

拖动宫格组件进轮播组件里，如果发现轮播组件高度不适合。可以通

过图层面板快速定位回轮播组件，调整组件到一个适合的高度。

3. 下个轮播容器设计

点击轮播容器指示点切换轮播，切换后，同样可以拖动组件进容器。

4. 图层里拖动组件进轮播容器

可以先把组件拖到任意设计器内，然后通过图层拖动至具体轮播。

4.2.4. 选项卡

选项卡组件，用于在不同的内容区域之间进行切换。

标题内置样式、标题背景颜色、默认字体颜色、选中字体颜色、平分

标题宽度、选项卡标题背景、整体导航背景、选中标题放大、是否选

中边框、是否内容、导航滚动滚动等基础特性。不同属性组合在一起，

出现不同的效果。

关键属性

选项卡标题支持上方、下方、左边、右边。

选项卡标题对齐方式支持左端对齐、右端对齐、居中对齐、元素之间

保持相等的距离、元素周围保持相等的距离。

 内容区用法

选项卡组件跟组件轮播组件相似，每个选项容器里可以拖动组件进来

设计。

点击标题会将入下个选项卡内容设计

4.2.5. 折叠面板

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩

其内容。

 手风琴效果

 自定义标题背景颜色

4.2.6. 弹窗组件

易用、高度可定制化的弹窗组件，支持弹窗组件里自定义内容。支持

不显示标题、底部菜单。弹窗内容里跟 FLEX 组件用法相似，可以往

弹窗内容区拖进组件。

 默认显示

弹窗组件默认不显示，如果默认要显示，需要把默认显示开关开启。

 窗口类型

支持普通窗口、底部窗口、左边抽屉、右边抽屉

 弹窗效果

弹窗常用活动广告图、结果提示等。

 抽屉效果

常用于菜单选择。

 底部窗口

常用分享、快速选择等。

4.3.表单组件

4.3.1. 单行文本

用户可以在文本框内输入或编辑文字。

输入边框、边框圆角、底部边框、标题颜色、背景颜色、标题输入栏

换行等。

 字段标识

字段标识是输入字段重要的字段，相当输入框的 name，在 vue 里会

用 v-model=’name’，支持双向绑定。

 后缀类型

默认无后缀，支持标签、图标、图片、验证码。后缀类型支持自定义

点击事件。

 验证方式

输入字段默认无验证方式，支持非空、正则、长度范围等。

验证只有把组件拖到表单组件里才起效。

4.3.2. 多行文本

用户可以在文本框内输入或编辑文字。

4.3.3. 单选框

在一组备选项中进行单选。

4.3.4. 复选框

在一组备选项中进行多选。

4.3.5. 下拉菜单

提供多个选项集合供用户选择，支持单列选择和多列级联，通常与弹

出层组件配合使用。

4.3.6. 多层选择

提供多个选项集合供用户选择，支持单列选择和多列级联，通常与弹

出层组件配合使用。

4.3.7. 级联选择

级联选择框，用于多层级数据的选择，典型场景为省市区选择。

4.3.8. 开关

用于在打开和关闭状态之间进行切换。

4.3.9. 日期时间

日历组件用于选择日期或日期区间。

4.3.10. 图片上传

用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图

和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口

逻辑，该步骤需要自行实现。

4.3.11. 评分控件

用于对事物进行评级操作。

4.3.12. 滑块控件

滑动输入条，用于在给定的范围内选择一个值。

4.3.13. 步进器

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、

调整数字。

4.3.14. 按钮

按钮用于触发一个操作，如提交表单。

4.4.图表组件

uCharts 是一款基于 canvas API 开发的适用于所有前端应用的图表库，

开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app /

taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/

钉钉/淘宝/京东/360）、快应用等更多支持 canvas API 的平台。包括：

柱状图、山峰图、条状图、折线图、区域图、散点图、气泡图、混合

图、饼状图、圆环图、玫瑰图、雷达图、进度条、仪表盘、漏斗图、

K 线图、词云图、地图

第五章 UniApp 进阶

5.1.配置项

5.2.生命周期

5.3.页面路由

5.4.JS 语法

5.5.CSS 语法

5.6.vue 语法

第六章 高级进阶

6.1.UNIAPP

6.2.API 请求

6.3.事件交互

6.4.属性绑定

6.5.事件绑定

第七章 页面案例

7.1.用户登录页

7.2.会员中心首页

7.3.充值中心首页

7.4.办公系统首页

7.5.基金理财首页

第八章 项目演练-商城小程序 APP

8.1. 首页框架搭建

8.2. 商品列表及详情

8.3. 会员登录

8.4. 购物车

8.5. 用户订单

8.6. 个人中心

8.7. 发布上线