微信小程序-- 给ofo撸一个微信小程序之个人中心页

上一节我们实现了单车报障页，这一节我们来实现个人中心页面：

老套路，先进行页面分析 
个人中心页有两种状态，即未登录和已登录，所以要求不同数据驱动产生的不同页面 
点击登录/退出登录按钮需要响应合理逻辑，并改变按钮样式 
只有登录状态下才会显示我的钱包按钮 
页面结构

1. <!--pages/my/index.wxml-->
2. <view class="container">
3. <view class="user-info">
4. <!-- 用户未登录就没有头像-->
5. <block wx:if="{{userInfo.avatarUrl != ''}}">
6. <image src="{{userInfo.avatarUrl}}"></image>
7. </block>
8. <text>{{userInfo.nickName}}</text>
9. </view>
10. <!-- 用户未登录就没有钱包按钮-->
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"：  当boolean为true，被它（block）包裹的元素将会显示，否则不现实，这样可以处理在未登录状态下不显示头像和钱包按钮

页面样式

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