新版小程序获取用户信息调用wx.getUserInfo
此接口有调整,使用该接口将不再出现授权弹窗,请使用
<button open-type="getUserInfo"></button>
引导用户主动进行授权操作。
- 当用户未授权过,调用该接口将直接报错
- 当用户授权过,可以使用该接口获取用户信息
如果必须要授权后才可以使用小程序,可以制作个界面来引导用户授权
- 在app.js里面添加
// 查看是否授权
wx.getSetting({
success: function(res){
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
}
})
} else {
//没有授权,跳转至授权页面
wx.redirectTo({
url: "../../pages/Authorization/authorization"
})
}
}
})
- 授权页面
<!--wxml-->
<view class="container">
<view class='titleView'>
<image class='icon' src='../../images/mycenter/logo.png'></image>
<text class='title'>XXXX</text>
</view>
<view class='contentView'>
<text class='tip_title'>登录后XXXX将获得以下权限</text>
<text class='tip_content' space="emsp"> · 获得你的公开信息(昵称、头像等)</text>
<button class='confirmBtn' open-type='getUserInfo' type='primary' bindgetuserinfo="bindGetUserInfo">确认登录</button>
</view>
</view>
/**wxss**/
page {
background: white;
padding: 0 50rpx;
}
.titleView {
width: 650rpx;
height: 370rpx;
border-bottom: 1rpx solid #e9e9e9;
}
.icon{
width: 150rpx;
height: 150rpx;
margin-left: 250rpx;
margin-top: 100rpx;
border-radius: 20rpx;
border: 1rpx #e9e9e9 solid;
}
.title{
display: inline-block;
margin-top: 10rpx;
width: 650rpx;
text-align: center;
}
.contentView{
width: 650rpx;
}
.tip_title{
display: inline-block;
margin-top: 50rpx;
width: 650rpx;
font-size: 34rpx;
}
.tip_content{
display: inline-block;
width: 650rpx;
font-size: 30rpx;
color: #939393;
margin-top: 20rpx;
}
.confirmBtn{
margin-top: 80rpx;
width: 630rpx;
margin-right: 10rpx;
}
//js
//授权button上添加的方法,当用户确认授权后获得userInfo并跳转至所需要跳转的页面
bindGetUserInfo: function (e) {
if (e.detail.userInfo != null){
console.log(e.detail.userInfo)
wx.switchTab({
url: "../../pages/payment/payment"
})
}
}