首页

我们进入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组件

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