uni-app项目是通过pages节点配置应用由哪些页面组成,pages节点接收一个数组,数组每个项都是一个对象,其属性值如下:(1) 属性:path类型:String描述:配置页面路径(2) 属性:style类型:Object描述:配置页面窗口样式注意点:(1)pages节点的第一项为应用入口页(即首页)(2)应用中新增/减少页面,都需要对 pages 数组进行修改(3)文件名不需要写后缀,框架会自动寻找路径下的页面资源开发目录为:

代码示例:需要在pages.json中编写

{    "pages":[        {            "path":"pages/index/index",            "style":{...}        },{            "path":"pages/login/login",            "style":{...}        }    ]}

style

用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

页面中配置项会覆盖 globalStyle 中相同的配置项

属性

类型

默认值

描述

平台差异说明

navigationBarBackgroundColor

HexColor

#000000

导航栏背景颜色(同状态栏背景色),如"#000000"

navigationBarTextStyle

String

white

导航栏标题颜色及状态栏前景颜色,仅支持 black/white

navigationBarTitleText

String

导航栏标题文字内容

navigationBarShadow

Object

导航栏阴影

navigationStyle

String

default

导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏

微信小程序 7.0+、百度小程序、H5、App(2.0.3+)

backgroundColor

HexColor

#ffffff

窗口的背景色

微信小程序、百度小程序、字节跳动小程序

backgroundTextStyle

String

dark

下拉 loading 的样式,仅支持 dark/light

enablePullDownRefresh

Boolean

false

是否开启下拉刷新

以上是一些style的属性,更多属性可以去官网查看。

代码示例:

