小程序登录和退出登陆

wxml:    

<view class="login">

        <view wx:if="{ {userinof.nickName}}" class="img">

            <image src="{ {userinof.avatarUrl}}"></image>

            <text>{ {userinof.nickName}}</text>

            <button bindtap="loginOut">退出登录</button>

        </view>

        <button wx:else bindtap="getUserProfile">微信登录</button>

    </view>

wxss:

.login {

    width: 100%;

    height: 400rpx;

    background-color: #fff;

    margin-bottom: 20rpx;

}

.login>.img {

    display: flex;

    flex-direction: column;

    align-items: center;

}

.login>.img>image {

    width: 200rpx;

    height: 200rpx;