微信小程序onLaunch異步，首頁(yè)onLoad先執(zhí)行?

本來(lái)按照事件順序，小程序初始化時(shí)觸發(fā)App里的onLaunch，后面再執(zhí)行頁(yè)面Page里的onLoad，但是在onLaunch里請(qǐng)求獲取是否有權(quán)限，等待返回值的時(shí)候Page里的onLoad事件就已經(jīng)執(zhí)行了。

1. //app.js
2. App({
3. onLaunch: function () {
4. console.log('onLaunch');
5. wx.request({
6. url: 'test.php', //僅為示例，并非真實(shí)的接口地址
7. data: {
8. },
9. success: function(res) {
10. console.log('onLaunch-request-success');
11. // 將employId賦值給全局變量，提供給頁(yè)面做判斷
12. this.globalData.employId = res.employId;
13. }
14. })
15. },
16. globalData: {
17. employId: ''
18. }
19. })

1. //index.js
2. //獲取應(yīng)用實(shí)例
3. const app = getApp()
4.  
5. Page({
6. data: {
7. albumDisabled: true,
8. bindDisabled: false
9. },
10. onLoad: function () {
11. console.log('onLoad');
12. console.log('onLoad app.globalData.employId = ' + app.globalData.employId);
13. //判斷是用戶是否綁定了
14. if (app.globalData.employId && app.globalData.employId != '') {
15. this.setData({
16. albumDisabled: false,
17. bindDisabled: true
18. });
19. }
20. })

控制臺(tái)打印的結(jié)果是

1. onLaunch
2. onLoad
3. onLoad app.globalData.employId =
4. onLaunch-request-success

要是能等完onLaunch請(qǐng)求完再執(zhí)行Page的onLoad方法那該多好。  這里采用的方法是定義一個(gè)回調(diào)函數(shù)。  Page頁(yè)面判斷一下當(dāng)前app.globalData.employId是否有值，如果沒(méi)有（第一次）則定義定義一個(gè)app方法（回調(diào)函數(shù)）app.employIdCallback = employId => {...}。  App頁(yè)面在請(qǐng)求success后判斷時(shí)候有Page頁(yè)面定義的回調(diào)方法，如果有就執(zhí)行該方法。因?yàn)榛卣{(diào)函數(shù)是在Page里面定義的所以方法作用域this是指向Page頁(yè)面。

1. //app.js
2. App({
3. onLaunch: function () {
4. wx.request({
5. url: 'test.php', //僅為示例，并非真實(shí)的接口地址
6. data: {
7. },
8. success: function(res) {
9. this.globalData.employId = res.employId;
10. //由于這里是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
11. // 所以此處加入 callback 以防止這種情況
12. if (this.employIdCallback){
13. this.employIdCallback(res.employId);
14. }
15. }
16. })
17. },
18. globalData: {
19. employId: ''
20. }
21. })

1. //index.js
2. //獲取應(yīng)用實(shí)例
3. const app = getApp()
4.  
5. Page({
6. data: {
7. albumDisabled: true,
8. bindDisabled: false
9. },
10. onLoad: function () {
11. //判斷是用戶是否綁定了
12. if (app.globalData.employId && app.globalData.employId != '') {
13. this.setData({
14. albumDisabled: false,
15. bindDisabled: true
16. });
17. } else {
18. // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
19. // 所以此處加入 callback 以防止這種情況
20. app.employIdCallback = employId => {
21. if (employId != '') {
22. this.setData({
23. albumDisabled: false,
24. bindDisabled: true
25. });
26. }
27. }
28. }
29. }
30. })

這樣的話，就能實(shí)現(xiàn)想要的結(jié)果。執(zhí)行順序就是：

1. [App] onLaunch -> [Page] onLoad -> [App] onLaunch sucess callback