案例2.1《字体和文本样式设置》改写实践

# 微信小程序实训案例 2.1《字体和文本样式设置》改写实践 本文是《微信小程序开发》课程案例 2.1 的改写练习。记录如何将 WXML 中的静态内联样式抽取为 WXSS 的 class并补充内容使页面支持滚动显示。## 一、案例背景教材案例字体和文本样式设置演示了在小程序中用 style 和 class 两种方式给文本设置样式- style 属性内联样式适合**动态**设置的场景- class WXSS适合**静态**设置的场景推荐因为 style 会在运行时解析静态样式写进 style 会影响渲染性能原始 index.wxml 中标题那段用了内联 stylexmlview stylefont-size: larger;font-weight: bolder;text-align: center;margin-bottom: 30rpx;color: red;党的二十大会议主题/view## 二、改写思路### 1. 把静态内联样式抽取为 class核心将标题的 style 内容搬到 index.wxss命名为 title-style**kebab-case不用驼峰**css/* index.wxss */.title-style {font-size: larger;font-weight: bolder;text-align: center;margin-bottom: 30rpx;color: red;}WXML 中改为用 class 引用xmlview classtitle-style党的二十大会议主题/view### 2. 补充内容使页面超过一屏可滚动在 scroll-viewscroll-y里追加多段二十大报告内容让 index 页面内容超过一屏配合 scrollarea 的布局实现**上下滚动**。xmlscroll-view classscrollarea scroll-y typelistview classboxview classtitle-style党的二十大会议主题/viewview classtxt-style高举中国特色社会主义伟大旗帜全面贯彻新时代中国特色社会主义思想……中华民族伟大复兴而团结奋斗。/view!-- 以下为补充的二十大报告内容超过一屏可滚动 --view classtxt-style十年来我们经历了对党和人民事业具有重大现实意义和深远历史意义的三件大事……/view!-- 更多段落略 --/view/scroll-view布局要点index.wxsscsspage {height: 100vh;display: flex;flex-direction: column;}.scrollarea {flex: 1;overflow-y: hidden;}scroll-view 占满剩余高度内部内容超出后即可 scroll-y 滚动。## 三、class 命名规范说明- 单词之间用**横杠 -** 连接例如 title-style、txt-style- **不要**使用驼峰写法如 titleStyle、t在微信开发者工具中导入项目根目录即可运行。页面展示党的二十大会议主题标题正文使用隶书字体、蓝色、带下划线、两端对齐、首行缩进 2 字符、行高 60rpx。向下滑动可查看补充的二十大报告内容页面超出一屏并可滚动。五、常见问题与排查在改写和运行过程中可能会遇到下面几个常见问题这里给出原因和解决方法。1. 滚动不生效原因scroll-view 没有占满可用高度或者页面内容没有超过一屏导致没有可滚动的空间。解决方法确认 page 设置了 height: 100vh 并使用 flex 纵向布局scrollarea 设置 flex: 1 和 overflow-y: hidden同时保证 scroll-view 内部内容确实超过一屏。2. 样式不生效原因类名拼写不一致或者样式写在了错误的文件里例如把页面样式写进了 app.wxss 之外的其他位置。解决方法检查 WXML 中的 class 名称与 WXSS 中的选择器是否完全一致并确认样式写在对应的页面 wxss 文件中若多个页面共用再考虑放到 app.wxss。3. 类名命名不规范原因使用了驼峰写法如 titleStyle、txtStyle不符合 WXML/WXSS 的类名规范。解决方法统一改用 kebab-case单词之间用横杠 - 连接例如 title-style、txt-style保证语义清晰、可读性好。## 五、小结- 静态样式用 class WXSS动态样式才用 style 属性这样能减少运行时解析、提升渲染性能- app.wxss 是全局样式所有页面可用页面 wxss 只作用于当前页相同设置下页面样式覆盖全局样式- 类名采用 kebab-case规范、易读