一、前言在微信小程序开发当中我们有两种方式设置页面样式行内 style 样式与外部 WXSS 样式。直接在标签上写 style 虽然可以快速完成效果但是代码耦合度很高页面结构和样式混杂在一起后期维护、修改样式十分麻烦。本次案例把行内样式全部抽离到 wxss 文件使用class类选择器引用样式遵循短横线命名规范实现结构与样式分离同时扩充页面内容实现页面滚动效果。二、改造思路1. 移除wxml标签中全部 style 属性。2. 在 wxss 中定义样式类类名采用短横线分隔命名例如 title-text 不使用驼峰命名。3. 在wxml标签内通过 class 属性调用写好的样式。4. 添加多段文本内容让页面总高度超出手机屏幕自动生成滚动条。三、完整代码app.json: { pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, rendererOptions: { skyline: { defaultDisplayBlock: true, defaultContentBox: true, tagNameStyleIsolation: legacy, disableABTest: true, sdkVersionBegin: 3.0.0, sdkVersionEnd: 15.255.255 } }, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents } index.wxml: !--index.wxml-- navigation-bar title字体和样式设置 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view stylefont-size: larger;font-weight: bolder;text-align: center;margin: 30rpx;color: red; 学前端 /view view classtxt-style 前端设计师是一个相对较新的职业主要负责网站和应用程序的用户界面设计和开发。随着互联网的发展前端设计师的角色变得越来越重要他们不仅需要掌握多种技术还需要具备良好的沟通能力和团队合作精神。 前端设计师的主要职责包括 页面和功能设计负责前端产品的页面和功能设计确保用户界面的美观和功能性。 数据交互负责前端产品页面的数据交互对接确保数据的准确传输和显示。 项目框架设计负责项目框架页面和功能设计确保项目的整体架构合理。 跨浏览器兼容性具备主流浏览器兼容设计经验确保页面在不同浏览器上的一致性。 /view /view /scroll-view app.wxss: /**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } .box{ margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } index.wxss: /**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .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: green; line-height: 60rpx; }四、运行效果页面标题居中展示几段测试文字分别实现变色、右对齐、加粗、斜体、下划线效果。下方多段段落文本撑开页面页面可以上下滑动浏览全部内容。所有样式均由class引入wxml标签整洁。五、总结把内联样式抽离到wxss文件是小程序开发的好习惯。短横线命名法能够统一项目命名规范。内容超出视口高度时页面默认开启滚动无需额外配置。在实际项目开发中我们应当尽量少用行内样式做到结构、样式相分离提升代码可读性与可维护性。六、运行效果