【亲测免费】 使用 unocss-preset-weapp 预设在微信小程序中应用 UnoCSS

项目介绍

unocss-preset-weapp 是一个为微信小程序设计的 UnoCSS 预设。UnoCSS 是一个原子化的 CSS 框架，而此预设专门针对微信小程序进行了优化，解决了小程序中不兼容的 CSS 类名问题。通过使用此预设，开发者可以在微信小程序中更方便地使用 UnoCSS。

项目快速启动

安装依赖

首先，需要安装 unocss 和 unocss-preset-weapp：

npm add -D unocss unocss-preset-weapp

配置 unocss

在项目根目录下创建 unocss.config.ts 文件，并添加以下内容：

import { defineConfig } from 'unocss';
import presetWeapp from 'unocss-preset-weapp';

const include = [/\.wxml$/];

export default defineConfig({
  content: {
    pipeline: {
      include,
    },
  },
  presets: [
    presetWeapp(),
  ],
  separators: '__',
});

生成 wxss 文件

在 package.json 中添加脚本命令，用于监听 wxml 文件并生成 wxss 文件：

{
  "scripts": {
    "unocss": "unocss pages/**/*.wxml -c unocss.config.js --watch -o unocss.wxss"
  }
}

运行以下命令开始监听文件变化：

npm run unocss

应用案例和最佳实践

案例一：基本使用

在 wxml 文件中使用 UnoCSS 类名：

<view class="bg-hex-81ecec_50">
  <text class="text-red-500">Hello, UnoCSS!</text>
</view>

案例二：使用 hover 和 active 状态

通过设置分隔符，可以在类名中使用 hover 和 active 状态：

<button class="hover__bg-red-500 active__bg-blue-500">Click me</button>

典型生态项目

Taro

unocss-preset-weapp 也可以在 Taro 项目中使用，Taro 是一个多端统一开发框架，支持使用 React 开发微信小程序、H5、React Native 等。

UniApp

UniApp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到多个平台。unocss-preset-weapp 同样适用于 UniApp 项目。

通过以上步骤和案例，开发者可以快速在微信小程序中集成和使用 UnoCSS，提升开发效率和代码的可维护性。