摘要本次实验对小程序字体文本案例进行改造将wxml中的行内style样式抽离到wxss采用短横线class命名实现结构与样式分离扩充内容实现页面滚动效果。一、实验任务需求本次练习为开源框架应用课程《字体和文本样式属性》需要对原有小程序案例进行代码改写具体要求1. 将wxml标签中style属性写的静态行内样式全部提取出来改为class引用在wxss文件中定义class样式class命名使用横杠-禁止驼峰命名。2. 扩充页面文本内容使页面内容超出一屏实现页面纵向滚动展示。3. 将案例整理成技术博客进行发布。4. 提交材料记录博客信息的Word文档 小程序源码压缩包。二、改造前代码存在的问题原始案例直接在wxml标签内使用style写行内样式。行内样式存在这些问题1. 页面结构与CSS样式写在一起代码耦合高后期维护麻烦。2. 相同样式需要重复编写造成大量代码冗余。3. 样式无法复用修改样式时需要逐个修改每一处标签。三、改造后完整源代码index.wxml页面结构navigation-bar title字体和文本样式设置 back{{false}} colorblack background#FFF/navigation-barscroll-view classscrollarea scroll-y typelistview classboxview stylefont-size: larger; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color:red;软件工程专业介绍/viewview classtxt-style软件工程是计算机类本科专业授予工学学士学位。本专业融合计算机科学与工程管理思想以工程化方法指导软件产品的研发覆盖需求分析、系统设计、代码开发、软件测试、运维维护的软件全生命周期。专业课程包含高等数学、离散数学等理论基础同时开设数据结构、操作系统、计算机网络、数据库原理、面向对象编程、软件项目管理、软件质量保证等核心课程。专业十分重视实践教学通过课程设计、项目实训锻炼学生编程能力、文档撰写与团队协作能力不只培养单纯的代码编写能力更强调规范化开发思维。毕业后学生可从事前端、后端开发、软件测试、运维等技术岗位也可从事项目管理相关工作还可选择考研深造。行业技术迭代较快要求学生保持自主学习能力持续跟进新技术例如 Web 开发、微信小程序等应用开发技术。/view/view/scroll-viewindex.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: #0f0;line-height: 60rpx;}四、页面滚动实现原理案例没有使用额外滚动组件当页面整体内容高度大于手机可视屏幕高度时小程序页面原生自带纵向滚动能力。本案例通过添加文字增加页面总内容高度页面就可以上下滑动浏览全部内容。五、运行效果说明1. 标题加粗放大展示2.文本题目为红色正文文本为蓝色和下横线组成。3. 下方大量段落页面向下滚动全部内容可以浏览。六、实验总结1. 结构样式分离wxml只写页面标签结构尽量避免l写行内stylewxss存放样式通过class引用。2. 类名规范遵循小程序前端规范使用短横线分隔命名拒绝驼峰写法。3. 页面滚动小程序页面内容溢出可视区域默认开启滚动无需引入特殊组件。认自动开启滚动不需要额外组件。
如何影响文本相似度召回？一个项目复盘)
