完善功能：

1、通過open-data展示使用者頭像

程式碼：

index.wxml

<view wx:if="{{canIUse}}">
  <view class='header'>
    <view class="userinfo-avatar">
      <open-data  type="userAvatarUrl"></open-data>
    </view>
  </view>
  <view class='content'>
    <view>申請獲取以下許可權</view>
    <text>獲得您的公開資訊(暱稱，頭像等)</text>
  </view>
  <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
    授權登入
  </button>
</view>
<view wx:else>請升級微信版本</view>
 

index.wxss

.header {
  position: relative;
  margin: 90rpx 0 90rpx 50rpx;
  width: 650rpx;
  height: 320rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.userinfo-avatar {
  overflow:hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx;
  margin-top: 50rpx;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.content {
    margin-left: 50rpx;
    margin-bottom: 90rpx;
}
.content text {
    display: block;
    color: #9d9d9d;
    margin-top: 40rpx;
}
.bottom {
    border-radius: 80rpx;
    margin: 70rpx 50rpx;
    font-size: 35rpx;
}
 

index.js

Page({
  data: {
    //判斷小程式的API，回撥，引數，元件等是否在當前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function () {
    var that = this;
    // 檢視是否授權
    wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: function (res) {
              //從資料庫獲取使用者資訊
              that.queryUsreInfo();
              //使用者已經授權過
              wx.switchTab({
                url: '/pages/user/card/card'
              })
            }
          });
        }
      }
    })
  },
  bindGetUserInfo: function (e) {
    if (e.detail.userInfo) {
      //使用者按了允許授權按鈕
      var that = this;
      //授權成功後，跳轉進入小程式首頁
      wx.switchTab({
        url: '/pages/user/card/card'
      })
    } else {
      //使用者按了拒絕按鈕
      wx.showModal({
        title: '警告',
        content: '您點選了拒絕授權，將無法進入小程式，請授權之後再進入!',
        showCancel: false,
        confirmText: '返回授權',
        success: function (res) {
          if (res.confirm) {
            console.log('使用者點選了“返回授權”')
          }
        }
      })
    }
  },
})