1.使用者進來一個頁面時，按照微信小程式的生命週期，開始解析onLoad裡面的內容。

所以我們在第一步，就把程式碼放在這裡，看看全域性變數是否已經有值，

2.如果之前沒有授權，則檢視使用者是否有請求一個授權登入的按鈕，

3.最後查閱這個函式的授權結果，是成功返回還是失敗。程式碼如下：

onLoad: function () {
    
    if (app
 
.globalData.userInfo) {
      console.log(1)
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      console.log(2)
      // 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback
 
 = res => {
        console.log(12)
        app.globalData.userInfo = res.userInfo
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      console.log(3)
      // 在沒有 open-type=getUserInfo 版本的相容處理
      wx.getUserInfo({
        success
 
: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        },
        fail:res=>{
          console.log(4);
          this.setData({
            getUserInfoFail:true
          })
        }
      })
    }
  },

第二步：通常我們這裡會進入第二步，允許使用按鈕提示使用者授權。在onLoad週期裡面我們沒獲取到使用者是否有成功授權，我們下一週期onShow，在這裡，我們就可以查閱授權的狀態，如果進入了fail操作，說明還沒有授權，在失敗的時候，我們賦值告知授權失敗，我們頁面根據這個狀態值，來顯示需要使用者點選授權。程式碼如下：

login: function () {
    console.log(111)
    var that = this
    // if (typeof success == "function") {
    //   console.log(6);
    //   console.log('success');
    //   this.data.getUserInfoSuccess = success
    // }
    wx.login({
      success: function (res) {
        var code = res.code;
        console.log(code);
        wx.getUserInfo({
          success: function (res) {
            console.log(7);
            app.globalData.userInfo = res.userInfo
            that.setData({
              getUserInfoFail: false,
              userInfo: res.userInfo,
              hasUserInfo: true
              
            })
            //平臺登入
          },
          fail: function (res) {
            console.log(8);
            console.log(res);
            that.setData({
              getUserInfoFail: true
            })
          }
        })
      }
    })
  },

頁面xml中根據這個getUserInfoFail來顯示按鈕。

<button wx:if="{{!hasUserInfo && canIUse && getUserInfoFail}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>

當用戶點選授權後，彈出一個彈窗，提示他授權，這個時候呼叫的是getUserInfo這個函式，程式碼如下：

getUserInfo: function(e) {
    console.log(5);
    console.log(e)
    if(e.detail.userInfo){
      app.globalData.userInfo = e.detail.userInfo
      this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: true
      })
    }else{
      this.openSetting();
    }
    
  },

如果我們可以獲取到detail.userInfo的值，說明引數正確，使用者點選了允許授權。如果使用者點選拒絕，這個時候我們就要呼叫openSetting這個函式。這個函式主要是開啟授權的地方，有相容性問題，低版本不支援。

openSetting: function () {
    var that = this
    if (wx.openSetting) {
      wx.openSetting({
        success: function (res) {
          console.log(9);
          //嘗試再次登入
          that.login()
        }
      })
    } else {
      console.log(10);
      wx.showModal({
        title: '授權提示',
        content: '小程式需要您的微信授權才能使用哦~ 錯過授權頁面的處理方法：刪除小程式->重新搜尋進入->點選授權按鈕'
      })
    }
  }

如果使用者進入了授權頁後，點選允許我們獲取使用者資訊，返回成功時，我們執行login這個函式，這時，我們就可以進入getuserInfo() 裡面拿到授權的資訊了。那麼頭像、使用者資訊和其它一些個人的資料都可以查到了。

完整的index.js如下：

//index.js
//獲取應用例項
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    getUserInfoFail:false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件處理函式
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onShow:function(){
    this.login();
  },
  onLoad: function () {
    
    if (app.globalData.userInfo) {
      console.log(1)
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      console.log(2)
      // 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback = res => {
        console.log(12)
        app.globalData.userInfo = res.userInfo
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      console.log(3)
      // 在沒有 open-type=getUserInfo 版本的相容處理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        },
        fail:res=>{
          console.log(4);
          this.setData({
            getUserInfoFail:true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(5);
    console.log(e)
    if(e.detail.userInfo){
      app.globalData.userInfo = e.detail.userInfo
      this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: true
      })
    }else{
      this.openSetting();
    }
    
  },
  login: function () {
    console.log(111)
    var that = this
    // if (typeof success == "function") {
    //   console.log(6);
    //   console.log('success');
    //   this.data.getUserInfoSuccess = success
    // }
    wx.login({
      success: function (res) {
        var code = res.code;
        console.log(code);
        wx.getUserInfo({
          success: function (res) {
            console.log(7);
            app.globalData.userInfo = res.userInfo
            that.setData({
              getUserInfoFail: false,
              userInfo: res.userInfo,
              hasUserInfo: true
              
            })
            //平臺登入
          },
          fail: function (res) {
            console.log(8);
            console.log(res);
            that.setData({
              getUserInfoFail: true
            })
          }
        })
      }
    })
  },
  //跳轉設定頁面授權
  openSetting: function () {
    var that = this
    if (wx.openSetting) {
      wx.openSetting({
        success: function (res) {
          console.log(9);
          //嘗試再次登入
          that.login()
        }
      })
    } else {
      console.log(10);
      wx.showModal({
        title: '授權提示',
        content: '小程式需要您的微信授權才能使用哦~ 錯過授權頁面的處理方法：刪除小程式->重新搜尋進入->點選授權按鈕'
      })
    }
  }
})

index.xml如下：

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse && getUserInfoFail}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
    <block wx:if="{{hasUserInfo}}">
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>