uni-app小程序开发-页面配置

发表于 | 分类于
uni-app小程序开发-页面配置

页面配置

https://uniapp.dcloud.net.cn/collocation/pages.html#pages

先看一个整体的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页",
			"navigationStyle": "custom",
			"transparentTitle": "auto"
		}
	}],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#f3f3f3",
		"app-plus": {
			"titleNView": false //禁用原生导航栏  
		}
	},
	"uniIdRouter": {}
}

其中pages是单个页面的配置，globalStyle是全局样式配置。

隐藏导航/沉浸式页面

1
2
3
4
5
"style": {
    "navigationBarTitleText": "首页",
    "navigationStyle": "custom",
    "transparentTitle": "auto"
}

其中

微信小程序只需要设置

1
"navigationStyle": "custom"

支付宝小程序只需要设置

1
2
"transparentTitle": "auto",
"titlePenetrate": "YES"

状态栏和导航栏

在沉浸式页面中我们要把状态栏和导航栏的位置让出来的话，使用如下方式

状态栏

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
    <view>
        <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
        <view> 状态栏下的文字 </view>
    </view>
</template>
<style>
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
</style>

注意

var(--status-bar-height)：此变量在微信小程序环境为固定 25px

导航栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
    <view>
		<!-- 这里是状态栏 -->
		<view class="status_bar"></view>
		<!-- 这里是导航 -->
		<view class="navigation_bar"></view>
    </view>
</template>
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.navigation_bar {
		height: 44px;
		width: 100%;
	}
</style>

注意

注意导航栏高度是44px，不是rpx。

不要使用--window-top，当沉浸式的时候值是0。

Tabbar

1
2
3
4
5
6
7
8
9
10
11
<template>
	<view>
        <!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px-->
		<view class="toTop"></view>
	</view>
</template>
<style>
	.toTop {
		bottom: calc(var(--window-bottom) + 10px);
	}
</style>

状态栏的高度

上文中状态栏官方默认的高度--status-bar-height的值是固定的25px。

这就导致不同型号的手机的状态栏的高度是不一样的，导致实际效果并不好。

导航栏在不同的型号上是不受影响的都是44px。

1
2
3
4
.status_bar {
    height: var(--status-bar-height);
    width: 100%;
}

JS中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
	export default {
		data() {
			return {
				windowInfo: {},
			}
		},
		computed: {},
		beforeMount() {
			this.windowInfo = uni.getWindowInfo()
		},
		onLoad() {},
		methods: {}
	}
</script>

状态栏设置

1
2
<!-- 这里是状态栏 -->
<view class="status_bar" :style="{height:windowInfo.statusBarHeight+'px'}"></view>

设置导航背景

1
2
3
4
5
"style": {
    "navigationBarTitleText": "首页",
    "navigationBarBackgroundColor": "#42b983",
    "navigationBarTextStyle": "white"
}

相关配置项：

属性 类型 默认值 描述 平台差异说明
navigationBarBackgroundColor HexColor #F8F8F8 导航栏背景颜色（同状态栏背景色） APP与H5为#F8F8F8，小程序平台请参考相应小程序文档
navigationBarTextStyle String black 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
navigationBarShadow Object 导航栏阴影，配置参考下方 导航栏阴影
navigationStyle String default 导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意 微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
titleImage String 导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址 支付宝小程序、H5、App
transparentTitle String none 导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 支付宝小程序、H5、APP
titlePenetrate String NO 导航栏点击穿透 支付宝小程序、H5

页面内容

uni-app 支持的通用 css 单位包括 px、rpx

  • px 即屏幕像素。

  • rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。

    以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

vue 页面支持下面这些普通 H5 单位，但在 nvue 里不支持：

  • rem: 根字体大小可以通过 page-meta 配置抖音小程序和飞书小程序：屏幕宽度/20、百度小程序：16px、支付宝小程序：50px。
  • vh: viewpoint height，视窗高度，1vh 等于视窗高度的 1%。
  • vw: viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%。

元素选择器里没有body，改为了page

设置整个页面的样式可以使用

1
2
3
page {
    background-color: skyblue;
}

图片加载

本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。

1
2
3
.bg {
	background-image: url('~@/static/logo.png');
}