社区首页 >专栏 >uniapp page.json

uniapp page.json

用户4793865

发布于 2023-01-12 08:02:37

1.4K00

代码可运行

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

运行总次数：0

代码可运行

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

pages

配置应用，由哪些页面组成，此节点接收一个数组，数组中是多个对象。

对象有两个属性 path style

path : String类型配置页面路径
style : object类型用于设置每个页面的状态栏、导航条、标题、窗口背景色等。页面中配置项会覆盖globalStyle 中相同的配置项

"pages": [ 
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "pages/mine/mine",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ],

⚠️ 每添加一个页面，都需要添加到此配置项下。

globalStyle

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

"globalStyle": {
                "navigationBarBackgroundColor": "#f7fcfe",
                "navigationBarTitleText": "uni-app",
        "navigationBarTextStyle": "black",
        
    }

导航栏

navigationBarBackgroundColor 导航栏背景颜色
navigationBarTitleText 导航栏标题内容【顶部的】
navigationBarTextStyle 导航栏标题颜色及状态栏前景颜色，只能是white或black(默认)

navigationStyle 默认和custom两种，custom取消原有的默认导航条

可以自定义导航条

uni-app提供了状态栏高度的css变量--status-bar-height，如果需要把状态栏的位置从前景部分让出来，可写一个占位div，高度设为css变量。详细请看📪

<template> 
    <view> 
         <view class="status_bar"> <!-- 这里是状态栏 --> </view> 
         <view> 状态栏下的文字 </view> 
     </view> 
 </template> 
 <style> 
 .status_bar { 
     height: var(--status-bar-height); 
     width: 100%; 
     } 
 </style>

titleImage 导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址

下拉样式

enablePullDownRefresh 是否开启下拉刷新默认false
backgroundColor 下拉显示窗口的颜色
backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light屏幕配置
pageOrientation 横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape 详情窗口动画

窗口的显示/关闭动画效果，支持在 API、组件、pages.json 中配置，优先级为：API = 组件 > pages.json。

API(路由跳转)

        uni.navigateTo({            // 跳转
            url: '../test/test',
            animationType: 'pop-in',
            animationDuration: 200
            });
    uni.navigateBack({          //回退
            delta: 1,
        animationType: 'pop-out',
        animationDuration: 200
            });

组件

也是跳转，animation-type属性用于描述动画样式

<navigator animation-type="pop-in" animation-duration="300" url="../test/test">
navigator
</navigator> 
<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >
navigator
</navigator>

page.json

窗口显示的动画

其中的app-plus ✈️

配置编译到 App 平台时的特定样式，部分常用配置 H5 平台也支持

"style": {
    "app-plus": {
        "animationType": "fade-in",
        "animationDuration": 300
    }
}

easycom

✈️ 主要功能：避免Vue引入组件的复杂步骤【有些类似于自定义标签】

要引入的组件

pages.json

按照路径配置组件

键使用正则表达式，值是vue组件所在路径

在页面直接使用

tabBar

导航栏

说明 📢

我们想让主题内容和导航栏都变成一个颜色首先改了index.html 将 body和app的背景色改掉

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title></title>
    <!--preload-links-->
    <!--app-context-->
    <style>
    body{
        background-color:#F7FCFE;
    }
    #app{
        background-color:#F7FCFE;
    }
    </style>
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

发现还是有部分没有变色审查元素发现没有变色的是这一部分

去改css，需要用page{} 将样式内容放到对象中才行

    page{
        uni-page-body {  
            background-color: #f7fcfe;  
            height: 100%;  
            font-size: 14px;  
            line-height: 1.8;  
        }
    }