小程序框架 unibest unocss 配置说明和案例解释

82 min read
// uno.config.ts
import {
  type Preset,
  defineConfig,
  presetUno,
  presetAttributify,
  presetIcons,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

import { presetApplet, presetRemRpx, transformerAttributify } from 'unocss-applet'

// @see https://unocss.dev/presets/legacy-compat
// import { presetLegacyCompat } from '@unocss/preset-legacy-compat'

const isMp = process.env?.UNI_PLATFORM?.startsWith('mp') ?? false

const presets: Preset[] = []
if (isMp) {
  // 使用小程序预设
  presets.push(presetApplet(), presetRemRpx())
} else {
  presets.push(
    // 非小程序用官方预设
    presetUno(),
    // 支持css class属性化
    presetAttributify(),
  )
}
export default defineConfig({
  presets: [
    ...presets,
    // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        display: 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    // 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔，更好的兼容性app端，example：
    // `rgb(255 0 0)` -> `rgb(255, 0, 0)`
    // `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
    // 与群友的正常写法冲突，先去掉！（2024-05-25）
    // presetLegacyCompat({
    //   commaStyleColorFunction: true,
    // }) as Preset,
  ],
  /**
   * 自定义快捷语句
   * @see https://github.com/unocss/unocss#shortcuts
   */
  shortcuts: [['center', 'flex justify-center items-center']],
  transformers: [
    // 启用 @apply 功能
    transformerDirectives(),
    // 启用 () 分组功能
    // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
    transformerVariantGroup(),
    // Don't change the following order
    transformerAttributify({
      // 解决与第三方框架样式冲突问题
      prefixedOnly: true,
      prefix: 'fg',
    }),
  ],
  rules: [
    [
      'p-safe',
      {
        padding:
          'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
      },
    ],
    ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
  ],
})

/**
 * 最终这一套组合下来会得到：
 * mp 里面：mt-4 => margin-top: 32rpx  == 16px
 * h5 里面：mt-4 => margin-top: 1rem == 16px
 *
 * 如果是传统方式写样式，则推荐设计稿设置为 750，这样设计稿1px，代码写1rpx。
 * rpx是响应式的，可以让不同设备的屏幕显示效果保持一致。
 */

1. 使用 shortcuts 和 presetAttributify

配置：

在配置文件中，定义了一个快捷语句 center，表示 flex justify-center items-center。还启用了 presetAttributify，允许通过 HTML 属性来直接设置样式。

实例：

<div class="center h-16 bg-blue-500 text-white">
  <p class="text-xl">居中显示的文本</p>
</div>

解释：

  • 这里的 class="center" 实际上是 flex justify-center items-center 的简写，这使得内部元素居中显示。
  • h-16 设置高度为 16 个单位，bg-blue-500 设置背景为蓝色，text-white 设置文本颜色为白色。

也可以通过 presetAttributify 直接用属性写样式：

<div flex="~ col" justify="center" items="center" h-16 bg="blue-500" text="white">
  <p text="xl">通过属性样式居中</p>
</div>

解释：

  • flex="~ col" 表示使用 flex 布局并设置为列方向。
  • justify="center" 和 items="center" 用于水平和垂直居中。
  • h-16 设置高度，bg="blue-500" 设置背景颜色，text="white" 设置文本颜色。

2. 使用 presetIcons

配置：

配置文件中启用了 presetIcons，可以使用 iconify 的图标。还设置了图标缩放为 1.2 倍。

实例：

<button class="i-carbon-sun text-xl"></button>
<button class="i-carbon-moon dark:i-carbon-sun text-xl"></button>

解释：

  • i-carbon-sun 使用了 @iconify-json/carbon 中的 sun 图标。
  • 第二个按钮使用 dark:i-carbon-moon，表示在 dark 模式下切换为 moon 图标。图标尺寸通过 text-xl 控制，文本大小为 xl。
  • presetIcons 自动为图标加上了缩放和对齐样式。

3. 使用 transformerVariantGroup 和 transformerDirectives

配置：

在配置中启用了 transformerVariantGroup，允许将多个 CSS 类组合在一起。另外启用了 transformerDirectives，可以使用 @apply 来应用预设样式。

实例：

<div class="hover:(bg-gray-400 font-medium) font-(light mono) p-4">
  测试 unocss 的分组功能
</div>

解释：

  • hover:(bg-gray-400 font-medium) 在 hover 状态下设置背景色为灰色，同时设置字体为 medium 粗度。
  • font-(light mono) 组合了 light 和 mono 两种字体设置。
  • p-4 设置 padding 为 4 个单位。

使用 @apply 指令：

<style>
  .custom-style {
    @apply bg-blue-500 text-white p-4 rounded-lg;
  }
</style>
<div class="custom-style">
  应用 @apply 指令的样式
</div>

解释：

  • @apply 指令用于将 bg-blue-500、text-white、p-4 和 rounded-lg 应用于 .custom-style 类，这样可以重用预设样式。

4. 使用 transformerAttributify 配置前缀

配置：

启用了 transformerAttributify，并将属性化的前缀设置为 fg-，防止与其他框架的样式冲突。

实例：

<div fg-flex="~ col" fg-justify="center" fg-items="center" fg-bg="green-500" fg-text="white">
  使用前缀 'fg-' 防止冲突
</div>

解释：

  • 使用了 fg-flex、fg-justify、fg-items 等属性，这些属性通过 fg- 前缀来防止与其他样式冲突。
  • fg-bg="green-500" 设置背景颜色为绿色，fg-text="white" 设置文本颜色为白色。

5. 使用 presetApplet 和 presetRemRpx

配置：

在小程序环境中，使用了 presetApplet() 和 presetRemRpx()，将 rem 转换为 rpx。

实例（小程序环境）：

<div class="mt-4 text-xl bg-red-500 p-4">
  小程序中的样式实例
</div>

解释：

  • 在小程序环境中，mt-4 会转换为 margin-top: 32rpx，即 16px。
  • text-xl 会转换为相应的字体大小，适应小程序环境的单位。

6. 使用自定义规则 p-safe, pt-safe, pb-safe

配置：

定义了安全区域相关的样式规则，适用于有安全区域的设备（如 iPhone X 上的刘海屏）。

实例：

<div class="p-safe bg-blue-500 text-white">
  适配安全区域的内容
</div>
<div class="pt-safe pb-safe">
  仅调整上下安全区域的内容
</div>

解释：

  • p-safe 使用了 env(safe-area-inset-*) 来适配设备的安全区域，确保内容不被遮挡。
  • pt-safe 和 pb-safe 仅设置顶部和底部的 padding，适应安全区域。

这些实例展示了如何根据配置文件中的各项设置来编写实际的代码，帮助在项目中更高效地使用 Unocss 的功能。