微信小程序作业：展示个人信息，多方式设置文本样式全解析！

好的，下面是一个符合要求的微信小程序示例。这个示例包括了 `app.json`、`app.wxss`、`index.wxml`、`index.wxss` 和 `index.js` 文件的内容。 1. app.json ```json { "pages": [ "pages/index/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "个人信息展示", "navigationBarTextStyle": "black" } } ``` 2. app.wxss ```css /* app.wxss */ .text-style-app { font-size: 18px; color: blue; font-weight: bold; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } ``` 3. index.wxml ```html <!-- pages/index/index.wxml --> <view class="container"> <view class="text-style-app"> 班级：2021级软件工程<br> 姓名：张三 </view> <view class="text-style-index"> 个人简介：我是一名热爱编程的学生，喜欢探索新技术，希望将来能成为一名优秀的软件工程师。 </view> <view style="font-size: 16px; color: green; font-weight: normal; text-align: left; padding: 10px; border: 1px solid #ccc; border-radius: 5px;"> 兴趣爱好：阅读、运动、旅行 </view> </view> ``` 4. index.wxss ```css /* pages/index/index.wxss */ .text-style-index { font-size: 16px; color: red; font-weight: normal; text-align: left; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } ``` 5. index.js ```javascript // pages/index/index.js Page({ data: { // 可以在这里添加一些数据 }, onLoad: function () { // 页面加载时的逻辑 } }); ``` 运行结果截图 请将小程序运行后的截图粘贴到这里。你可以使用微信开发者工具运行小程序并截取页面的截图。 评分点说明 1. 利用app.wxss文件中定义的样式类来设置字体和文字样式（20分） - 在 `app.wxss` 中定义了 `.text-style-app` 样式类，并在 `index.wxml` 中应用。 2. 利用index.wxss文件中定义的样式类来设置字体和文字样式（20分） - 在 `index.wxss` 中定义了 `.text-style-index` 样式类，并在 `index.wxml` 中应用。 3. 利用style设置文本样式（20分） - 在 `index.wxml` 中直接使用 `style` 属性设置了第三段文字的样式。 4. 每个样式类中的样式属性要大于5个，少一个扣2分（10分） - 每个样式类都包含了6个以上的样式属性。 请将上述代码复制到你的微信小程序项目中，并运行查看效果。完成后，将运行结果的截图粘贴到Word文档中，保存为PDF文件提交。 ######[AI写代码神器 | 748点数解答 | 2024-10-22 16:07:00]