uni-app study Day1

uni-app 生命周期应用生命周期页面生命周期 1、路由跳转2、允许页面下拉刷新3、标签总结4、底部导航栏（tabBar）5、分包6、image7、宽度缩减

生命周期 应用生命周期

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

页面生命周期

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项
onShareAppMessage	用户点击右上角分享
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object
onBackPress	监听页面返回
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件
onShareTimeline	监听用户点击右上角转发到朋友圈
onAddToFavorites	监听用户点击右上角收藏

1、路由跳转

1）调用 API 方式

uni.navigateTo() {
	url: 'xxx'
}

2）组件式

<navigator url="/subpages/chat/chat"> xxx navigator>

3）Tab 可切换

uni.switchTab({
	url: 'xxx'
}) 

2、允许页面下拉刷新

在 pages.json 文件中的 "pages"中的 style 加上

"enablePullDownRefresh": true

3、标签总结

标签	意义
	文本标签，相当于 HTML 中的 或者
	路由跳转，加上 url 参数可以跳转到目标路径上
	一个外壳盒子标签，用于多节点渲染
	一个相当于的标签，主要用于单体的渲染

4、底部导航栏（tabBar）

当页面有需要底部导航栏切换模块的时候使用，List 数组中最少定义2个，最多定义5个。

"tabBar": {
		"color": 默认颜色,
		"selectedColor": 选择后的颜色,
		"borderStyle": 导航栏上边框的颜色，一般只有黑白,
		"backgroundColor": 背景颜色,
		"list": [
			{
				"pagePath": "目标路径",
				"iconPath": "图标位置",
				"selectedIconPath": "图标被选择后改另一个图标",
				"text": "伴随文字"
			},{xxx},{xxx},{xxx}]
		}

当有了底导航栏之后，内部的跳转就更改为 uni.switchTab({ url: 'xxx' })

5、分包

一般组件写在主包中，有不需要立马加载的，按需导入的文件就写在分包中，例如导航栏的各个定向地址

使用一个独立的文件夹 subpages，配置在主包同级之下。

"subPackages":[{
			"root":"分包名",
			"pages":[{
				"path" : "路径",
				"style" :                                                                                    
				{ 同主包 }
			}]
		}],

6、image

1、image 中 mode 是字图片裁剪或者缩放的模式
2、widthFix ：高度适应宽度进行变化

7、宽度缩减

max-width : colo( 100% - 290upx )