# weapp-class

**Repository Path**: liiiiiiu/weapp-class

## Basic Information

- **Project Name**: weapp-class
- **Description**: 🌞 微信小程序原子化CSS库
- **Primary Language**: CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-08-12
- **Last Updated**: 2024-08-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Weapp Class

🌞 微信小程序原子化 CSS 库

参考 [tailwindcss](https://www.tailwindcss.cn/)，使用 [sass](https://sass-lang.com/documentation/) 开发，拿来即用的原子化 CSS 库

> 更多微信小程序开发工具，查看 [微信小程序开发全家桶](https://www.liiiiiiu.com/dev/weapp-dev-bucket)

## 使用

### 直接使用

将 dist 目录下的样式文件按需复制到项目内使用即可;

具体类名参考 [tailwindcss](https://www.tailwindcss.cn/) 或查看 dist 内的样式文件

### 使用 NPM

```bash
npm i weapp-class
```

> 注意：在小程序中使用npm包前，需先[构建 npm](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)

```css
/* app.wxss */

@import '../../miniprogram_npm/weapp-class/atomic.min.wxss';
```

```html
<!-- index.wxml -->

<view class="flex justify-center w-full mt-10 text-center">
  <text class="text-orange">Weapp Class</text>
</view>
```

### 删除未使用 css

使用 [gulp-uncss](https://github.com/ben-eb/gulp-uncss)，具体步骤如下：

1. 安装依赖 `npm install -D gulp@4.0.2 gulp-postcss@9.0.1 postcss-uncss`
2. 在项目根目录新增 gulpfile.js
3. 打开开发者工具右上角“详情”面板，选择“本地设置”，勾选“启用自定义处理命令”，在“预览前预处理”或“上传前预处理”中输入 `gulp uncss`，这样预览或上传前就会在指定目录生成新的样式文件
4. 上传代码前引入新的样式文件并注释掉旧的引入即可

```javascript
// gulpfile.js

const gulp = require('gulp')
const postcss = require('gulp-postcss')
const uncss = require('postcss-uncss')
const path = require('path')

const weappDir = './miniprogram'
const weappClassDir = `${weappDir}/miniprogram_npm/weapp-class`

gulp.task('uncss', gulp.series(function() {
  return gulp.src(path.join(weappClassDir, './atomic.min.wxss'))
    .pipe(postcss([
      uncss({
        html: [`${weappDir}/pages/**/*.wxml`]
      }),
    ]))
    .pipe(gulp.dest(path.join(weappClassDir, 'uncss')))
}))
```

```css
/* app.wxss */

/* @import '../../miniprogram_npm/weapp-class/atomic.min.wxss'; */
@import '../../miniprogram_npm/weapp-class/uncss/atomic.min.wxss';
```

## 定制

源码内所有样式依赖于 sass 的函数指令生成，最终通过 gulp 转换成 css 文件；

你可以根据现有源码开发出自己的 CSS 库：

* 自定义公共前缀
* 自定义分隔符
* 自定义样式名缩写
* 自定义主题

### 开发

1. 将源码克隆到本地 [Gitee](https://gitee.com/liiiiiiu/weapp-class)
2. 安装 gulp
3. 修改配置文件 config.js 内的各个配置项，执行 `gulp dev` 命令

```shell
# 进入源码根目录
cd weapp-class

# 安装所有依赖包
npm install

# 执行 gulp 命令
gulp dev
```

### 打包

执行 `gulp build` 命令，即可重新生成样式文件

### 注意事项

由于微信小程序有自己的响应式单位 rpx，有可能会有 rem 失效的问题，可以使用 [page-meta](https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html) 解决，或者修改配置文件 config.js 内的 `rem2rpx` 参数进行单位转换