微信小程序信息授权获取（头像，昵称，等）

这里简单说一下微信小程序获取头像，昵称等信息，这里是将demo部分功能单独呈现，最后附上DEMO：

一、效果图：

这个功能比较简单就直接上代码

二、代码部分

1、.WXML代码示例

<view class="main">
    <view class="header">
        <image src="{{thumb}}" class="thumb"></image>
        <text class="nickname">{{nickname}}</text>
        <text class="about">关于我们</text>
    </view>
    <view class="address-box">
        <view class="address-manage">
            <navigator url="/pages/component/address/address">地址管理</navigator>
        </view>
        <view wx:if="{{hasAddress}}" class="address-list">
            <view>{{address.name}}</view>
            <view>{{address.phone}}</view>
            <view>{{address.detail}}</view>
        </view>
    </view>

    <view class="orders-box">
        <button bindtap="getUserInfo">获取信息</button>

    </view>
</view>

2、.JS代码示例

Page({
  data: {
    thumb: '',
    nickname: '',
    orders: [],
    hasAddress: false,
    address: {},
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad() {
    var self = this;
  
  },
  onShow() {
    var self = this;
    /**
     * 获取本地缓存 地址信息
     */
    wx.getStorage({
      key: 'address',
      success: function (res) {
        self.setData({
          hasAddress: true,
          address: res.data
        })
      }
    })
  },
 
  getUserInfo: function () {
    var that = this
    wx.getUserProfile({
      desc: '获取信息原因（编写自己的原因。例如：测试）', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log("获取用户信息成功", res)
        that.setData({//添加及更新UI
          thumb: res.userInfo.avatarUrl,
          nickname:res.userInfo.nickName,
        })
      },
      fail: res => {
        console.log("获取用户信息失败", res)
      }
    })
  }
})

 3、.WXSS样式代码

.header{
    position: relative;
    height: 160rpx;
    line-height: 100rpx;
    padding:30rpx 30rpx 30rpx 150rpx;
    box-sizing: border-box;
    background: #AB956D;
    font-size: 28rpx;
    color: #fff;
}
.header .thumb{
    position: absolute;
    left: 30rpx;
    top: 30rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
}
.header .about{
    float: right;
}

.address-box{
    border-bottom: 20rpx solid #ededed;
    color: #999;
    line-height: 90rpx;
    font-size: 28rpx;
}
.address-box .address-manage{
    position: relative;
    height: 90rpx;
    border-bottom: 1rpx solid #e9e9e9;
    text-align: center;
}
.address-box .address-manage::after{
    position: absolute;
    right: 30rpx;
    top: 34rpx;
    content: '';
    width: 16rpx;
    height: 16rpx;
    border-top: 4rpx solid #7f7f7f;
    border-right: 4rpx solid #7f7f7f;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.address-box .address-list{
    padding-left: 30rpx;
}
.address-box .address-list view{
    height: 90rpx;
    border-bottom: 1rpx solid #e9e9e9;
}
.address-box .address-list view:last-child{
    border-bottom: 0;
}

.orders-box{
    color: #999;
    font-size: 28rpx;
}
.orders{
    height: 90rpx;
    line-height: 90rpx;
    border-bottom: 1rpx solid #e9e9e9;
    text-align: center;
}
.orders-list{
    padding-left: 30rpx;
    border-bottom: 20rpx solid #ededed;
}
.orders-list:last-child{
    border-bottom: 0;
}
.orders-number{
    height: 90rpx;
    line-height: 90rpx;
    border-bottom: 1rpx solid #e9e9e9;
}
.orders-detail{
    position: relative;
    height: 120rpx;
    padding: 35rpx 20rpx 35rpx 170rpx;
    border-bottom: 1rpx solid #e9e9e9;
}
.orders-detail image{
    position: absolute;
    left: 0;
    top: 20rpx;
    width: 150rpx;
    height: 150rpx;
}
.orders-detail view{
    line-height: 60rpx;
}
.orders-detail .orders-status{
    position: absolute;
    right: 20rpx;
    top: 35rpx;
    height: 120rpx;
    line-height: 120rpx;
    color: #b42f2d;
}
.orders-footer{
    height: 60rpx;
    line-height: 60rpx;
    color: #2f2f2f;
    padding:15rpx 30rpx 15rpx 0;
}
.orders-footer .orders-btn{
    float: right;
    width: 170rpx;
    height: 60rpx;
    line-height:60rpx;
    border-radius: 6rpx;
    background: #b42f2d;
    color: #fff;
}

三、如果只获取头像与昵称，不写数据库，只为展示，可以使用以下方式获取，

1、.wxml代码示例

<open-data type="userAvatarUrl"></open-data>    //获取用户头像直接显示在小程序中
<open-data type="userNickName" lang="zh_CN"></open-data>    //获取用户昵称直接显示在小程序中

 这样可以直接展示头像与昵称

四、其他问题

1、目前微信小程序使用

wx.getUserInfo({
      success: function (res) {
        console.log(res);
        var avatarUrl = 'userInfo.avatarUrl';
        var nickName = 'userInfo.nickName';
        self.setData({
         ...
        })
      }
    })

此方式获取信息获取不到任何信息。（已上线无影响，升级以及新开发需要注意）

2、获取用户信息失败，错误：getUserProfile:fail can only be invoked by user TAP gesture.

在以下方式中获取就会出现上图中错误， 

 onLoad() {
    var that = this
    wx.getUserProfile({
      desc: '获取信息原因（编写自己的原因。例如：测试）', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log("获取用户信息成功", res)
        that.setData({//添加及更新UI
          thumb: res.userInfo.avatarUrl,
          nickname:res.userInfo.nickName,
        })
      },
      fail: res => {
        console.log("获取用户信息失败", res)
      }
    })
  
  },

微信小程序最多的一个更改，就是用户使用wx.getUserInfo（开发和体验版）是不会弹出授权，正式版不受影响。

现在授权方式是需要引导用户点击一个授权按钮，然后再弹出授权。

  DEMO 

                                                         -END