技术栈
小程序原生框架 + TS + unocss + biome
示例
依赖安装
npm install -D unocss
开始
- 在根目录下新建文件unocss.config.{js.ts}
import type { Preset, Rule } from 'unocss'
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import presetRemToRpx from './preset-rem-to-rpx'
const sizeMapping: Record<string, string> = {
fs: 'font-size'
}
function getSizeRules(Mapping: Record<string, string>): Rule[] {
return Object.keys(Mapping).map(key => {
const value = Mapping[key]
return [new RegExp(
^${key}-(\d+)$
), ([, d]) => ({ [value]:
${d}rpx
})]
})
}
export default defineConfig({
presets: [
presetAttributify(),
presetUno(),
presetRemToRpx({
baseFontSize: 4
}) as Preset
],
theme: {
preflightRoot: ['page,::before,::after']
},
rules: getSizeRules(sizeMapping),
include: [/.axml$/]
})
- 根目录新建preset-rem-to-rpx.ts，配置px转rpx
const remRE = /(-?[.\d]+)rem/g
interface Options {
baseFontSize?: number
}
function remToRpxPreset(options: Options = {}) {
const { baseFontSize = 16 } = options
return {
name: '@unocss/preset-rem-to-rpx',
postprocess: util => {
// biome-ignore lint/complexity/noForEach: <explanation>
util.entries.forEach(i => {
const value = i[1]
if (value && typeof value === 'string' && remRE.test(value))
i[1] = value.replace(remRE, (_, p1) =>
${p1 * baseFontSize}rpx
)
})
}
}
}
export { remToRpxPreset as default }
- package.json添加unocss cli处理脚本，监听项目下的axml文件，将原子化css编译到根目录unocss.acss文件
{
"name": "alipay-miniprogram",
"version": "1.0.0",
"scripts": {
"unocss": "unocss ./
/*.axml -c unocss.config.ts --watch -o unocss.acss",
** "unocss:build": "unocss ./**
/*.axml -c unocss.config.ts -o unocss.acss"
},
"devDependencies": {
"unocss": "^0.61.8"
}
}
- 在app.acss引入unocss.acss
@import "./unocss.acss";
page {
background: #f7f7f7;
}
- 配置mini.project.json文件, 使用scripts预处理能力，小程序编译时启动unocss服务，热更新也会更新unocss.acss文件（开启预处理之后即可在小程序编译时就开启unocss cli编译，不需要手动run）
{
"format": 2,
"developOptions": {
"hotReload": true
},
"compileOptions": {
"component2": true,
},
"scripts": {
"watch": "npm run unocss",
"beforeUpload": "npm run unocss:build"
}
}
