企业官网建设流程全解析

一、实验目的

掌握微信小程序字体样式、文本样式的设置方法，理解内联 style 与 class 样式的区别。
按照课程规范将页面中所有静态内联 style 样式全部提取到 wxss 文件中，统一使用 class 调用。
class 命名采用短横线命名法，禁止驼峰命名。
添加大量文本内容，使页面内容超出一屏，实现页面上下滚动效果，完成课堂作业要求。

二、实验知识点

1. 小程序不推荐大量使用内联 style，静态样式统一写在 wxss，结构与样式分离。

2. class 命名规范：全部使用 短横线 - 命名，不使用驼峰命名。

3. 字体属性：字号、字体、加粗、倾斜。

4. 文本属性：颜色、字间距、行高、缩进、对齐、下划线。

5. scroll-view 实现页面滚动效果。

三、实现步骤

1. 新建空白小程序项目，使用测试号开发。

2. 配置全局样式 app.wxss，定义盒子样式、标题红色居中样式。

3. 在 index.wxml 中删除所有内联 style，全部改用 class 样式调用。

4. 在 index.wxss 中编写字体、段落、缩进、下划线、行高等文本样式。

5. 加入大量二十大报告文字，使页面内容超长，实现上下滚动。

6. 编译运行，截图保存运行效果。

四、实验总结

本次实验完成了小程序字体与文本样式综合练习，掌握了样式分离思想。
静态样式全部写入 wxss，结构与样式分离，代码更整洁、易维护。