微信小程序获取用户信息

新版小程序获取用户信息调用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"
        })
      }
    }

猜你喜欢

转载自blog.csdn.net/weixin_42879812/article/details/81411042