支付宝小程序–登录功能–前台
实现效果:
前期准备():
编写代码:
axml:
<view class="user-info">
<image class="user-avatural" src="{{ userInfo.avatar }}"></image>
<button a:if="{{!isHaveAuth}}" class="user-info-button" open-type="getAuthorize" onGetAuthorize="onGetAuthorize" onError="onAuthError" scope="userInfo" size="mini">
点击登录
</button>
<text a:else>{{userInfo.nickName}}</text>
</view>
acss:
.user-info {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: #ff7440;
height: 354rpx;
padding: 50rpx 0;
box-sizing: border-box;
}
.user-info .user-avatural {
width: 169rpx;
height: 169rpx;
border-radius: 50%;
}
.user-info-button{
background-color: #fff;
color: #000;
font-size: 35rpx;
line-height: 2.0;
border-radius: 20rpx;
}
js:
//点击登录
onGetAuthorize(res) {
let that = this;
//获取用户信息
my.getUserInfo((flag, data, userInfo) => {
console.log(flag, data, userInfo);
if (flag) {
that.setData({
isHaveAuth: true
});
};
that.setData({
userInfo: userInfo
});
});
},
js-model:
//获取用户信息
getUserInfo(callBack) {
let that = this, userInfo = null, authCode = null;
// 主动授权(弹框):auth_user,静默授权(不弹框):auth_base
my.getAuthCode({
scopes: 'auth_user',
success: (res) => {
if(res.authCode){
authCode = res.authCode;
// 拿到用户数据、以下方的报文格式解析两层 response
my.getOpenUserInfo({
fail: (res) => {
},
success: (res) => {
userInfo = JSON.parse(res.response).response;
typeof callBack == 'function' && callBack(true, authCode, userInfo);
}
});
}
},
});
}
uthCode, userInfo);
}
});
}
},
});
}