微信小程序案例改写：字体和文本样式设置——从内联 style 到 class 的样式管理实践
本文基于《微信小程序开发》课程案例 2.1《字体和文本样式属性》改写。核心内容：将 WXML 中用
style属性指定的静态样式抽取为 WXSS 中的class，并扩充页面内容实现超一屏滚动显示。适合正在学习小程序 WXML/WXSS 样式的同学阅读。
一、案例背景
本案例演示一个小程序，通过style属性和class属性两种方式设置字体和文本样式，同时演示app.wxss（全局样式）和index.wxss（页面样式）两个文件中样式类的定义与引用方法。
案例展示的内容是中国共产党第二十次全国代表大会的会议主题。原案例中，标题部分使用style属性写内联样式：
<viewstyle="font-size:larger;font-weight:bolder;text-align:center;color:red;">中共二十大会议主题</view>这种写法虽然能实现效果，但存在明显问题：
- 影响渲染性能：
style属性在运行时会被动态解析，每渲染一次都要解析一遍； - 不利于维护：样式和结构混在一起，想改样式需要翻 WXML 源码；
- 无法复用：其他组件要用同样的样式，只能复制粘贴。
因此本次作业对案例进行改写：把静态样式从style中抽取出来，定义成 WXSS 中的class，WXML 中通过class引用。
二、改写要点一：style → class
2.1 抽取样式，定义 class
把原 WXML 中的内联样式：
style="font-size: larger;font-weight: bolder;text-align: center;color: red;"抽取到index.wxss中，定义为一个类：
.section-title{font-size:larger;font-weight:bolder;text-align:center;color:red;}WXML 中改为通过class引用：
<viewclass="section-title">中共二十大会议主题</view>2.2 class 命名规范
class 命名不使用驼峰写法，多个单词之间用短横线（-）连接，即 kebab-case（烤肉串式）命名。这是前端样式命名的事实标准，与 CSS 属性名（如text-align）风格保持一致。
| ❌ 不规范（驼峰） | ✅ 规范（kebab-case） |
|---|---|
sectionTitle | section-title |
txtBodyIndent | txt-body-indent |
scrollArea | scroll-area |
本次改写中使用的类名清单：
| class 名称 | 作用 | 定义位置 |
|---|---|---|
box | 容器外边距、内边距、边框 | app.wxss（全局样式） |
scroll-area | 滚动区域，占满剩余高度 | index.wxss（页面样式） |
section-title | 大会主题标题（由 style 抽取而来） | index.wxss |
txt-style | 主题正文样式（原案例已有） | index.wxss |
section-sub-title | 报告小节标题 | index.wxss |
txt-body | 报告正文段落 | index.wxss |
txt-body-indent | 首行缩进（与txt-body组合使用） | index.wxss |
txt-footer | 文末出处说明 | index.wxss |
其中txt-body txt-body-indent的组合展示了小程序组件一个 class 属性可以引用多个类的用法，这也是抽取样式后带来的复用红利。
三、改写要点二：增加内容，实现超一屏滚动
原案例只有大会主题一段文字，不满一屏。本次改写增加了二十大报告内容摘选（过去五年的工作和新时代十年的伟大变革、开辟马克思主义中国化时代化新境界、新时代新征程中国共产党的使命任务三个小节），使页面内容超过一屏，可以滚动显示。
3.1 滚动区域的布局原理
页面采用「满屏 + flex 纵向布局」的方式搭建滚动骨架：
/* 页面容器：占满一屏高度，纵向 flex 布局 */page{height:100vh;display:flex;flex-direction:column;}/* 滚动区域：flex: 1 占满剩余高度，内容超出时滚动 */.scroll-area{flex:1;overflow-y:hidden;}page设置height: 100vh，让页面正好占满一屏；.scroll-area通过flex: 1吃掉导航栏之外的所有剩余高度；- WXML 中使用
<scroll-view>组件并开启scroll-y，内容超出时即可纵向滚动。
<scroll-viewclass="scroll-area"scroll-ytype="list"><!-- 超出一屏的内容 --></scroll-view>3.2 滚动效果
新增内容约 8 段文字加 3 个小节标题，总高度明显超过一屏。运行时上下滑动屏幕（或鼠标滚轮），即可在scroll-view内部滚动查看全部内容。
四、完整代码
4.1 app.json
{"pages":["pages/index/index"],"window":{"navigationBarTextStyle":"black","navigationStyle":"custom"},"renderer":"webview","style":"v2","sitemapLocation":"sitemap.json","lazyCodeLoading":"requiredComponents"}4.2 index.wxml（改写后）
<!--pages/index/index.wxml--><navigation-bartitle="字体和文本样式设置"back="{{false}}"color="black"background="white"></navigation-bar><scroll-viewclass="scroll-area"scroll-ytype="list"><viewclass="box"><!-- 大会主题：原 style 内联样式已抽取为 section-title 类 --><viewclass="section-title">中共二十大会议主题</view><viewclass="txt-style">高举中国特色社会主义伟大旗帜，全面贯彻新时代中国特色社会主义思想，弘扬伟大建党精神，自信自强、守正创新，踔厉奋发、勇毅前行，为全面建设社会主义现代化国家、全面推进中华民族伟大复兴而团结奋斗。</view><!-- 新增内容：二十大报告内容摘选 --><viewclass="section-sub-title">一、过去五年的工作和新时代十年的伟大变革</view><viewclass="txt-body txt-body-indent">五年来，我们党团结带领人民，攻克了许多长期没有解决的难题，办成了许多事关长远的大事要事，推动党和国家事业取得举世瞩目的重大成就。</view><viewclass="txt-body txt-body-indent">十年来，我们经历了对党和人民事业具有重大现实意义和深远历史意义的三件大事：一是迎来中国共产党成立一百周年，二是中国特色社会主义进入新时代，三是完成脱贫攻坚、全面建成小康社会的历史任务，实现第一个百年奋斗目标。这是中国共产党和中国人民团结奋斗赢得的历史性胜利，是彪炳中华民族发展史册的历史性胜利，也是对世界具有深远影响的历史性胜利。</view><viewclass="txt-body txt-body-indent">新时代十年的伟大变革，在党史、新中国史、改革开放史、社会主义发展史、中华民族发展史上具有里程碑意义。</view><viewclass="section-sub-title">二、开辟马克思主义中国化时代化新境界</view><viewclass="txt-body txt-body-indent">马克思主义是我们立党立国、兴党兴国的根本指导思想。实践告诉我们，中国共产党为什么能，中国特色社会主义为什么好，归根到底是马克思主义行，是中国化时代化的马克思主义行。</view><viewclass="txt-body txt-body-indent">不断谱写马克思主义中国化时代化新篇章，是当代中国共产党人的庄严历史责任。继续推进实践基础上的理论创新，首先要把握好新时代中国特色社会主义思想的世界观和方法论，坚持好、运用好贯穿其中的立场观点方法。</view><viewclass="section-sub-title">三、新时代新征程中国共产党的使命任务</view><viewclass="txt-body txt-body-indent">从现在起，中国共产党的中心任务就是团结带领全国各族人民全面建成社会主义现代化强国、实现第二个百年奋斗目标，以中国式现代化全面推进中华民族伟大复兴。</view><viewclass="txt-body txt-body-indent">中国式现代化，是中国共产党领导的社会主义现代化，既有各国现代化的共同特征，更有基于自己国情的中国特色。中国式现代化是人口规模巨大的现代化，是全体人民共同富裕的现代化，是物质文明和精神文明相协调的现代化，是人与自然和谐共生的现代化，是走和平发展道路的现代化。</view><viewclass="txt-footer">全文摘自《高举中国特色社会主义伟大旗帜 为全面建设社会主义现代化国家而团结奋斗——在中国共产党第二十次全国代表大会上的报告》</view></view></scroll-view>可以看到，改写后的 WXML 中没有任何style属性，所有样式都通过class引用。
4.3 app.wxss（全局样式）
/**app.wxss**//* 全局样式：定义在 app.wxss 中的 class 可以被所有页面使用 */.box{/* 外边距 */margin:20rpx;/* 内边距 */padding:20rpx;/* 边框：粗细 样式 颜色 */border:2rpx solid silver;}4.4 index.wxss（页面样式，改写后）
/**index.wxss**//* 页面容器：占满一屏高度，纵向 flex 布局 */page{height:100vh;display:flex;flex-direction:column;}/* 滚动区域 */.scroll-area{flex:1;overflow-y:hidden;}/* 大会主题标题：由 style 内联样式抽取而来 */.section-title{font-size:larger;font-weight:bolder;text-align:center;color:red;}/* 主题正文样式（原案例已有） */.txt-style{font-size:x-large;/* 字体大小 */font-family:楷体;/* 字体 */color:blue;/* 文本颜色 */letter-spacing:10rpx;/* 字符间距 */text-align:justify;/* 水平对齐 */text-indent:2em;/* 首行缩进 */text-decoration:underline;/* 文本装饰 */text-decoration-color:#9f9;/* 文本装饰颜色 */line-height:60rpx;/* 行高 */}/* 报告小节标题 */.section-sub-title{margin-top:30rpx;font-size:40rpx;font-weight:bold;color:#2c3e50;text-align:center;}/* 报告正文段落 */.txt-body{margin-top:20rpx;font-size:32rpx;color:#333333;text-align:justify;line-height:56rpx;}/* 首行缩进：与 txt-body 组合使用 */.txt-body-indent{text-indent:2em;}/* 文末出处说明 */.txt-footer{margin-top:30rpx;padding-top:20rpx;border-top:2rpx dashed silver;font-size:26rpx;color:#999999;text-align:right;line-height:40rpx;}五、知识要点总结
- 组件样式的设置方法：在 WXML 中通过组件的
style属性和class属性设置样式。 - 什么时候用 style，什么时候用 class：
style一般用在需要动态设置的场景（如配合数据绑定style="color: {{color}}"）；class用于静态样式。style在运行时会进行解析，静态样式写进style会影响渲染速度，应尽量避免。
- 全局样式与页面样式：
app.wxss中的样式是全局样式，可以被所有页面使用；index.wxss是页面样式，只能被本页面使用；- 对相同的设置项，页面 wxss 中的样式会覆盖 app.wxss 中的设置。
- class 命名规范：kebab-case（单词间短横线连接），不用驼峰，例如
section-title、txt-body-indent。 - 滚动实现：
page满屏 + flex 纵向布局，scroll-view开启scroll-y并占据剩余空间，内容超出一屏即可滚动。
六、写在最后
这次改写让我体会到：好的样式管理习惯是从一开始养成的——静态样式一律走 class，动态样式才用 style。把样式从结构中分离出来后，WXML 变得更干净，样式集中管理、易于复用，渲染性能也更好。本文完整源码已打包，欢迎交流指正。
本文为《微信小程序开发》课程案例 2.1 的作业改写记录，代码在微信开发者工具（WebView 渲染引擎）中运行验证。
