小程序app.onLaunch中獲取用戶信息，index.onLoad初次載入時取不到值的問題

問題描述：

//app.js
App({
  globalData:{
    nickname:''
  },
  onLaunch: function () {
    let that=this;
    //假設已經授權成功
    wx.getUserInfo({
        success(res){
            //獲取用戶信息並賦值給globalData
            that.globalData.nickname=res.userInfo.nickName;
        }
    })


  }
})

//index.js
const app = getApp()
Page({
  data: {
    myNickName:''
  },
  onLoad: function (option) {
    console.log(app.globalData.nickname); //結果："" 
    this.setData({
        myNickName:app.globalData.nickname
    })
    //由於wx.getUserInfo()是異步請求，不知道什么時候成功返回數據，導致獲取失敗
  }
})

 

時序圖描述:

 

 

解決方案

 

//app.js
App({
  globalData:{
    nickname:''
  },
  onLaunch: function () {
    let that=this;
    //假設已經授權成功
    wx.getUserInfo({
      success(res) {
        let tmp=res;
        
        setTimeout(()=>{//更清楚的模擬異步環境，設置5秒后執行代碼
          //獲取用戶信息並賦值給globalData
          that.globalData.nickname = res.userInfo.nickName;
          if (that.userInfoReadyCallback) {
            console.log('call back')
            that.userInfoReadyCallback(res.userInfo.nickName)
          }
        },5000)

      }
    })

  }
})

//index.js
const app = getApp()
Page({
  data: {
    myNickName:''
  },
  onLoad: function (option) {
    let that = this;
    let mynickname = app.globalData.nickname;
    //如果app.onLaunch中的wx.getUserInfo()返回夠快
    //在app.onLoad之前就已經初始化了app.globalData.nickname則直接更新本界面的this.data.nickname
    if(mynickname.length){
      this.setData({
        nickname:mynickname
      })
    //定義回調函數，一旦app.onLaunch的wx.getUserInfo獲取到用戶信息的時候，立即運行該回調函數
    }else{
      app.userInfoReadyCallback=res=>{
        this.setData({
          nickname:res
        })
      }
    }
  }
})

解決方案時序圖：

 

 

總結

1.巧用回調函數

 

參考：https://blog.csdn.net/zjw_python/article/details/80641963