使用技巧

开发习惯

文本样式

文本需要用 text 组件包裹再设置样式

<template>
	<view class="container">
		<!-- 文本需要用 text 组件包裹再设置样式-->
		<text class="title">文本</text>
	</view>
</template>

<style>
	.container {
		height: 100rpx;
		width: 100rpx;
		/* 无法像 web 中一样通过父容器给容器内文本设置样式 */
		/* font-size: 20rpx;
		color: red; */
	}

	.title {
		font-size: 18px;
		color: #8f8f94;
	}
</style>

样式相关

flex

目前 uniappx 仅支持使用 flex 进行页面布局。

uniappx 中内置组件几乎默认会加上 display: flex 和 flex-direction: column 两条属性。所以如下样式的主轴是纵向的。

使用 flex 布局可以省略 display: flex

/* 如下样式可能与 web 中表现不一致。会将子元素纵向居中对其 */
/* 由于 uniappx 中会给内置组件默认加上 display: flex 所以下面的声明 flex 布局的样式可以省略 */
display: flex;
/* 可通过 flex: 1 来实现默认占满父容器高度 */
flex: 1;
justify-content: center;

预设的 css 变量

/* uniappx 中预设了几个 css 变量可直接使用，如 --status-bar-height(获取设备状态栏的高度) 等 */
/* 其他变量可到官网查看(直接在官网搜索 CSS 方法即可) */
padding-top: var(--status-bar-height)