二uniapp的首页认识

首页

我们进入uniapp，首先肯定要先进去首页，那么怎么设置本平台的首页呢，看过上一篇文章的童鞋们都晓得每个文件夹里的含义，这里再截图说下

聪明的童鞋可能都猜到了 我们要进入页面的配置信息（pages.json）中

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

这里pages是一个数组，数组中包含的对象就是每一个页面，默认第一项是应用启动页，我们只需要将首页放在该数组的第一项即可。

1. path：页面启动的路径，我们这里是pages/index/index，要养成良好的规范，所有的页面都放在pages中
2. style：页面的配置信息，里面包含页面的标题、颜色、背景色以及是否可下拉刷新等等功能。Hbuilder有自动提示功能，小伙伴可以都尝试下。
   具体文档地址：
   https://uniapp.dcloud.io/collocation/pages?id=style

除了每个页面的“pages”属性，还有globalStyle属性，这个属性代表着全部页面的style，若在pages的数组中没有设置单独的样式，则自动使用全部style里的属性。

"globalStyle": {
		"navigationBarTextStyle":"white",
		"navigationBarTitleText": "测试内容",
		"navigationBarBackgroundColor": "#51CC62",
		"backgroundColor": "#51CC62"
	}

结果如下：

解析：因为我们在pages中的style属性里也设置里标题，所以自动使用子类的标题，下面我们将子类的标题删除，再测试一下：
代码：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				//"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app测试",
		"navigationBarBackgroundColor": "#55aa7f",
		"backgroundColor": "#F8F8F8"
	}
}

保存后自动编译
结果如下：

解析：因为页面我们没有设置，所以自动使用全局配置

下一节 tabBar组件