uni-app小程序开发常用配置项配置

2024-07-11 09:58:35 浏览数 (2)

页面配置

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

先看一个整体的配置

代码语言：javascript复制
{
	"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是全局样式配置。

隐藏导航/沉浸式页面

代码语言：javascript复制
"style": {
    "navigationBarTitleText": "首页",
    "navigationStyle": "custom",
    "transparentTitle": "auto"
}

其中

微信小程序只需要设置

代码语言：javascript复制
"navigationStyle": "custom"

支付宝小程序只需要设置

代码语言：javascript复制
"transparentTitle": "auto"

状态栏和导航栏

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

状态栏

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

代码语言：javascript复制
<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

导航栏

代码语言：javascript复制
<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

代码语言：javascript复制
<template>
	<view>
        <!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px-->
		<view class="toTop"></view>
	</view>
</template>
<style>
	.toTop {
		bottom: calc(var(--window-bottom)   10px);
	}
</style>

设置导航背景

代码语言：javascript复制
"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

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

代码语言：javascript复制
page {
    background-color: skyblue;
}

图片加载

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

代码语言：javascript复制
.bg {
	background-image: url('~@/static/logo.png');
}
app 变量 开发 配置 小程序

0 人点赞