小程序onLaunch和onload先后顺序

前言：一般我们会在用户首次进入时（任何页面）执行一次操作获取用户数据，所以onLaunch是我们很好的选择
onLaunch和页面的onLoad是异步操作，就会存在用户数据还没有获取到，页面的onLoad就执行完了，导致onLoad拿不到用户数据

所以这里我采用的方法是定义回调函数
在page页面判断一下当前app.globalData.employ是否有值，如果没有，说明是第一次调用，则定义一个（回调函数）

app.employCallback = employ =>{ ...}
1

App页面在请求success后判断时候有Page页面定义的回调方法，如果有就执行该方法。

//app.js
App({
  globalData: {
    employ: '',
    userInfo: null,
  },
  onLaunch: function () {
    let userInfo = wx.getStorageSync('userInfo') || null,
     that = this;
    // 更新userInfo
    wx.request({
      url: '你的地址',
      header: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json',
      },
      method: 'POST',
      data: {},
      success: function (res) {
        if (res.data.status == 0) {
          let obj = res.data.data;
          that.globalData.userInfo = obj;
          wx.setStorageSync('userInfo', userInfo)
        } else {
          wx.setStorageSync('userInfo', null);
        };
        that.globalData.employ = true;
        /* 由于这里是网络请求，可能会在 Page.onLoad 之后才返回  在onLoad中定义下app.employCallback 后才执行下述that.employCallback(true)，此时用户数据肯定得到了，回调内再则可获取到用户数据
        * 所以此处加入 callback 以防止这种情况 */
        if (that.employCallback) {
          that.employCallback(true);
        }
      },
    }); 
  }, 
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在首页里

//sequence.js
const app = getApp()

Page({
  data: {
    userInfo:null,
  },
  onLoad: function () {
    let that = this;
    if (app.globalData.employ && app.globalData.employ != '') {
      console.log("first")
      let userInfo = app.globalData.userInfo;
      that.setData({
        userInfo: userInfo ? userInfo : null
      });
    } else {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.employCallback = employ => {
        if (employ != '') {
          that.setData({
            userInfo: app.globalData.userInfo
          });         
        }
      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

这样就可以实现我们想要的顺序:
[App] onLaunch => [Page] onLoad => [App] onLaunch sucess callback

方法二：设置自定义钩子

//app.js
//globalData提出来声明
let globalData = {
  // 是否已拿到token
  token: '',
  // 用户信息
  userInfo: {
    userId: '',
    head: ''
  }
}
//注册自定义钩子
import CustomHook from 'spa-custom-hooks';
CustomHook.install({
 'Login':{
    name:'Login',
    watchKey: 'token',
    onUpdate(token){
      //有token则触发此钩子
      return !!token;
    }
  },
 'User':{
    name:'User',
    watchKey: 'userInfo',
    onUpdate(user){
      //获取到userinfo里的userId则触发此钩子
      return !!user.userId;
    }
  }
}, globalData)
// 正常走初始化逻辑
App({
  globalData,
  onLaunch() {
      //发起异步登录拿token
      login((token)=>{
          this.globalData.token = token
          //使用token拿用户信息
          getUser((user)=>{
             this.globalData.user = user
          })
     })
   }
}）
//关键点来了
//Page.js，业务页面使用
Page({
  onLoadLogin() {
       //拿到token啦，可以使用token发起请求了
       const token = getApp().globalData.token
    },
  onLoadUser() {
       //拿到用户信息啦
       const userInfo = getApp().globalData.userInfo
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57