使用 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,提升开发效率和代码的可维护性。