uni-app项目pages.json文件、tabBar

最新推荐文章于 2024-09-23 15:23:16 发布

听海边涛声

最新推荐文章于 2024-09-23 15:23:16 发布

阅读量312

点赞数 2

文章标签： uni-app json javascript 微信小程序

本文链接：https://blog.csdn.net/panghuangang/article/details/142127017

版权

pages.json文件说明

创建了一个uni-app项目：
在这里插入图片描述

pages.json文件配置页面路由、导航栏、tabBar等页面类信息：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	// 配置页面路径及窗口表现
		{
			"path": "pages/index/index",    //只需要写路径，不需要写后缀名
			"style": {   //页面的样式
				"navigationBarTitleText": "uni-app"   //导航栏的标题文字
			}
		}
	],
	"globalStyle": {  //默认页面的窗口样式，全局样式，页面特有的样式可以覆盖默认样式
		"navigationBarTextStyle": "black",  //导航栏标题颜色，仅支持black/white
		"navigationBarTitleText": "uni-app",  //导航栏标题内容
		"navigationBarBackgroundColor": "#F8F8F8",  //导航栏背景颜色
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

运行到微信开发者工具：
在这里插入图片描述

修改pages.json文件，修改下首页的文字标题、全局标题栏背景颜色、标题栏文字颜色

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

在这里插入图片描述

新建另外一个页面

在pages文件夹上右键单击，选择新建页面：
在这里插入图片描述

填写页面信息：
在这里插入图片描述

单击创建按钮，就创建了my页面的骨架：
在这里插入图片描述

同时，在pages.json文件中自动增加了页面路由：
在这里插入图片描述

在my页面中写上一点简单的内容：
在这里插入图片描述

在pages.json文件中增加tabBar配置

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
		  "path" : "pages/my/my",
		  "style" : 
		  {
		    "navigationBarTitleText" : "我的"
		  }
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#1bac9d",
		"backgroundColor": "#F8F8F8"
	},
  "tabBar": {  //配置底部tabBar
    "selectedColor": "#1bac9d",  //tab上的文字选中时的的颜色
    "list": [  //tab的列表，至少要配置两项才有效
      {
       "pagePath": "pages/index/index",  //tab的页面路径
       "text": "首页",  //tab上的按钮文字
       "iconPath": "static/tabs/home_default.png",   //图标路径
       "selectedIconPath": "static/tabs/home_selected.png"  //选中时的图标路径
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/tabs/user_default.png",
        "selectedIconPath": "static/tabs/user_selected.png"
      }
    ]
  },
	"uniIdRouter": {}
}

在这里插入图片描述