uniapp page.json
「这是我参与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(默认)
image.png
- navigationStyle 默认和custom两种，custom取消原有的默认导航条
image.png
可以自定义导航条
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的图片链接地址
image.png
下拉样式
- 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引入组件的复杂步骤 【有些类似于自定义标签】
要引入的组件
image.png
pages.json
按照路径配置组件
键使用正则表达式，值是vue组件所在路径
image.png
在页面直接使用
image.png
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>
image.png
发现还是有部分没有变色 审查元素发现没有变色的是这一部分
image.png
去改css，需要用page{} 将样式内容放到对象中才行
page{
uni-page-body {
background-color: #f7fcfe;
height: 100%;
font-size: 14px;
line-height: 1.8;
}
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-01-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读