{              "pages":[{             "path":"pages/index/index",             "style":{                 "navigationBarTitleText":"首页",//设置页面标题文字                 "enablePullDownRefresh":true//开启下拉刷新           }             },    ...  ]}

自定义导航栏使用注意当navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,此时要注意几个问题:(1)非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app提供了状态栏高度的css变量--status-bar-height,如果需要把状态栏的位置从前景部分让出来,可写一个占位div,高度设为css变量。

(2)如果原生导航栏不能满足需求,推荐使用uni ui的自定义导航栏NavBar。这个前端导航栏自动处理了状态栏高度占位问题。(3)前端导航栏搭配原生下拉刷新时,会有问题,包括微信小程序下iOS需要拉更长才能看到下拉刷新的三个点,而Android是从屏幕顶部下拉,无法从导航栏下方下拉。如果一定要从前端导航栏下拉,小程序下只能放弃原生下拉刷新,纯前端模拟,参考mescroll插件,但这样很容易产生性能问题。目前小程序平台自身没有提供更好的方案App和H5下,原生下拉刷新提供了circle样式,可以指定offset偏移量(pages.json的app-plus下配置),自定义下拉圈出现的位置。在hello uni-app的扩展组件中有示例。(4)非H5端,前端导航盖不住原生组件。如果页面有video、map、textarea(仅小程序)等原生组件,滚动时会覆盖住导航栏如果是小程序下,可以使用cover-view来做导航栏,避免覆盖问题如果是App下,建议使用titleNView或subNVue,体验更好(5)前端组件在渲染速度上不如原生导航栏,原生导航可以在动画期间渲染,保证动画期间不白屏,但使用前端导航栏,在新窗体进入的动画期间可能会整页白屏,越低端的手机越明显。(6)以上讨论的是前端自定义导航栏,但在App侧,原生导航栏也提供了比小程序导航更丰富的自定义性titleNView:给原生导航栏提供更多配置,包括自定义按钮、滚动渐变效果、搜索框等。subNView:使用nvue原生渲染,所有布局自己开发,具备一切自定义灵活度。(7)页面禁用原生导航栏后,想要改变状态栏的前景字体样式,仍可设置页面的 navigationBarTextStyle 属性(只能设置为 black或white)。如果想单独设置状态栏颜色,App端可使用plus.navigator.setStatusBarStyle设置。注意部分低端Android手机(4.4)自身不支持设置状态栏前景色。鉴于以上问题,在原生导航能解决业务需求的情况下,尽量使用原生导航。甚至有时需要牺牲一些不是很重要的需求。在App和H5下,uni-app提供了灵活的处理方案:titleNView、subNVue、或整页使用nvue。但在小程序下,因为其自身的限制,没有太好的方案。有必要的话,也可以用条件编译分端处理。

android string数组转json_移动端开发基础【20】pages.json的配置项pages相关推荐

  1. web 移动端开发基础

    web 移动端开发基础 文章目录 web 移动端开发基础 了解视口相关内容 meta 视口标签 掌握二倍图用法 物理像素 & 物理像素比 多倍图 二倍精灵图做法 了解移动端常见选择方案 掌握移 ...

  2. android avm灰色,APICloud AVM多端开发案例深度解析(上)--点餐app开发

    AVM多端开发是APICloud定义的一套新的代码编写标准(DSL):基于标准Web Components组件化思想,兼容Vue / React语法特性,通过一次编码,分别编译为Android和iOS ...

  3. 【Android底层学习总结】1. 驱动开发基础

    0 目录 1 前言 2 驱动开发认识 2.1 驱动 2.1.1 设备驱动程序的主要功能 2.1.2 驱动程序的主要类型 2.1.3 设备文件 2.1.4 sys文件系统: 3 基础编程 3.1 内核模 ...

  4. 一、服务端开发基础(搭建Web服务器、网络基础概念、请求响应流程、配置Apache、静态网站与动态网站)

    一.建立你的第一个网站(目标) 前端开发 最终还是属于 Web 开发 中的一个分支,想要成为一名合格的前端开发人员,就必须要 充分理解Web 的概念. 构建一个专业的网站是一项巨大的工作!对于新手我们 ...

  5. 服务端开发基础知识点

    服务端开发 服务端基础 软件结构 C/S体系结构 客户端/服务端,例如QQ.网盘 优点:交互性好,对服务器压力小,安全 缺点:服务器更新时需要同步更新客户端 B/S体系结构 浏览器/服务端,例如网站 ...

  6. 一起谈.NET技术,asp.net控件开发基础(20)

    上面我们讨论了数据绑定控件的做法,但都未涉及到asp.net2.0中数据源控件的用法,让用惯了数据源控件的人可能感觉不适应.这次我们就开始讨论在asp.net2.0中,我们该如何重新定义数据绑定控件. ...

  7. H5移动端开发基础(三)自定义滚动条、实战-音悦台

    自定义滚动条.实战-音悦台 自定义滚动条 js封装 transform.js tween.js scrollBar.js 音悦台 适配 样式 html js 自定义滚动条 *{margin: 0;pa ...

  8. 网游Server端开发基础

    1 服务器的网络连接 大多数的网络游戏的服务器都会选择非阻塞select这种结构,为什么呢?因为网络游戏的服务器需要处理的连接非常之多,并且大部分会选择在Linux/Unix下运行,那么为每个用户开一 ...

  9. asp.net控件开发基础(20)

    示例代码         上面我们讨论了数据绑定控件的做法,但都未涉及到asp.net2.0中数据源控件的用法,让用惯了数据源控件的人可能感觉不适应.这次我们就开始讨论在asp.net2.0中,我们该 ...

最新文章

  1. 经典网络LeNet-5介绍及代码测试(Caffe, MNIST, C++)
  2. 36岁前百度员工哀叹:结婚三年老婆要离婚,要求分走大半财产,并且带走孩子。阴差阳错之下,发现孩子不是自己亲生的!...
  3. 开发日记-20190521 关键词 bash的几个初始化文件
  4. 8个Python实用脚本
  5. 14.JAVA整型变量
  6. Vijos1240 朴素的网络游戏
  7. 【BZOJ4569】萌萌哒,ST表+并查集
  8. smartSVN 分支与合并
  9. 内镜碎石术装置行业调研报告 - 市场现状分析与发展前景预测
  10. 在C#中解析命令行参数的最佳方法? [关闭]
  11. mybatis中的#{}与${}在原理上的区别
  12. 海思移植 APR(Apache Portable Runtime)
  13. 利用FFmpeg合并音频和视频
  14. html5光线传感器,光线传感器是什么 光线传感器分类
  15. 啊哈,在PDD买了一套自己的盗版书
  16. python-selenium自动化测试网页
  17. cisco 华三 对接_H3C交换机与Cisco交换机STP协议对接注意事项
  18. camus执行任务,偶发性异常
  19. Word~Word修改行间距磅值
  20. Windows-EmEditor emed_v1910 超大文本编辑器

热门文章

  1. Threading in C#
  2. void和void *
  3. applicationContext配置文件模板1
  4. Android开发常用的插件及工具
  5. Javascript 构造函数模式、原型模式
  6. 迁移DirectX11到VS2015 Win10
  7. Tomacat服务器的安装和配置
  8. Unix基本系统数据类型和stat结构体
  9. SESSION 回收机制
  10. 基于OpenDDS开发发布订阅HelloMsg程序的过程(Windows)