任务2 设置头像的样式
任务描述
设置头像的样式。
1）导入项目：任务2 Hello World（可参考任务1的方法创建该任务）。
2）修改头像样式，去除圆角。
3）修改头像样式，修改高度和宽度。
操作步骤
1 启动微信开发者工具，执行“项目/查看所有项目”命令，如图1-8所示。
图1-8 执行“项目/查看所有项目”命令
2 选择“小程序”，单击“+”，如图1-9所示。
3 单击“导入项目”按钮，目录选择“任务2 Hello World”，如图1-10所示。
4 成功导入项目后的界面如图1-11所示。
5 打开index.wxml，查看用于头像的image组件，image组件可以实现显示图像，还没设置样式，如class="userinfo-avatar"，如图1-12所示。
图1-9 单击“+”
图1-10 单击“导入项目”按钮
图1-11 成功导入项目后的界面
图1-12 class="userinfo-avatar"
6 打开index.wxss，查看.userinfo-avatar样式代码。
经验分享
●wxml。
在小程序中，wxml相当于网页设计的HTML的角色。标签名字与HTML有一些不同，小程序wxml用的标签是view、button、text等，还提供了地图、视频、音频等组件。
●wxss。
wxss是一套样式语言，用来决定WXML的组件应该怎么显示。
wxss具有CSS的大部分特性。
wxss对CSS进行了扩充以及修改，以适应微信小程序的开发。
7 删除.userinfo-avatar样式代码中的“border-radius:50%;”，会发现头像图片变成了方角，如图1-13所示。
8 在.userinfo-avatar样式代码中，把“width:128rpx;”“height:128rpx;”更改为“width:228rpx;”“height:228rpx;”，会发现头像图片变大了，如图1-14所示。
图1-13 头像图片变成了方角
图1-14 头像图片变大了