uni-app移动应用开发课件 2_基础内容.pptxVIP

Uni

App

知识目标

1.掌握uni-app的基本开发流程

2.掌握常用的基本组件

3.掌握flex布局

能力目标

1.能够熟练使用基础组件搭建页面

2.能够熟悉使用flex布局页面

3.能够开发多tab的应用

素质目标

1.具有良好的软件编码规范素养

2.培养独立思考、分析问题、解决问题的能力

3.逐渐具备持之以恒的精神

状态栏

导航条

标题

窗口背景色

属性

类型

默认值

描述

navigationBarBackgroundColor

HexColor

#F7F7F7

导航栏背景颜色

navigationBarTextStyle

String

white

导航栏标题颜色及状态栏颜色，仅支持black/white

navigationBarTitleText

String

导航栏标题文字内容

backgroundColor

HexColor

#ffffff

下拉显示出来的窗口背景色

backgroundTextStyle

String

dark

下拉loading的样式，仅支持dark/light

enablePullDownRefresh

Boolean

false

是否开启下拉刷新

navigationStyle

String

default

值为default/custom，custom即取消默认原生导航栏。

属性

类型

描述

属性

path

String

配置页面路径

path

style

Object

配置页面窗口表现，参考表2-1中globalStyle

style

属性

类型

默认值

描述

color

HexColor

HexColor

Tab上的文字默认颜色，必填

selectedColor

HexColor

Tab上的文字选中时的颜色，必填

backgroundColor

HexColor

Tab上的背景颜色

borderStyle

String

black

tabBar上边框的颜色，可选值black/white

list

Array

Tab的列表，最少2个、最多5个。

在pages.json中提供tabBar配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。

属性

类型

描述

pagePath

String

页面路径，必须在pages中先定义，必填

text

String

Tab上的按钮文字，在App和H5平台非必填

iconPath

String

图片路径，icon大小限制为40kb，建议尺寸为81px*81px，当position为top时，此参数无效，不支持网络图片，不支持字体图标

selectedIconPath

String

选中时的图片路径，图片要求与iconPath一致。

list接受一个数组，数组中每个项都是一个对象。

属性

类型

是否必填

描述

root

String

是

子包的根目录

pages

Array

是

子包由哪些页面组成，参数同pages

属性

类型

默认值

说明

hover-class

String

none

指定按下去的样式类。当hover-class=none时，没有点击态效果

hover-stop-propagation

Boolean

false

指定是否阻止本节点的祖先节点出现点击态

hover-start-time

Number

50

按住后多久出现点击态，单位毫秒

hover-stay-time

Number

400

手指松开后点击态保留时间，单位毫秒

view是容器组件，类似于HTML中的div标签，用于包裹各种元素内容，是页面布局最常用的标签。

属性

类型

默认值

说明

selectable

Boolean

false

文本是否可选（微信小程序user-select）

space

Boolean

显示连续空格

decode

Boolean

50

是否解码

值

说明

ensp

中文字符空格一半大小

emsp

中文字符空格大小

ebsp

根据字体设置的空格大小

text组件用于包裹文本内容，类似于Html中的span标签。

属性

类型

默认值

说明

url

String

应用内的跳转链接，值为相对或绝对路径

open-type

String

navigate

跳转方式

Hover-class

Boolean

Navigate-hover

指定点击时的样式类，为none时，没有点击效果

属性

说明

navigate

保留当前页面，跳转到应用内的某个页面

redirect

关闭当前页面，跳转到应用内的某个页面。

switchTab

跳转到tabBar页面，并关闭其他所有非tabBar页面。

reLaunch

关闭所有页面，打开到应用