uniapp目录结构、生命周期、路由跳转

一.目录结构

pages：存放页面文件的目录
static：存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
App.vue：应用配置，用来配置App全局样式以及监听 应用生命周期
main.js：Vue初始化入口文件
manifest.json：配置应用名称、appid、logo、版本等打包信息
pages.json：配置页面路由、导航条、选项卡等页面类信息
components：uni-app组件目录，可手动创建

注：css、less/scss 等不要放在 static 目录下，这些公用的资源放在 common 目录下。

二.生命周期

一.页面生命周期

• onload 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
• onReady 监听页面初次渲染完成
• onShow 监听页面显示
• onHide 监听页面隐藏
• onUnload 监听页面卸载
• onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新
• onReachBottom 页面上拉触底事件的处理函数
• onShareAppMessage 用户点击右上角分享
• onPageScroll 监听页面滚动，参数为Object
• onTabItemTap 当前是 tab 页时，点击 tab 时触发，参数为Object

其中onPullDownRefresh监听该页面下拉刷新的步骤：
需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
首页不下拉刷新：false

如果在globalStyle里面写，则每个页面都能下拉：

二.应用生命周期
只能在App.vue里面监听，在其它页面监听无效。

• onLaunch 当 uni-app 初始化完成时触发（全局只触发一次）
• onShow 当 uni-app 启动，或从后台进入前台显示
• onHide 当 uni-app 从前台进入后台
• onError 当 uni-app 报错时触发

上面的 option 代表场景值，点击屏幕右上角的圆圈会出现各种场景值:

三.路由

一.需要在pages.json里配置每个路由页面的路径及页面样式。
二.路由跳转
有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。
1.API跳转

• uni.navigateTo 跳转非 tabBar 页面，保留当前页面，跳转到应用内的某个页面（跳转次数有限制）
• uni.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
• uni.navigateBack 关闭当前页面，返回上一页面或多级页面
• uni.redirectTo 关闭当前页面，跳转到应用内的某个页面
• uni.reLaunch 关闭所有页面，打开到应用内的某个页面

例如在index页面跳到news页面：

	to news

methods: {
	toPath(){
		uni.switchTab({       //跳转到tabber中的页面
		url:"../news/news"
		})
	}
}

两个非tabber的页面之间的跳转：

	我是one页面
	to Two
	返回

methods: {
	toPath(){
		uni.navigateTo({      //跳转到非tabber中的页面
			url:"../two/two"
		})
	},
	goBack(){
		uni.navigateBack()      //返回上一页面
	}
}

2.navigator组件跳转
属性说明

属性名	类型	默认值	说明
url	String		应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 'navigateBack' 时有效，表示回退的层数
animation-type	String	pop-in/out	当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果
animation-duration	Number	300	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果

open-type 有效值

值	说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能
navigateBack	对应 uni.navigateBack 的功能

注：跳转tabbar页面，必须设置open-type="switchTab"
效果：

四.尺寸单位 upx