财务管理app pages.json页面解读

2301_80089510

已于 2024-08-18 21:48:29 修改

阅读量983

点赞数 23

文章标签： json java 前端

于 2024-08-18 21:47:01 首次发布

本文链接：https://blog.csdn.net/2301_80089510/article/details/141305577

版权

easycom

定义了组件的自动扫描规则和自定义路径。

"easycom": {
		"autoscan": true,
		"custom": {
			"mb-ba-(.*)": "@/components/base/mbill-$1.vue",
			"mb-b-(.*)": "@/components/bill/mbill-bill-$1.vue",
			"mb-stat-(.*)": "@/components/bill/stat/mbill-bill-stat-$1.vue",
			"mb-ca-(.*)": "@/components/category/mbill-category-$1.vue",
			"mb-as-(.*)": "@/components/asset/mbill-asset-$1.vue",
			"mb-po-(.*)": "@/components/pre-order/mbill-po-$1.vue",
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},

【uni-app】easycom模式（自动按需引入组件） - 星河几重 - 博客园 (cnblogs.com)

1.autoscan

设置为 true 表示自动扫描组件。

2.custom

对象包含了自定义的组件路径规则。这些规则允许开发者使用简短的别名来引用组件，而不需要写完整的路径。

3.组件别名规则

（1）每个属性都是一个规则，属性的键是一个正则表达式，用于匹配组件的别名；

（2）属性的值是组件的实际路径。例如，"mb-ba-(.*)": "@/components/base/mbill-$1.vue" 表示任何以 mb-ba- 开头的组件名，如 mb-ba-component，都会被映射到 @/components/base/mbill-component.vue 的路径。这里的 $1 是正则表达式中的捕获组，代表匹配到的 mb-ba- 后面的部分。

4.具体规则分析:

"mb-ba-(.*)": 基础组件，位于 @/components/base/ 目录下。
"mb-b-(.*)": 账单组件，位于 @/components/bill/ 目录下。
"mb-stat-(.*)": 统计组件，位于 @/components/bill/stat/ 目录下。
"mb-ca-(.*)": 分类组件，位于 @/components/category/ 目录下。
"mb-as-(.*)": 资产组件，位于 @/components/asset/ 目录下。
"mb-po-(.*)": 预购组件，位于 @/components/pre-order/ 目录下。

pages

定义了小程序的页面路径和样式。

"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": ""
			}
		},
		{
			"path": "pages/bill/search",
			"style": {
				"navigationBarTitleText": "账单查询"
			},
			"needLogin": true
		},
		{
			"path": "pages/bill/stats/index",
			"style": {
				"navigationBarTitleText": "统计汇总"
			},
			"needLogin": true
		},
		{
			"path": "pages/bill/category/manage",
			"name": "category-manage",
			"style": {
				"navigationBarTitleText": "分类管理"
			},
			"needLogin": true
		},
		{
			"path": "pages/bill/asset/manage",
			"name": "asset-manage",
			"style": {
				"navigationBarTitleText": "账户管理"
			},
			"needLogin": true
		},
		{
			"path": "pages/bill/edit",
			"name": "bill-edit",
			"style": {
				"navigationBarTitleText": ""
			},
			"needLogin": true,
			"permission": {
				"scope.userLocation": {
					"desc": "你的位置信息将用于小程序位置接口的效果展示"
				}
			}			
		},
		{
			"path": "pages/bill/detail",
			"style": {
				"navigationBarTitleText": ""
			},
			"needLogin": true
		},
		{
			"path": "pages/bill/pre-order/index",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			},
			"needLogin": true
		},
		{
			"path": "pages/bill/pre-order/list",
			"style": {
				"navigationBarTitleText": ""
				// "navigationBarBackgroundColor": "#e6f2f5"
			},
			"needLogin": true
		},
		{
			"path": "pages/bill/asset/edit",
			"name": "asset-edit",
			"style": {
				"navigationBarTitleText": ""
			},
			"needLogin": true
		},
		{
			"path": "pages/bill/category/edit",
			"name": "category-edit",
			"style": {
				"navigationBarTitleText": ""
			},
			"needLogin": true
		},		
		{
			"path": "pages/profile/index",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}
		},
		{
			"path": "pages/profile/setting",
			"style": {
				"navigationBarTitleText": "设置",
				"enablePullDownRefresh": false,
				"app-plus": {
				    "bounce":"none" // 将回弹属性关掉
				}
			}
			// "needLogin": true
		}
	],

基本内容

每个页面对象包含 path（页面路径）、style（页面样式配置）和 needLogin（是否需要登录）等属性。 navigationBarTitleText 设置导航栏标题。 needLogin 表示该页面是否需要用户登录才能访问。

subPackages

子包配置，用于拆分小程序代码，提高加载速度。每个子包对象包含 root（子包根目录）和 pages（子包内的页面数组）

小程序分包(subPackages)-CSDN博客

1.subPackages 数组

包含多个子包对象，每个子包对象定义了一个子包的配置。

2.第一个子包对象

（1） root: 子包的根目录，这里是 "uni_modules/uni-feedback"。

（2）pages: 子包内页面的数组。

第一个页面对象定义了路径为 "pages/opendb-feedback/opendb-feedback" 的页面。

