老套路，先進(jìn)行頁(yè)面分析 
個(gè)人中心頁(yè)有兩種狀態(tài)，即未登錄和已登錄，所以要求不同數(shù)據(jù)驅(qū)動(dòng)產(chǎn)生的不同頁(yè)面 
點(diǎn)擊登錄/退出登錄按鈕需要響應(yīng)合理邏輯，并改變按鈕樣式 
只有登錄狀態(tài)下才會(huì)顯示我的錢包按鈕 
頁(yè)面結(jié)構(gòu)

1. <!--pages/my/index.wxml-->
2. <view class="container">
3. <view class="user-info">
4. <!-- 用戶未登錄就沒(méi)有頭像-->
5. <block wx:if="{{userInfo.avatarUrl != ''}}">
6. <image src="{{userInfo.avatarUrl}}"></image>
7. </block>
8. <text>{{userInfo.nickName}}</text>
9. </view>
10. <!-- 用戶未登錄就沒(méi)有錢包按鈕-->
11. <block wx:if="{{userInfo.avatarUrl != ''}}">
12. <view class="my-wallet tapbar" bindtap="movetoWallet">
13. <text>我的錢包</text>
14. <text>></text>
15. </view>
16. </block>
17. <button bindtap="bindAction" class="btn-login" hover-class="gray" type="{{bType}}" >{{actionText}}</button>
18. </view>

指令wx:if="boolean"：  當(dāng)boolean為true，被它（block）包裹的元素將會(huì)顯示，否則不現(xiàn)實(shí)，這樣可以處理在未登錄狀態(tài)下不顯示頭像和錢包按鈕

頁(yè)面樣式

1. /* pages/my/index.wxss */
2. .user-info{
3. background-color: #fff;
4. padding-top: 60rpx;
5. }
6. .user-info image{
7. display: block;
8. width: 180rpx;
9. height: 180rpx;
10. border-radius: 50%;
11. margin: 0 auto 40rpx;
12. box-shadow: 0 0 20rpx rgba(0,0,0