uni-app 目录结构解析

r囧r小猫 2023-06-19 14:25 70阅读 0赞

##### 目录结构解析 #####

一、uni-app 项目初始化完成后，目录结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]

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 基本配置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191206215702874.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191206220555701.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M=,size_16,color_FFFFFF,t_70