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

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

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

<view class="box">
    <view class="title">
        登录并授权
    </view>
    <view class="">
        申请获取以下权限
    </view>
    <view class="">
        获得您的公开信息（昵称丶头像等）
    </view>
</view>
  <button bindgetphonenumber="getPhoneNumber" openType="getPhoneNumber">允许</button>

• 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

<view class="head-bg"></view>
<view class="member">
    <view class="info-box">
        <view class="info">
            <view class="url">
            	//微信头像
                <open-data type="userAvatarUrl"></open-data>
            </view>
            <view class="name">
            //微信昵称
                <open-data type="userNickName"></open-data>
            </view>
        </view>
    </view>
</view>

• 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;
}