1. 为什么要把 style 改成 class在微信小程序开发中很多初学者习惯直接在 WXML 里用 style 属性写样式。这种写法在页面简单时确实方便但随着页面复杂度上升问题会逐渐暴露样式代码散落在结构里难以复用修改一处样式可能要翻遍整个文件。本博客以课件《字体和文本样式设置》中的《字体和文本样式属性》案例为起点分享如何把内联 style 优雅地重构为 class 方式让代码更清晰、更易维护。2. 内联 style 的痛点以课件中的案例为例原本的写法是在每个 text 标签上直接通过 style 属性指定字号和颜色例如给文本设置 20px 的红色、16px 的蓝色、14px 的绿色等。这种把样式写在结构里的方式在页面元素少时还能接受一旦元素增多问题就会显现出来。这段代码的问题很明显每个 text 的样式都要单独写一遍如果某个字号或颜色要调整需要逐个修改如果多个文本需要相同样式只能复制粘贴一旦需求变化维护成本成倍增加。样式与结构耦合在一起也让 WXML 的可读性大打折扣。3. class 方式的优势改用 class 之后样式被统一收拢到 WXSS 文件中WXML 只负责结构WXSS 只负责表现职责分离各司其职。这样做带来的好处包括可复用同一个样式类可以被多个元素引用一处定义多处生效。易维护修改样式只需改动 WXSS 中的一处不必在 WXML 里逐个查找。更清晰WXML 结构简洁class 名称本身就能表达样式意图代码可读性显著提升。4. class 命名规范横杠连接在给 class 命名时推荐使用横杠-连接多个单词而不是驼峰写法。例如表示“红色大字”的样式类应命名为 red-large-text而不是 redLargeText。横杠命名在 CSS 社区是主流约定视觉上更易区分单词边界也符合微信小程序官方的代码风格建议。保持一致的命名规范能让团队协作时减少沟通成本。5. 重构后的 WXML 与 WXSS重构后的 WXML 只保留结构和 class 引用每个 text 通过 class 属性引用对应的样式类例如红色大字使用 red-large-text、蓝色中字使用 blue-medium-text、绿色小字使用 green-small-text并在此基础上增加了加粗、斜体、下划线、删除线、阴影、字间距、行高、字体族和对齐方式等更多样式示例。对应的 WXSS 文件则统一定义所有样式类包括容器布局、各文本的字号、颜色以及特殊效果。这样样式与结构彻底分离WXML 中不再出现任何内联样式所有表现层面的规则都集中管理在 WXSS 中后续调整样式只需修改对应 class 即可。6. 让内容超过一屏滚动展示为了让页面内容超过一屏并支持滚动显示我们在案例中增加了更多文本样式示例包括加粗、斜体、下划线、删除线、阴影、字间距、行高、字体族和对齐方式等。同时在 WXSS 中为容器设置了合适的 padding 和间距确保内容自然溢出屏幕高度。在微信小程序中页面默认支持纵向滚动。当内容高度超过屏幕高度时用户即可通过手指滑动查看下方内容。无需额外配置 scroll-view 组件普通 view 容器即可实现滚动效果。这样既丰富了案例的展示效果也验证了 class 方式在内容增多时依然能保持结构清晰。7. 效果预览运行上述代码后页面将依次展示十二种不同样式的文本。由于内容较多页面会超出屏幕高度用户可以通过滚动查看全部效果。每种文本的字体、颜色、字号以及特殊效果加粗、斜体、下划线等均由 WXSS 中的 class 统一定义结构清晰便于后续维护和扩展。8. 总结从 style 到 class 的转变表面上是写法的变化本质上是工程化思维的体现。将样式从结构中剥离统一管理、按需复用是构建可维护小程序代码的重要一步。配合横杠命名的规范代码的可读性和协作效率都会明显提升。希望这个案例能帮助你养成好的样式组织习惯在后续开发中写出更优雅的小程序代码。