微信小程序：用户授权获取微信头像、昵称、手机号

微信小程序：用户授权获取微信头像、昵称、手机号

1.授权界面

获取用户昵称，头像其实不需要授权，此处授权只是为获取用户手机号，因为获取手机号必须是用户主动触发

2.小程序显示用户头像，昵称

3.登陆授权的代码

• login.js

getPhoneNumber: function(e) {
    var args = e;
    var ts = this;
	 if (e.detail.errMsg == 'getPhoneNumber:ok' ) {
	      wx.showLoading({
	        mask: true,
	        title: '',
	      });
    } else {
      wx.hideLoading();
      wx.showModal({
        title: '提示',
        content: '必须授权手机号才能刷码乘车',
        success(res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
  },

• login.wxml

    
        登录并授权
    
    
        申请获取以下权限
    
    
        获得您的公开信息（昵称丶头像等）
    

  允许

• login.wxss

page {
    background: #7F7F7F;
}

.box {
    background: #fff;
    text-align: center;
    font-size: 28rpx;
    color: #999;
    margin: 0 66rpx;
    margin-top: 400rpx;
    padding: 44rpx;
}

.box .title {
    color: #333;
    font-size: 34rpx;
    margin-bottom: 30rpx;
    font-weight: 600;
}

button {
    display: block;
    margin: 0 66rpx;
    border-radius: 0px;
    color: #27A036;
}

4.用户信息显示的代码

• mine.js

• mine.wxml

    
        
            
            	//微信头像
                
            
            
            //微信昵称
                
            
        
    

• mine.wxss

.head-bg {
    width: 100%;
    background: #3C91FB;
    height: 250rpx;
    position: absolute;
    z-index: -2;
    top: 0px;
    left: 0px;
}
.arrow {
  width: 21rpx;
  height: 35rpx;
  margin-left:200px;
}
.info-box {
  margin: 40rpx 66rpx; 
  height: 200rpx;
  display:flex;
  flex-direction:row;
}

.info {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 140rpx;
  box-sizing: border-box;
}

.url {
  border-radius: 50%;
  width: 120rpx;
  height: 120rpx;
  overflow: hidden;
}

.name {
  font-size: 35rpx;
  color: #fff;
  margin-left: 32rpx;
}