uniapp 官方样式
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 配置默认样式行为
扩展样式方案
对于更复杂的样式需求，可以考虑：
- 引入第三方 UI 库如 uView
- 使用 Sass/Less 预处理器
- 创建项目专属的样式工具类库
