微信小程序开发作业模板01-MOOC1

在微信小程序开发中，设置字体和文本样式是创建用户界面的基本操作。本作业模板01-MOOC1主要关注如何通过`style`属性和`class`属性来控制文本的显示效果。以下是关于这两个属性以及相关知识点的详细说明： 1. **`style`属性**： `style`属性用于在元素内直接定义样式，可以动态地改变元素的样式。在提供的代码中，`style`属性被用于设置`view`组件的背景颜色、文本对齐方式、字体加粗和下划线等。例如： ```html <view style="background-color:yellow; display:flex; justify-content: left;"> <view style="font-weight:bold;">{{col}}：</view> <view style="text-decoration:underline">{{item}}</view> </view> ``` 这里，`style`属性包含了`background-color`、`display`、`justify-content`、`font-weight`和`text-decoration`等CSS属性，它们分别设置了背景色、布局模式、内容对齐方式、字体加粗和文本下划线。 2. **`class`属性**： `class`属性则用于关联预定义的CSS类，使得多个元素可以共享相同的样式。在提供的代码中，`class`属性被用于定义不同的样式块，如`.class_box`、`.inforbox_1`、`.col_1`和`.detail_1`： ```css .class_box { background-color: greenyellow; } .inforbox_1 { display: flex; justify-content: left; font-weight: normal; } .col_1 { font-weight: bold; } .detail_1 { text-decoration: underline; } ``` 在`index.wxml`中，这些类被应用到对应的`view`元素上，以实现特定的布局和样式效果。 3. **`wx:for`和`wx:key`**： `wx:for`是微信小程序中的循环指令，用来遍历数组并渲染多个相同的元素。在这个例子中，`wx:for="{{me}}"`表示遍历`me`这个数据对象的属性，而`wx:key="index"`是用来给每个遍历的元素设置唯一的标识。 4. **微信小程序文件结构**： 微信小程序由多个文件组成，主要包括`wxml`（结构文件）、`wxss`（样式文件）、`json`（配置文件）和`js`（逻辑文件）。在这个案例中，`index.wxml`负责定义页面结构，`index.wxss`负责样式设定，而没有展示的`index.js`可能用于处理数据和事件。 5. **文本样式属性**： - `font-family`：设置字体类型，如`cursive`。 - `font-size`：设置字体大小，如`20px`。 - `font-style`：设置字体样式，如`italic`。 - `font-weight`：设置字体粗细，如`bold`或`normal`。 - `text-align`：设置文本对齐方式，如`center`或`left`。 - `text-decoration`：设置文本修饰，如`underline`。 6. **布局样式属性**： - `display`：设置布局方式，如`flex`用于开启弹性布局。 - `justify-content`：在弹性布局中，设置元素在主轴上的对齐方式，如`left`或`center`。 - `background-color`：设置背景颜色。 完成这个作业，开发者需要理解并熟练运用以上知识点，同时了解如何在微信小程序中结合数据绑定（`{{ }}`）来动态呈现个人信息。通过这样的实践，开发者可以深入学习微信小程序的开发基础，为后续更复杂的项目奠定坚实的基础。