移动端开发基础【19】pages.json的配置项globalStyle

一个uni-app项目中用来进行全局配置的文件就是pages.json,它决定了页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。它与微信小程序中app.json的页面管理部分相似。需要注意的是定位权限申请等内容原本是属于app.json的,但在uni-app中它是在manifest中配置的。

一.配置项列表

属性

类型

必填

描述

平台兼容

globalStyle

Object

设置默认页面的窗口表现

 

pages

Object Array

设置页面路径及窗口表现

 

easycom

Object

组件自动引入规则

2.5.5+

tabBar

Object

设置底部 tab 的表现

 

condition

Object

启动模式配置

 

subPackages

Object Array

分包加载配置

 

preloadRule

Object

分包预下载规则

微信小程序

workers

String

Worker 代码放置的目录

微信小程序

二、globalStyle

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

(1)设置导航栏背景颜色(同状态栏背景色)

属性:navigationBarBackgroundColor

类型:HexColor

默认值:#F7F7F7

平台差异说明:APP与H5为#F7F7F7,小程序平台请参考相应小程序文档

(2)设置导航栏标题颜色及状态栏前景颜色,仅支持 black/white

属性:navigationBarTextStyle

类型:String

默认值:white

(3)设置导航栏标题文字内容

属性:navigationBarTitleText

类型:String

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

属性:navigationStyle    

类型:String

默认值:default

(5)设置下拉显示出来的窗口的背景色

属性:backgroundColor

类型:HexColor

默认值:#ffffff

平台差异性:微信小程序

(6)设置下拉 loading 的样式,仅支持 dark / light

属性:backgroundTextStyle

类型:String

默认值:dark

平台差异性:微信小程序

(7)设置是否开启下拉刷新

属性:enablePullDownRefresh  

类型:Boolean

默认值:false

(8)设置页面上拉触底事件触发时距页面底部距离,单位只支持px

属性:onReachBottomDistance

类型:Number

默认值:50

(9) 设置窗口显示的动画效果

属性:animationType

类型:String

默认值:pop-in

平台差异性:App

(10) 设置窗口显示动画的持续时间,单位为 ms

属性:animationDuration    

类型:Number

默认值:300

平台差异性:App

globalStyle的属性还有很多,以上介绍的只是其中的一部分,如果想了解更多,可以去官网。

以下是一段包含globalStyle配置选项的 pages.json 文件的代码:

{

    "globalStyle": {

        "navigationBarTextStyle": "black",

        "navigationBarTitleText": "测试",

        "navigationBarBackgroundColor": "#F8F8F8",

        "backgroundColor": "#F8F8F8",

        "usingComponents":{

            "collapse-tree-item":"/components/collapse-tree-item"

        },

        "renderingMode": "seperated", // 仅微信小程序,webrtc 无法正常时尝试强制关闭同层渲染

        "pageOrientation": "portrait"//横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape

},

}

官网:http://www.lenbor.com
原文地址:https://www.cnblogs.com/lenbor/p/13468642.html