點擊下面網址可以在線觀看視頻
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（備註小程序）