当前位置：首页 > uni-app

uniapp 官方样式

2026-02-06 06:17:55uni-app

Uniapp 官方样式介绍

Uniapp 提供了一套内置的官方样式库，主要用于快速构建跨平台应用界面。这些样式基于微信小程序的 WeUI 设计规范，并进行了跨平台适配。

内置基础样式

Uniapp 内置了基础 CSS 样式，包括：

页面背景色
字体大小
边距
弹性布局
文本对齐等

在项目中可以直接使用这些基础样式类，无需额外引入。

常用样式类

布局相关

.flex {
  display: flex;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

边距相关

.m-10 {
  margin: 10px;
}
.p-20 {
  padding: 20px;
}

文本相关

.text-center {
  text-align: center;
}
.text-bold {
  font-weight: bold;
}

使用官方样式

在页面中直接添加 class 即可使用：

<view class="flex flex-center p-20">
  <text class="text-bold">Hello Uniapp</text>
</view>

主题色变量

Uniapp 提供了主题色变量，可以在全局样式文件中使用：

:root {
  --primary-color: #007AFF;
  --success-color: #4CD964;
  --warning-color: #F0AD4E;
  --error-color: #DD524D;
}

注意事项

官方样式在不同平台可能会有细微差异
如需深度定制，建议在 App.vue 中重写全局样式
移动端适配建议使用 rpx 单位
可通过修改 manifest.json 配置默认样式行为

扩展样式方案

对于更复杂的样式需求，可以考虑：

uniapp 官方样式

引入第三方 UI 库如 uView
使用 Sass/Less 预处理器
创建项目专属的样式工具类库

标签: 样式官方

分享给朋友：

网页制作 css样式

CSS样式基础 CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。以下为关键知识点和实用方法：选择器与样式规则 CSS通过选择器定位HTML元素并应用样式： /*…

uniapp布局样式

uniapp布局样式基础 uniapp基于Vue.js框架，支持多种布局方式，包括Flex布局、Grid布局和传统盒模型布局。样式编写遵循CSS规范，同时支持rpx响应式单位。 Flex布局示例…

vue实现多选添加样式

Vue 实现多选添加样式的方法在 Vue 中实现多选并添加样式可以通过多种方式完成，以下是几种常见的实现方法：使用 v-for 和 v-model 结合通过 v-for 渲染列表项，结合 v-…

vue中样式的实现

Vue 中样式的实现方式 Vue 提供了多种样式实现方式，可以根据项目需求灵活选择。组件内样式（Scoped CSS）在单文件组件（.vue 文件）的 <style> 标签中添加 s…

引入css样式制作网页

引入CSS样式的三种主要方法内联样式直接在HTML元素的style属性中编写CSS，适用于单个元素的快速样式设定： <p style="color: red; font-size:…

css制作样式

CSS 样式制作方法 CSS（层叠样式表）用于控制网页的样式和布局。以下是几种常见的 CSS 样式制作方法。内联样式直接在 HTML 元素的 style 属性中编写 CSS 规则。 <p…

uniapp 官方样式