Uni-App之Vue组件（三）

Uni-App的相关生命周期函数

---

onLaunch

     当uni-app初始化完成时触发（全局只触发一次）

onShow

     当uni-app启动，或从后台进入前台显示

onHide

     当uni-app从前台进入后台

onError

     当uni-app报错时触发

onUniNViewMessage

      对nvue页面发送的数据进行监听

单位换算

---

uni-app支持的通用css单位包括px,rpx

px即屏幕像素

rpx即响应式px，一种根据屏幕宽度自适应的动态单位，以750宽的屏幕为准，750rpx恰好为屏幕宽度，rpx实际显示效果会等比放大

vue页面支持普通H5单位，但在nvue里不支持；

rem默认字体大小为 屏幕宽度/20（微信小程序，头条小程序，App，H5）

vh：视窗高度，1vh等于视窗高度的1%

vw：视窗宽度，1vw等于视窗宽度的1%

nvue页面还不支持百分比单位

App端，在pages.json里的titleNView或页面里写的plus api中涉及的单位，只支持px，此时不支持rpx。

nvue中，uni-app模式可以使用px,rpx表现与vue中一致，weex模式目前遵循weex的单位；

px：以750宽的屏幕为基准动态计算的长度单位，与vue页面中的rpx理念相同。

wx：与设备屏幕宽度无关的长度单位，与vue页面中的px理念相同。

uni-app之页面跳转

---

点击切换实现路由跳转

实现方法： 一、在index.vue的页面入口写一个点击方法，利用uni.navigateTo({})写上将要跳转的页面路径。

index.vue

                二、 components文件里面创建headerNav.vue组件

headerNav.vue

                三、在pages.json文件里写上组件路径进去

pages.json

这里可以选择修改对应的样式信息

pages.json

滚动视图

---

scroll-view：可滚动视图

scroll-view属性说明：

scroll-view属性说明

横向滚动通过添加scroll-x="true"，并且需要在scroll-view的上一级加上row，完成横向滚动

横向滚动条

横向滚动条结果图

纵向滚动条通过添加scroll-y="true",并且使用scroll-view来配合完成纵向滚动轴

纵向滚动条

纵向滚动条的效果图

Uni-App的条件编译

---

使用条件编译

        

        

可以实现条件编译，可以选择相应的平台去展示相应的内容

H5端和微信小程序端实现条件编译

cover-image：覆盖在原生组件上的图片视图

---

属性说明：

cover-image的属性说明

视图容器

---

view：它类似于传统html中的div，用于包裹各种元素内容。如果使用nvue，则需注意的是，包裹文字应该使用组件。

view的属性说明：

view的属性说明

轮播图（滑块视图容器）

---

swiper：滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图。滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

属性说明：

swiper滑动视图容器

swiper滑动视图组件

swiper滑动视图容器

图标icon

---

由于 icon 组件各端表现存在差异，可以通过使用字体图标的方式来弥补各端差异。

属性说明：

icon属性说明

各平台type值的有效说明：

各平台 type 有效值说明

icon图标

progress进度条

---

progress进度条管理

progress

progress进度条

form表单

---

表单，将组件内的用户输入的      提交。当点击 

 表单中 formType 为 submit 的  组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

form表单

form表单

picker选择器

---

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

form表单

picker选择器

选择后