uni-app小程序开发常用配置项配置
页面配置
https://uniapp.dcloud.net.cn/collocation/pages.html#pages
先看一个整体的配置
{
"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是全局样式配置。
隐藏导航/沉浸式页面
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom",
"transparentTitle": "auto"
}其中
微信小程序只需要设置
"navigationStyle": "custom"支付宝小程序只需要设置
"transparentTitle": "auto"状态栏和导航栏
在沉浸式页面中我们要把状态栏和导航栏的位置让出来的话，使用如下方式
状态栏
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>注意
var(--status-bar-height)：此变量在微信小程序环境为固定25px
导航栏
<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
<template>
<view>
<!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px-->
<view class="toTop"></view>
</view>
</template>
<style>
.toTop {
bottom: calc(var(--window-bottom) + 10px);
}
</style>设置导航背景
"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
设置整个页面的样式可以使用
page {
background-color: skyblue;
}图片加载
本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
.bg {
background-image: url('~@/static/logo.png');
}腾讯云开发者
