uniapp 官方样式

Uniapp 官方样式规范

Uniapp 提供了一套默认的样式规范，旨在统一多端开发体验。这些样式基于微信小程序的 WXSS 规范，并扩展支持其他平台。

基础样式

Uniapp 内置的基础样式包括：

• 默认字体：-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue"
• 默认字号：14px
• 默认行高：1.4
• 默认颜色：#333333

这些基础样式会自动应用到所有页面，开发者可以通过修改 app.vue 中的全局样式进行覆盖。

单位系统

Uniapp 使用 rpx 作为响应式单位：

• 1rpx 等于屏幕宽度的 1/750
• 设计稿通常按照 750rpx 宽度进行设计
• 换算公式：px = rpx * (屏幕宽度 / 750)

对于需要固定尺寸的场景，可以使用 px 单位。

颜色系统

官方推荐的配色方案：

• 主色：#007AFF（蓝色）
• 成功色：#4CD964（绿色）
• 警告色：#FF9500（橙色）
• 错误色：#FF3B30（红色）
• 文字色：#333333（主文字），#666666（常规文字），#999999（次要文字）
• 背景色：#F7F7F7（页面背景），#FFFFFF（组件背景）

组件默认样式

常见组件的默认样式值：

• 按钮：高度 92rpx，圆角 6rpx，默认内边距 0 32rpx
• 输入框：高度 72rpx，默认边框 1rpx solid #e5e5e5
• 列表项：高度 96rpx，左右边距 32rpx
• 标签栏：高度 100rpx，图标尺寸 54rpx

全局样式变量

Uniapp 支持通过 CSS 变量定义全局样式：

:root {
  --primary-color: #007AFF;
  --success-color: #4CD964;
  --warning-color: #FF9500;
  --error-color: #FF3B30;
  --text-color: #333333;
  --border-color: #e5e5e5;
}

样式重置

Uniapp 会对部分 HTML 元素进行样式重置：

• box-sizing: border-box 全局应用
• body 元素默认边距清零
• a 标签颜色继承父级
• img 标签默认去除边框

多端适配建议

针对不同平台的样式适配：

• H5 端可使用 postcss 进行自动转换
• 小程序端注意 rpx 单位的兼容性
• APP 端可使用条件编译处理平台差异样式

最佳实践

推荐的样式编写方式：

• 使用 SCSS/LESS 预处理器管理样式
• 遵循 BEM 命名规范
• 提取公共样式到单独文件
• 避免使用过于复杂的选择器
• 合理使用 CSS 变量实现主题切换

以上规范可以帮助开发者保持应用样式的一致性和可维护性，同时确保在多端环境中获得良好的显示效果。