美文网首页
uni-app之pages.json文件(包括自定义导航栏的颜色

uni-app之pages.json文件(包括自定义导航栏的颜色

作者: Cute_小肥鸡 | 来源:发表于2020-08-08 11:39 被阅读0次

    参考链接地址:https://uniapp.dcloud.io/collocation/pages

    pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

    配置项列表

    属性 类型 必填 描述 平台兼容
    globalStyle Object 设置默认页面的窗口表现
    pages Object Array 设置页面路径及窗口表现
    easycom Object 组件自动引入规则 2.5.5+
    tabBar Object 设置底部 tab 的表现
    condition Object 启动模式配置
    subPackages Object Array 分包加载配置
    preloadRule Object 分包预下载规则 微信小程序
    workers String Worker 代码放置的目录 微信小程序

    以下是一个包含了所有配置选项的 pages.json :

    {
        "pages": [{
            "path": "pages/component/index",
            "style": {
                "navigationBarTitleText": "组件"
            }
        }, {
            "path": "pages/API/index",
            "style": {
                "navigationBarTitleText": "接口"
            }
        }, {
            "path": "pages/component/view/index",
            "style": {
                "navigationBarTitleText": "view"
            }
        }],
        "condition": { //模式配置,仅开发期间生效
            "current": 0, //当前激活的模式(list 的索引项)
            "list": [{
                "name": "test", //模式名称
                "path": "pages/component/view/index" //启动页面,必选
            }]
        },
        "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
        },
        "tabBar": {
            "color": "#7A7E83",
            "selectedColor": "#3cc51f",
            "borderStyle": "black",
            "backgroundColor": "#ffffff",
            "height": "50px",
            "fontSize": "10px",
            "iconWidth": "24px",
            "spacing": "3px",
            "list": [{
                "pagePath": "pages/component/index",
                "iconPath": "static/image/icon_component.png",
                "selectedIconPath": "static/image/icon_component_HL.png",
                "text": "组件"
            }, {
                "pagePath": "pages/API/index",
                "iconPath": "static/image/icon_API.png",
                "selectedIconPath": "static/image/icon_API_HL.png",
                "text": "接口"
            }],
            "midButton": {
                "width": "80px",
                "height": "50px",
                "text": "文字",
                "iconPath": "static/image/midButton_iconPath.png",
                "iconWidth": "24px",
                "backgroundImage": "static/image/midButton_backgroundImage.png"
            }
        },
      "easycom": {
        "autoscan": true, //是否自动扫描组件
        "custom": {//自定义扫描规则
          "^uni-(.*)": "@/components/uni-$1.vue"
        }
      }
    }
    

    globalStyle

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

    属性 类型 默认值 描述 平台差异说明
    navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色(同状态栏背景色) APP与H5为#F7F7F7,小程序平台请参考相应小程序文档
    navigationBarTextStyle String white 导航栏标题颜色及状态栏前景颜色,仅支持 black/white
    navigationBarTitleText String 导航栏标题文字内容
    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 是否开启下拉刷新,详见页面生命周期
    onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
    backgroundColorTop HexColor #ffffff 顶部窗口的背景色(bounce回弹区域) 仅 iOS 平台
    backgroundColorBottom HexColor #ffffff 底部窗口的背景色(bounce回弹区域) 仅 iOS 平台
    titleImage String 导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址 支付宝小程序、H5、APP
    transparentTitle String none 导航栏整体(前景、背景)透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 支付宝小程序、H5、APP
    titlePenetrate String NO 导航栏点击穿透 支付宝小程序、H5
    pageOrientation String portrait 横屏配置,屏幕旋转设置,仅支持 auto / portrait / landscape 详见 响应显示区域变化 App 2.4.7+、微信小程序
    animationType String pop-in 窗口显示的动画效果,详见:窗口动画 App
    animationDuration Number 300 窗口显示动画的持续时间,单位为 ms App
    app-plus Object 设置编译到 App 平台的特定样式,配置项参考下方 app-plus App
    h5 Object 设置编译到 H5 平台的特定样式,配置项参考下方 H5 H5
    mp-alipay Object 设置编译到 mp-alipay 平台的特定样式,配置项参考下方 MP-ALIPAY 支付宝小程序
    mp-weixin Object 设置编译到 mp-weixin 平台的特定样式 微信小程序
    mp-baidu Object 设置编译到 mp-baidu 平台的特定样式 百度小程序
    mp-toutiao Object 设置编译到 mp-toutiao 平台的特定样式 字节跳动小程序
    mp-qq Object 设置编译到 mp-qq 平台的特定样式 QQ小程序
    usingComponents Object 引用小程序组件,参考 小程序组件
    renderingMode String 同层渲染,webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层 微信小程序

    注意

    • 支付宝小程序使用titleImage时必须使用https的图片链接地址,需要真机调试才能看到效果,支付宝开发者工具内无效果
    • globalStyle中设置的titleImage也会覆盖掉pages->style内的设置文字标题

    实例
    使用uniapp自定义导航栏时,自己的导航栏字体颜色为白色,但是系统上方的通知栏部分还是黑色,文档中表明

    图1
    设置“图1-划线部分”就有用,即使你的配置是"navigationStyle": "custom",这个属性navigationBarTextStyle依然有效。

    相关文章

      网友评论

          本文标题:uni-app之pages.json文件(包括自定义导航栏的颜色

          本文链接:https://www.haomeiwen.com/subject/kxfhdktx.html