Weapp Class

🌞 微信小程序原子化 CSS 库

参考 tailwindcss，使用 sass 开发，拿来即用的原子化 CSS 库

更多微信小程序开发工具，查看 微信小程序开发全家桶

使用

直接使用

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

具体类名参考 tailwindcss 或查看 dist 内的样式文件

使用 NPM

npm i weapp-class

注意：在小程序中使用npm包前，需先构建 npm

/* app.wxss */

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

<!-- index.wxml -->

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

删除未使用 css

使用 gulp-uncss，具体步骤如下：

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

// 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')))
}))

/* 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
2. 安装 gulp
3. 修改配置文件 config.js 内的各个配置项，执行 gulp dev 命令

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

# 安装所有依赖包
npm install

# 执行 gulp 命令
gulp dev

打包

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

注意事项

由于微信小程序有自己的响应式单位 rpx，有可能会有 rem 失效的问题，可以使用 page-meta 解决，或者修改配置文件 config.js 内的 rem2rpx 参数进行单位转换