目录结构解析

一、uni-app 项目初始化完成后,目录结构如下:
在这里插入图片描述

  1. pages - 主组件目录
  2. static - 静态资源目录
  3. App.vue - 页面入口文件
  4. main.js - 入口文件
  5. manifest.json - 应用配置文件,用于指定应用的名称、图标、权限等
  6. pages.json - 全局配置文件,包括页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
  7. uni.scss - 全局样式文件
  8. components - 公共组件目录

注:

  1. pages.json 基本配置
{
	// 路由、顶部导航栏标题
	// pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
	"pages": [ 
		{
			"path": "pages/tabBar/index/index",
			// 用于设置每个页面的状态栏、导航条、标题、窗口背景色
			"style": {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh": true     // 开启下拉刷新
			}
		}, {
			"path": "pages/tabBar/comment/comment",
			"style": {
				"navigationBarTitleText": "评论"
			}
		}, {
			"path": "pages/tabBar/person/person",
			"style": {
				"navigationBarTitleText": "个人中心"
			}
		}
	],
	// 底部导航栏配置
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#1296DB",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/tabBar/index/index",
				"iconPath": "static/images/index.png",
				"selectedIconPath": "static/images/index-selected.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/tabBar/comment/comment",
				"iconPath": "static/images/comment.png",
				"selectedIconPath": "static/images/comment-selected.png",
				"text": "评论"
			},
			{
				"pagePath": "pages/tabBar/person/person",
				"iconPath": "static/images/person.png",
				"selectedIconPath": "static/images/person-selected.png",
				"text": "个人中心"
			}
		]
	},
	// 窗口样式
	"globalStyle": {
		"navigationBarTextStyle": "white",   					// 导航栏标题颜色及状态栏前景色,仅支持 black/white
		"navigationBarTitleText": "uni-app", 					// 导航栏标题,如pages中未设置则显示
		"navigationBarBackgroundColor": "#1296DB",		// 导航栏背景颜色
		"backgroundColor": "#F8F8F8",									// 窗口背景色
		"navigationStyle": "default",									// 是否显示导航栏,仅支持 default/custom, custom 为取消默认的原生导航栏
		"enablePullDownRefresh": false,								// 是否启用下拉刷新
		"onReachBottomDistance": 50,									// 页面上拉触底事件触发时距页面底部距离,单位只支持px
		"pageOrientation": "portrait"									// 屏幕旋转设置,仅支持 auto / portrait / landscape 
	}
}

  1. manifest.json 基本配置

在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