uni-app 学习笔记一

第一天学习uni-app，先了解pages.json如何进行全局配置，页面文件的路径、窗口样式、原生导航栏、底部tabbar。类似于微信小程序app.json

**

pages文件

**分为三块：pages、globalStyle、 tabBar
先看下效果图和代码：

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},{
			"path": "pages/list/list",
			"style": {
				"navigationBarTitleText": "列表",
				"enablePullDownRefresh":true,
				"navigationBarBackgroundColor":"#007AFF",
				"navigationBarTextStyle":"black",
				"navigationStyle":"default"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black", //导航栏标题颜色，仅支持black/white

	   "navigationBarTitleText": "标题内容", //导航栏标题内容

		"navigationBarBackgroundColor": "#f4f4f4", //导航栏背景色

		"backgroundColor" : "#eeeeee", //窗口背景色

		"enablePullDownRefresh" : true, //开启下拉刷新
	},
	"tabBar":{
		"color":"#666",// 文字默认颜色
		
		"selectedColor":"#ffaa00", //选中时的颜色
		
		"backgroundColor":"#F4f4f4", //背景色
		
		"position": "bottom/top" // tabbar居顶，目前只有微信小程序支持。 
		"list":[
			{
				"pagePath":"pages/index/index",
				"text":"首页",
				"iconPath":"static/icon-1.png",
				"selectedIconPath":"static/icon-1-1.png"
			},
			{
				"pagePath":"pages/list/list",
				"text":"列表",
				"iconPath":"static/icon-2.png",
				"selectedIconPath":"static/icon-2-1.png"
			}
		]
	}

个人感觉uni-app配置和小程序app.json配置几乎差不多。tabbar最多可配置5个。

需要注意的：
1、tabar页面打开一次就保留内存中，再次切换tabbar时只会触发每个页面的onShow, 不会再次触发onLoading

2、uni-app支持在css里面设置背景图片，使用本地路径背景图片需要注意：图片小于40kb,如果图片大于40kb，需要将图片放到服务器，引用网络地址。本地背景图片引用路径仅支持以 ~@ 开头的绝对路径。 例如：background-image:url(’~@/static/logo.png’), 不支持相对路径

页面打开方式

    uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面

	uni.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面

	uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面

	uni.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

	uni.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面

个人理解：

navigateTo 与 redirectTo  只能打开非tabBar页面

switchTab  只能打开tabBar页面

reLaunch   可以打开任意页面

uni-app页面打开方式和小程序打开方式一样，唯一的区别在于前缀不一样。