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

1,manifest.json

官方详情
uni-app 的 appid 由 DCloud 云端分配,主要用于 DCloud 相关的云服务,请勿自行修改。

2,pages.json

官方详情

2.1,pages

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", //导航栏标题文字内容
		"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使用了此方式) 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": "账户中心"
			}
		]
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

酒鼎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值