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({})写上将要跳转的页面路径。
二、 components文件里面创建headerNav.vue组件
三、在pages.json文件里写上组件路径进去
这里可以选择修改对应的样式信息
滚动视图
scroll-view:可滚动视图
scroll-view属性说明:
横向滚动通过添加scroll-x="true",并且需要在scroll-view的上一级加上row,完成横向滚动
纵向滚动条通过添加scroll-y="true",并且使用scroll-view来配合完成纵向滚动轴
Uni-App的条件编译
使用条件编译
<!-- #ifdef APP-PLUS -->
<!-- #endif -->
可以实现条件编译,可以选择相应的平台去展示相应的内容
cover-image:覆盖在原生组件上的图片视图
属性说明:
视图容器
view:它类似于传统html中的div,用于包裹各种元素内容。如果使用nvue,则需注意的是,包裹文字应该使用组件。
view的属性说明:
轮播图(滑块视图容器)
swiper:滑块视图容器。一般用于左右滑动或上下滑动,比如banner轮播图。滑动切换和滚动的区别,滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域,不能停留在2个滑动区域之间。
属性说明:
图标icon
由于 icon 组件各端表现存在差异,可以通过使用字体图标的方式来弥补各端差异。
属性说明:
各平台type值的有效说明:
progress进度条
progress进度条管理
form表单
表单,将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。当点击 <form> 表单中 formType 为 submit 的 <button> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
picker选择器
从底部弹起的滚动选择器。支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。