【原子样式实践】第5篇 为微信小程序生成原子样式

原子样式的web实现有很多,tailwind, windy, unocss 等。原子样式使用最麻烦的地方是在动态生成上,而这与工程类型、IDE皆有关系。如果原子样式项目是集成到某个项目的,事情就会变得更加复杂,实现进度和完成度都会滞后。而这,与原子样式本身的简洁特点是不符合的。

1 类似工具支持情况

1.1 快速使用

到目前为止,还没有特别适合微信原生小程序的原子样式生成工具。我们可以从现有工具的特点吸收优点进行改进。

(1) windicss ,在 CLI 模式下,一行命令安装,一行命令生成代码。

npm i -g windicss
windicss './**/*.wxml' -to windi.css

CLI 模式下使用已经是极简。其他模式下配置也不复杂。

但生成的结果不理想,没有针对微信小程序优化,编译器报告 wxss 编译错误。

(2)unocss 通过 CLI 方式在 windows powershell 下运行失败,适配还没有完全做好。

1.2 问题分析

当然,主要原因是微信内置的浏览器不是标准的WEB浏览器,各工具没有完全适配。这一点会随着标准的公开和时间的推进而越来越好。

就小程序而言,要快而小,样式无需太复杂,在手机上是全屏运行,场景更加简单。微信小程序的原子样式工具应该更加简单。

2 工具研发

2.1 特定需求

(1)​​app.wxss​​ 为全局样式,默认启用。

(2)页面根元素使用 ​​page​​​,而不是 ​​body​​。

(3)页面样式属性对应 ​​class ​​​和​​ hover-class​​​ 和  ​​placeholder-class​​。

2.2 建设思路

基于上一篇通过样式生成css代码的函数,生成微信小程序所需的样式代码,只需要从样式文件中提取样式名称即可。

提取样式只需解析 wxml 文件,从匹配的样式属性中提取样式名称,去重即可。

2.3 技术实现

本地文件 wxmp-atomic-css-generate.ts

import {htmltok, TokenType} from 'https://deno.land/x/htmltok@v0.0.3/mod.ts';

const RootDir = "./miniprogram"
const ConfigFileName = `${RootDir}/app.json`

interface CountMap {
[index: string]: number
}

const fullPagePath = (page: string): string => `${RootDir}/${page}.wxml`

const isClassAttr = (attrName: string): boolean => attrName == "class" || attrName == "hover-class" || attrName == "placeholder-class"

const readWxmpPages = (app: any): string[] => [...app.pages, ...app.subpackages.map((pkg: any) => pkg.pages.map((page: string) => `${pkg.root}/${page}`)).flat()]

const extraClassItem = (className: string): string[] => {
if (className == "" || className.length <= 2) {
return []
}
if (className.match(/^[sda-z-\.]+$/)) {
return className.trim().split(/s+/)
}
const result = className.trim().match(/[w-]+/g)
if(!result) {
return []
}
return result.filter(m=> m.length > 1 && !/[A-Z]/.test(m))
}

const parseClassItem = (page: string, countMap: CountMap) => {
const xml = Deno.readTextFileSync(fullPagePath(page))
let attrName = ""
for (const token of htmltok(xml)) {
if (token.type == TokenType.ATTR_NAME) {
attrName = token.getValue()
} else if (isClassAttr(attrName) && token.type == TokenType.ATTR_VALUE) {
const items = extraClassItem(token.getValue())
items.forEach((s:string)=> {
countMap[s] = (countMap[s] || 0) + 1
})
}
}
}

const readAllClassItems = async () => {

const classNameMap: CountMap = {}
const pages = await Deno.readTextFile(ConfigFileName)
.then((data: string) => readWxmpPages(JSON.parse(data)))
.then((pages: any) => pages.map((page: string) => parseClassItem(page, classNameMap)))
return [...Object.keys(classNameMap)]
}

const classItems = await readAllClassItems()
console.log(classItems)

 执行命令

deno run --allow-read ./wxmp-atomic-css-generate.ts

也可以将 wxmp-atomic-css-generate.ts 文件放到代码仓库,在小程序代码下直接执行。

3 小结

发表评论

相关文章