点击下面网址可以在线观看视频
10天零基础入门小程序系列在线视频教程
上一节带领大家实现底部tab导航栏，这一节带领大家实现个人中心与授权登陆。同样我们这节的代码也是基于第三天代码开发的。如果没有看过前3天视频的同学，点击上面链接去看前3天视频。
本节知识点
- 1，认识botton组件
- 2，使用button组件的 open-type来获取用户信息
- 3，授权登陆功能实现，获取用户相关信息
- 4，展示用户头像和用户昵称
- 5，圆形头像实现
一，认识botton组件
同样是先看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
获取用户信息
查看官方文档，我们可以看到botton的open-type里有个getUserInfo可以用来获取用户信息。
再来看下官方示例如下：
官方示例
接下来我们就使用官方示例看能不能获取到用户信息
二，获取用户信息
-
1，在me.wxml实现下面代码
me.wxml
-
2,在me.js里面实现下面代码
me.js
-
3,点击编译，会弹出一个授权弹窗，这里点击允许
点击允许
-
4，查看打印的log
获取到的用户信息.png
可以看到我们的log日志里打印出来了用户信息。
三，展示用户头像和昵称
我们通过第二步获取到了用户的相关信息，接下来我们就来把获取到的用户信息展示出来。
-
1，首先我们要在me.wxml里添加一个image和text组件用来展示头像和昵称。代码如下
me.wxml
-
2,在me.js里把我们获取到的用户信息绑定到上面的image和text组件里
me.js
可以看到左边就是用户头像和昵称了。
我们通常头像应该是圆形居中的，接下来我们就借助与css来美化布局
四，使用css来实现圆形头像
设置圆形头像
这里重点是me.wxss里的border-radius，border-radius是用来实现圆角的，当我们的宽高和圆角的大小都是128rpx时，我们展示出来的也就是圆角头像了。
圆角头像
注意：这里的rpx和px的关系如下图
rpx和px的关系
虽然我们实现了上面的圆角头像，但是布局还是有些不太好看。
接下来我们就把头像和昵称居中显示
me.wxss和me.wxml
实现效果如下
头像和昵称居中
到此我们的个人中心页也就差不多实现了。
10天零基础入门小程序系列在线视频教程
有问题可以加我微信2501902696（备注小程序）
网友评论