小程序中app.js异步获取数据，首页无法获取到数据的问题

慢慢雨夜

于 2023-11-02 23:06:09 发布

阅读量308

点赞数 3

文章标签：小程序 javascript 前端

本文链接：https://blog.csdn.net/qq_31594665/article/details/134193114

版权

文章讲述了在微信小程序中，如何使用`app.js`的`onLaunch`生命周期钩子和`getUserInfo`接口获取用户信息，并确保在用户信息成功获取后正确更新到`index.js`中的页面。重点介绍了`userInfoReadyCallback`的作用和两种设置方法。

摘要由CSDN通过智能技术生成

应用【app.js】

onLaunch: function () {
    wx.getUserInfo({
      success: res => {
        //【1】获取用户信息保存
        this.globalData.userInfo = res.userInfo
        
         //正常流程是 先getUserInfo 然后再执行index中的东西
         // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
         // 所以此处加入 callback 以防止这种情况
         //这段的意思是是否存在userInfoReadyCallback这个方法，如果存在，就执行。

         //1,不正常:如果在index.js执行完毕后 getUserInfo还没执行完，那么就执行index中定义的函数
         //2，正常：如果getUserInfo正常返回了 数据 这段就不会执行
         
        //等待函数定义并执行
        if (this.userInfoReadyCallback) {
          this.userInfoReadyCallback(res);
        }
      }
    })
}

页面【index.js】

nLoad: function () {
  //【2】显示用户信息
  // 给app.js 定义一个方法
  //  写法一
  app.userInfoReadyCallback = res => {
    this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
    });
  }

  //  写法二
  //上面的箭头函数的写法相当于
  app.userInfoReadyCallback(res){ 
    this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
    })
  }
}