style: 页面样式配置，包括： navigationBarTitleText: 设置导航栏标题为 "意见反馈"。

enablePullDownRefresh: 设置为 false 表示禁用下拉刷新功能。

3.第二个子包对象：

（1）root: 子包的根目录，这里是 "uni_modules/uni-id-pages/pages"。

（2）pages: 子包内页面的数组，包含多个页面对象，每个页面对象定义了一个页面的路径和样式配置。

例如： "userinfo/userinfo" 页面，设置了导航栏标题为 "个人资料"。

"login/login-withoutpwd" 和 "login/login-withpwd" 页面，没有额外的样式配置。

"userinfo/deactivate/deactivate" 页面，设置了导航栏标题为 "注销账号"。

4.页面样式配置

navigationBarTitleText: 设置页面导航栏的标题文本。

enablePullDownRefresh: 设置页面是否支持下拉刷新。值为 false 表示禁用。

5.特定页面的配置

例如，"login/login-smscode" 页面设置了导航栏标题为 "手机验证码登录"。

"register/register" 页面设置了导航栏标题为 "注册"。

"retrieve/retrieve" 页面设置了导航栏标题为 "重置密码"。

6.通用配置

"common/webview/webview" 页面设置了不显示导航栏标题和禁用下拉刷新。

7.密码管理相关页面

"userinfo/change_pwd/change_pwd" 页面设置了导航栏标题为 "修改密码"，并且禁用了下拉刷新。 "userinfo/set-pwd/set-pwd" 页面同样禁用了下拉刷新，设置了导航栏标题为 "设置密码"。

8.邮箱注册和密码重置页面

"register/register-by-email" 页面设置了导航栏标题为 "邮箱验证码注册"。 "retrieve/retrieve-by-email" 页面设置了导航栏标题为 "通过邮箱重置密码"。

condition

条件页面配置，通常用于小程序的启动页面。

list 包含条件页面的数组。 current 表示当前激活的条件页面索引。

"condition": {
		"list": [{}],
		"current": 0
	},

globalStyle

全局样式配置，影响整个小程序的样式。包括导航栏标题、背景色、文本样式等。

"globalStyle": {		
		"navigationBarTitleText": "天天账本",
		// #ifdef H5
		"h5": {
			"titleNView": false
		},
		// #endif
		"navigationBarTextStyle": "black",		
		"navigationBarBackgroundColor": "#ff9f18",
		"backgroundColor": "#F8F8F8",
		"enablePullDownRefresh": false		
	},

navigationBarTitleText: "天天账本" 设置为小程序所有页面导航栏的标题文字。
H5平台特有配置: // #ifdef H5 和 // #endif 是条件编译指令，表示只在编译为H5（网页版）时包含这部分代码。 "h5": { "titleNView": false } 定义了H5平台特有的配置。
titleNView: false 表示在网页版中不使用原生的导航栏。
navigationBarTextStyle: "black" 设置导航栏标题的文本颜色为黑色。
navigationBarBackgroundColor: "#ff9f18" 设置导航栏的背景颜色。
backgroundColor: "#F8F8F8" 设置小程序页面的背景颜色，这是一个浅灰色。
enablePullDownRefresh: false 表示全局禁用下拉刷新功能。这意味着在小程序的任何页面上，用户都不能通过下拉来刷新页面内容。如果需要在特定页面启用下拉刷新，可以在页面的 style 配置中单独设置 enablePullDownRefresh: true。
作用范围: globalStyle 中定义的样式是全局生效的，会影响到小程序中所有页面的默认样式，除非在特定页面的 style 配置中覆盖这些样式。
使用场景: 这样的全局样式配置通常用于确保小程序具有统一的外观和风格，同时减少在每个页面上重复设置相同样式的工作。

tabBar

底部标签栏配置。

"tabBar": {
		//"custom": true, + custom-tab-bar 目录
		"selectedColor": "#7d787a",
		"color": "#7A7E83",
		"borderStyle": "black",
		"backgroundColor": "#FFFFFF",		
		"list": [			
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/tabbar/list.png",
				"selectedIconPath": "static/tabbar/list_active1.png",				
				"text": "账单"
			},
			{
				"pagePath": "pages/bill/pre-order/index",
				"iconPath": "static/assets/add.png",
				"selectedIconPath": "static/tabbar/grid_active1.png",
			 	"text": "预购"
			},			
			{
				"pagePath": "pages/profile/index",
				"iconPath": "static/tabbar/me.png",
				"selectedIconPath": "static/tabbar/me_active1.png",				
				"text": "我的"
			}
		]
	},

selectedColor 和 color 分别定义选中和未选中标签的文本颜色。
borderStyle 设置标签栏的边框样式。 backgroundColor 设置标签栏的背景色。
list 定义了标签栏的各个项，包括 pagePath（页面路径）、iconPath（图标路径）、selectedIconPath（选中状态的图标路径）和 text（标签文本）。

uniIdRouter

uni-id 路由配置，用于用户认证和登录。

uniCloud -- uniIdRouter自动路由-CSDN博客

"uniIdRouter": {
		"loginPage": "uni_modules/uni-id-pages/pages/login/login-withoutpwd",
		"needLogin": [
			"/uni_modules/uni-id-pages/pages/userinfo/userinfo"
		],
		"resToLogin": true
	},