【亲测免费】 unocss-preset-weapp 技术文档

安装指南

要开始使用 unocss-preset-weapp，首先确保您已经安装了 UnoCSS 核心库。然后，可以通过 npm 或 yarn 添加此预设：

npm install unocss unocss-preset-weapp --save
# 或者，如果您偏好 yarn
yarn add unocss unocss-preset-weapp

对于特定框架的示例，如 uni-app 或 Taro，确保相应环境也已设置。

项目的使用说明

对于 Uni-App (Vue2/Vue3)

• Uni-App Vue2 示例: 查看 uniapp_vue2 示例目录
• Uni-App Vue3 示例: 参考 uniapp_vue3 示例目录

在您的 unocss.config.js 文件中，集成该预设：

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

export default defineConfig({
  presets: [presetWeapp()],
});

对于 Taro

对于使用 React, Vue2 或 Vue3 的 Taro 应用，参照 taro_webpack4_vue3 示例目录。

原生微信小程序

原生小程序支持也不落下，详情查阅 unocss-wechat 示例。

项目API使用文档

PresetWeappOptions 配置接口允许高度定制，以下是关键参数：

• transform: 控制是否转换微信特有的类名，默认开启。
• platform: 指定平台 (uniapp 或 taro)，默认为 uniapp。
• designWidth: Taro H5 的设计宽度，默认为 750px。
• deviceRatio: 设备分辨率比例映射，默认值覆盖常见设备。
• taroWebpack: 专为处理 Taro Webpack 版本差异，默认 webpack4。
• isH5: 表明是否为 H5 环境，默认否。
• transformRules: 允许自定义或覆写类名转换规则。

示例配置：

import presetWeapp from 'unocss-preset-weapp';

export default defineConfig({
  presets: [
    presetWeapp({
      platform: 'taro', // 如果你的项目是 Taro
      transformRules: {
        '.custom-rule': '-custom-rul-e', // 自定义转换规则
      },
    }),
  ],
});

项目安装方式（重复信息）

再次强调基本安装命令，确保正确引入：

npm install unocss unocss-preset-weapp --save
# 或
yarn add unocss unocss-preset-weapp

利用上述指导，您可以轻松地在各种小程序或前端框架下集成 unocss-preset-weapp，享受快速且高效的原子级 CSS 编码体验。