微信小程序头像的制作

微信小程序头像的制作

微信小程序头像的制作

打开开发者工具，在项目pages文件夹下新建mypage文件夹，并在文件夹内新建page，名为mypage，并在app.json配置文件中将mypage设为第一页面。

在mypage.wxml中写代码如下，在同个目录内添加一张图片用来做头像。

张三

保存代码左侧看到没有任何样式的效果如下图

在mypage.wxss样式文件中，添加样式，代码如下：

.user{

display: flex;

flex-direction: column;

align-items: center;

}

image{

width: 200rpx;

height: 200rpx;

border-radius: 40%;

border: 2rpx solid black;

}

保存代码，查看左侧模拟器效果，这样就好看多了

再为用户名添加些样式，代码如下：

.user{

display: flex;

flex-direction: column;

align-items: center;

}

image{

width: 200rpx;

height: 200rpx;

border-radius: 40%;

border: 2rpx solid black;

}

text{

margin-top: 15rpx;

color: red;

font-size: 30rpx;

font-weight:700

}

保存代码，左侧模拟器查看，头像基本符合要求了