微信小程序案例改写字体和文本样式设置——从内联 style 到 class 的样式管理实践本文基于《微信小程序开发》课程案例 2.1《字体和文本样式属性》改写。核心内容将 WXML 中用style属性指定的静态样式抽取为 WXSS 中的class并扩充页面内容实现超一屏滚动显示。适合正在学习小程序 WXML/WXSS 样式的同学阅读。一、案例背景本案例演示一个小程序通过style属性和class属性两种方式设置字体和文本样式同时演示app.wxss全局样式和index.wxss页面样式两个文件中样式类的定义与引用方法。案例展示的内容是中国共产党第二十次全国代表大会的会议主题。原案例中标题部分使用style属性写内联样式viewstylefont-size:larger;font-weight:bolder;text-align:center;color:red;中共二十大会议主题/view这种写法虽然能实现效果但存在明显问题影响渲染性能style属性在运行时会被动态解析每渲染一次都要解析一遍不利于维护样式和结构混在一起想改样式需要翻 WXML 源码无法复用其他组件要用同样的样式只能复制粘贴。因此本次作业对案例进行改写把静态样式从style中抽取出来定义成 WXSS 中的classWXML 中通过class引用。二、改写要点一style → class2.1 抽取样式定义 class把原 WXML 中的内联样式stylefont-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引用viewclasssection-title中共二十大会议主题/view2.2 class 命名规范class 命名不使用驼峰写法多个单词之间用短横线-连接即 kebab-case烤肉串式命名。这是前端样式命名的事实标准与 CSS 属性名如text-align风格保持一致。❌ 不规范驼峰✅ 规范kebab-casesectionTitlesection-titletxtBodyIndenttxt-body-indentscrollAreascroll-area本次改写中使用的类名清单class 名称作用定义位置box容器外边距、内边距、边框app.wxss全局样式scroll-area滚动区域占满剩余高度index.wxss页面样式section-title大会主题标题由 style 抽取而来index.wxsstxt-style主题正文样式原案例已有index.wxsssection-sub-title报告小节标题index.wxsstxt-body报告正文段落index.wxsstxt-body-indent首行缩进与txt-body组合使用index.wxsstxt-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-viewclassscroll-areascroll-ytypelist!-- 超出一屏的内容 --/scroll-view3.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}}colorblackbackgroundwhite/navigation-barscroll-viewclassscroll-areascroll-ytypelistviewclassbox!-- 大会主题原 style 内联样式已抽取为 section-title 类 --viewclasssection-title中共二十大会议主题/viewviewclasstxt-style高举中国特色社会主义伟大旗帜全面贯彻新时代中国特色社会主义思想弘扬伟大建党精神自信自强、守正创新踔厉奋发、勇毅前行为全面建设社会主义现代化国家、全面推进中华民族伟大复兴而团结奋斗。/view!-- 新增内容二十大报告内容摘选 --viewclasssection-sub-title一、过去五年的工作和新时代十年的伟大变革/viewviewclasstxt-body txt-body-indent五年来我们党团结带领人民攻克了许多长期没有解决的难题办成了许多事关长远的大事要事推动党和国家事业取得举世瞩目的重大成就。/viewviewclasstxt-body txt-body-indent十年来我们经历了对党和人民事业具有重大现实意义和深远历史意义的三件大事一是迎来中国共产党成立一百周年二是中国特色社会主义进入新时代三是完成脱贫攻坚、全面建成小康社会的历史任务实现第一个百年奋斗目标。这是中国共产党和中国人民团结奋斗赢得的历史性胜利是彪炳中华民族发展史册的历史性胜利也是对世界具有深远影响的历史性胜利。/viewviewclasstxt-body txt-body-indent新时代十年的伟大变革在党史、新中国史、改革开放史、社会主义发展史、中华民族发展史上具有里程碑意义。/viewviewclasssection-sub-title二、开辟马克思主义中国化时代化新境界/viewviewclasstxt-body txt-body-indent马克思主义是我们立党立国、兴党兴国的根本指导思想。实践告诉我们中国共产党为什么能中国特色社会主义为什么好归根到底是马克思主义行是中国化时代化的马克思主义行。/viewviewclasstxt-body txt-body-indent不断谱写马克思主义中国化时代化新篇章是当代中国共产党人的庄严历史责任。继续推进实践基础上的理论创新首先要把握好新时代中国特色社会主义思想的世界观和方法论坚持好、运用好贯穿其中的立场观点方法。/viewviewclasssection-sub-title三、新时代新征程中国共产党的使命任务/viewviewclasstxt-body txt-body-indent从现在起中国共产党的中心任务就是团结带领全国各族人民全面建成社会主义现代化强国、实现第二个百年奋斗目标以中国式现代化全面推进中华民族伟大复兴。/viewviewclasstxt-body txt-body-indent中国式现代化是中国共产党领导的社会主义现代化既有各国现代化的共同特征更有基于自己国情的中国特色。中国式现代化是人口规模巨大的现代化是全体人民共同富裕的现代化是物质文明和精神文明相协调的现代化是人与自然和谐共生的现代化是走和平发展道路的现代化。/viewviewclasstxt-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什么时候用 classstyle一般用在需要动态设置的场景如配合数据绑定stylecolor: {{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 渲染引擎中运行验证。