博客

首先，先看一下效果图：



这里，微信用户可以通过授权，进行登录

功能的主要实现，是通过wx.getUserProfile()这个API

wx.getUserProfile()会获取用户的信息，然后我们可以将返回的信息进行展示

代码展示：

<view class="conta" wx:if="{{userInfo.nickName}}">
    <image src="{{userInfo.avatarUrl}}"></image>
    <text>昵称：{{userInfo.nickName}}</text> </view> <view class="conta" wx:else>
    <view class="login" bindtap="getUser">登录</view> </view>

样式为：

.conta {
    padding-left: 20rpx;
    background-color: white;
    border-bottom: 1px black solid;
    border-top: 1px black solid;
    height: 150rpx;
    display: flex;
    align-items: center;
    font-size: 20px;
}

image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 50rpx;
    border: 1px solid black;
}

.login {
    width: 100rpx;
    line-height: 100rpx;
    /* display: inline-block; */
    text-align: center;
    border-radius: 50%;
    background-color: greenyellow;
}

js代码

data: {
    userInfo: {}
},
getUser() {
    console.log('111');
    wx.getUserProfile({
        desc: '用于完善会员资料', 
        success: (res) => {
            // console.log('222');
            console.log(res.userInfo);
            this.setData({
                userInfo: res.userInfo
            })
        }
    })
},