学习笔记(2)项目结构描述 - manifest.json和pages.json

news/2024/7/10 2:21:46 标签: uni-app, vue, UNI

目录

  • 1,manifest.json
  • 2,pages.json
    • 2.1,pages
    • 2.2,globalStyle
    • 2.3,tabBar

1,manifest.json

官方详情
UNI-APP.html" title=uni-app>uni-app 的 appid 由 DCloud 云端分配,主要用于 DCloud 相关的云服务,请勿自行修改。

2,pages.json

官方详情

2.1,pages

UNI-APP.html" title=uni-app>uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下:

pages": [
	//pages数组中第一项表示应用启动页,
    {
      "path": "pages/index/index",  //配置页面路径
        
       /*
       * style,配置页面窗口表现,是一个对象。用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
       * 页面中配置项会覆盖 globalStyle 中相同的配置项。
       * 地址:https://uniapp.dcloud.net.cn/collocation/pages.html#style
       */
          "style": {
            "navigationBarTitleText": "",  //导航栏标题文字内容
              //设置编译到 App 平台的特定样式
                "app-plus": {
                    "titleNView": false
                 }
           }
      },
        
      {
			"path": "pages/tabBar/home",
			"style": {
				"navigationBarTitleText": "",
				"navigationBarBackgroundColor": "#457AE6",  //导航栏背景颜色(同状态栏背景色),如"#000000"
				"backgroundColor": "#F4F5F7",  //窗口的背景色
				"app-plus": {
					"titleNView": false
				}
			}
		},
]
  • 应用中新增/减少页面,都需要对 pages 数组进行修改。
  • 文件名不需要写后缀,框架会自动寻找路径下的页面资源。

2.2,globalStyle

详情
用于设置应用的状态栏、导航条、标题、窗口背景色等。

"globalStyle": {
		"navigationBarTextStyle": "white", //导航栏标题颜色及状态栏前景颜色,
		"navigationBarTitleText": "UNI-APP.html" title=uni-app>uni-app", //导航栏标题文字内容
		"navigationBarBackgroundColor": "#457AE6", //导航栏背景颜色(同状态栏背景色)
		"backgroundColor": "#F4F5F7",  //下拉显示出来的窗口的背景色
		"app-plus": {
			"backgroundColor": "#F4F5F7"
		}  //设置编译到 App 平台的特定样式,
		// "pageOrientation": "portrait-primary"
},

2.3,tabBar

详情

设置底部tab

  • 当设置 position 为 top 时,将不会显示 icon
  • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
  • tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello UNI-APP.html" title=uni-app>uni-app使用了此方式) tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。

例子:项目底部导航栏配置

"tabBar": {
		"color": "#909399",  //tab 上的文字默认颜色
		"selectedColor": "#303133",  //tab 上的文字选中时的颜色
		"backgroundColor": "#FFFFFF",  //tab 的背景色
		"borderStyle": "white",
		"list": [{
				"pagePath": "pages/tabBar/home",  //页面路径,必须在 pages 中先定义
          图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 position 为 top 时,此参数无效,不支持网络图片,不支持字体图标
				"iconPath": "static/images/home.png",  
          
          //选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 position 为 top 时,此参数无效
				"selectedIconPath": "static/images/home_select.png",
				"text": "首页"  //tab 上按钮文字,在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
			}, {
				"pagePath": "pages/tabBar/financing",
				"iconPath": "static/images/yunxin.png",
				"selectedIconPath": "static/images/yunxin_select.png",
				"text": "产品中心"
			},
			{
				"pagePath": "pages/tabBar/accountCenter",
				"iconPath": "static/images/account.png",
				"selectedIconPath": "static/images/account_select.png",
				"text": "账户中心"
			}
		]
},

http://www.niftyadmin.cn/n/290830.html

相关文章

v4l 子系统

v4l 子系统介绍 V4L 子系统是 Linux 内核中的一个框架,用于支持视频设备的驱动程序和应用程序。它提供了一个统一的接口,使得应用程序能够与各种不同类型的视频设备(如摄像头、TV 卡等)进行通信。 V4L 子系统的主要组件包括驱动…

FT2000+ qemu kvm openEuer crash 分析 频繁设置CPU online及cgroup导致进程卡死、不调度故障

测试用例1 openEuler 20.03 默认内核 https://hknaruto.blog.csdn.net/article/details/130498823 内核版本信息 突然就坚挺起来,长时间稳定运行 。。。 测试用例2:CentOS8 (16C16G) 十几分钟后,终端已卡死 ,两个终端均无响应&a…

测试开发如何进阶?需要哪些能力?吐血整理-你的进阶之路...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 测试开发&#xff…

全面解读什么是信息安全服务CCRC认证?

CCRC信息安全服务资质级别分为一级、二级、三级共三个级别,其中一级最高,三级最低。共分8个不同的方向,分别是:安全集成、安全运维、应急处理、风险评估、灾难备份与恢复、安全软件开发、网络安全审计、工业控制系统安全。申请方可…

【数据结构】插入排序

插入排序 1. 排序2.插入排序2.1直接插入排序2.2折半插入法2.3希尔排序 1. 排序 排序的概念 排序就是将一组杂乱无章的数据按一定规律(顺序或者逆序)排列起来。 排序的目的 方便查找元素。 内部排序和外部排序 若待排序记录都在内存中,称为内…

Contest3137 - 2022-2023-2 ACM集训队每月程序设计竞赛(1)五月月赛

A 1! 5! 46 169 有一种数字,我们称它为 纯真数。 它等于自身每一个数位的阶乘之和。请你求出不超过n的所有 纯真数。(注:纯真数不含有前导0)数据范围1e18 纯真数只有四个,注意0!1 1,2,145,40585 int n;cin>>n;int res[]{…

Postman(接口测试工具)使用教程

目录 Postman(接口测试工具) Postman 介绍 Postman 相关资源 Postman 安装 具体安装步骤 ● 安装 Postman 快速入门 快速入门-实现步骤 其它说明 Postman(接口测试工具) Postman 介绍 1. Postman 是一款功能超级强大的用于发送 HTTP 请求的 测试工具 2. 做 WEB 页面开…

联发科 MT6761开发板 安卓核心板 4G安卓主板定制开发方案

MT6761安卓核心板(联发科MT6761开发板)集成了 4 个 ARM Cortex-A53 内核,主频高达 2GHz。它集成了频率高达 660MHz 的 PowerVR GE6300 GPU。集成内存控制器支持 LPDDR4x-3200(最大 6GB)。此外,还集成了具有 Cat-7 DL(300Mbps 下载)和 Cat-13 UL(150Mbps …