微信小程序实战：字体与文本样式属性详解（附完整代码）

微信小程序案例 2.1 字体和文本样式属性## 一、实验目的掌握WXML中style内联样式与class类样式的区别将wxml标签中style写的静态样式抽离迁移到WXSS使用class引用class命名遵守小程序规范使用横杠‑连接禁止驼峰命名使用scroll‑view组件实现页面内容滚动页面内容超出一屏理解app.wxss全局样式、页面wxss局部样式的作用范围。二、知识点style适合动态变化的样式静态样式不建议写在标签style属性性能差。class在wxss定义样式类wxml通过class调用静态样式优先使用。app.wxss全局样式全部页面生效。pages/index/index.wxss页面局部样式仅当前页面生效局部会覆盖全局同名样式。scroll‑view scroll‑y实现纵向滚动。文本常用WXSS属性font‑size字体大小、font‑family字体、color文字颜色、letter‑spacing字符间距、text‑align对齐、text‑indent首行缩进、text‑decoration下划线、line‑height行高等。三、项目文件结构WX├─components│ └─navigation‑bar // 自定义导航栏组件├─pages│ └─index│ ├─index.js│ ├─index.json│ ├─index.wxml│ └─index.wxss├─app.js├─app.json└─app.wxss四、核心代码app.json{pages:[pages/index/index],window:{navigationBarTextStyle:black,navigationStyle:custom},style:v2,sitemapLocation:sitemap.json,lazyCodeLoading:requiredComponents}index.wxmlnavigation-bartitle字体和文本样式设置back{{false}}colorblackbackground#FFF/navigation-barscroll-viewclassscrollareascroll-ytypelistviewclassboxviewclasstitle-style春江花月夜/viewviewclasstxt-style春江潮水连海平海上明月共潮生。滟滟随波千万里何处春江无月明江流宛转绕芳甸月照花林皆似霰空里流霜不觉飞汀上白沙看不见。/viewviewclasstxt-style江天一色无纤尘皎皎空中孤月轮。江畔何人初见月江月何年初照人人生代代无穷已江月年年望相似。不知江月待何人但见长江送流水。/view/view/scroll-viewindex.wxsspage{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}.box{margin:20rpx;padding:20rpx;border:2rpx solid silver;}.title-style{font-size:larger;font-weight:bolder;text-align:center;margin-bottom:30rpx;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:#0f0;line-height:60rpx;}运行结果展示