当前位置: 首页 > news >正文

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

目录

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

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": "账户中心"}]
},
http://www.lryc.cn/news/65862.html

相关文章:

  • vector、deque、list相关知识点
  • 多维时序 | MATLAB实现基于VMD-SSA-LSSVM、SSA-LSSVM、VMD-LSSVM、LSSVM的多变量时间序列预测对比
  • 设计模式——适配器模式(类适配器、对象适配器)
  • iOS开发多target
  • 100种思维模型之每日评估思维模型-58
  • libreoffice api
  • 全网最火,Web自动化测试驱动模型详全,一语点通超实用...
  • 如何写软件测试简历项目经验,靠这个面试都要赶场
  • 【Linux】Linux下安装Mysql(图文解说详细版)
  • Cookie和Session的API、登录页面
  • C++数据结构:手撕红黑树
  • Spring IoC 深度学习
  • C语言从入门到精通第17天(指针和数组联用)
  • Android9.0 原生系统SystemUI下拉状态栏和通知栏视图之锁屏通知布局
  • 音视频八股文(10)-- mp4结构
  • python算法中的深度学习算法之深度信念网络(详解)
  • SPSS如何绘制常用统计图之案例实训?
  • 打动人心的故事 | 如何利用文案在Facebook上塑造品牌形象
  • 什么是模糊控制?
  • 仿抖音开发需要注意的问题
  • 如何根据期刊缩写查找期刊?
  • 数据发送流程
  • 堆及其应用
  • MySQL数据库备份脚本
  • 【2023 · CANN训练营第一季】应用开发深入讲解——第三章应用调试
  • 黎曼几何与黎曼流形
  • lua | 运算符与字符串
  • NetBackup 10.2 新功能介绍:PostgreSQL 和 MySQL 自动化恢复达成
  • ADRV9002官方例程开发过程中遇到的问题
  • Figma转换为sketch,分享这3款工具