微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法 ...

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

　　前段时间开发了一款微信小程序，运行了也几个月了，在index.js中的onLoad生命周期里获取app.js中onLaunch生命周期中在接口里动态设置的globalData一直没有问题，结果昨天就获取不到动态设置的global数据了。因为我要获取小程序的unionid以及通过unionid去获取微信的openId，并且共享数据，最开始我是通过storage来做数据共享的，后来测试发现storage存在莫名被清空的情况，后来转用globalData来做数据共享，查了下，是因为app.js中的onLaunch是异步的，当小程序首页打开的时候，app.js中在onLaunch里的接口还没有通没有返回值，也就没有办法设置相应的globalData，但index.js已经执行了，当然就拿不到在app.js中动态设置的globalData的值了，我们需要的是onLaunch请求完之后，再执行index.js中的onLoad方法，解决方案如下：

　　在首页index.js中先判断一下当前app.globalData.testData是否有值，如果有则正常操作，如果没有（第一次）则定义定义一个app方法（回调函数）app.testDataCallback = testData => {...}，app.js在请求success里，判断index.js是否定义了回调方法，如果有就执行该方法。因为回调函数是在index.js中定义的方法，所以作用域 this 指向index页面，下面我们看下示例代码。

//app.js
App({
  onLaunch: function () {
    wx.request({
      url: 'test.ashx', //示例接口
      data: {
      },
      success: function(res) {
        //设置全局变量
        this.globalData.testData = res.testData;
        //由于这里是网络请求，可能会在 Page.onLoad 之后才返回  所以此处加入 callback 以防止这种情况
        if (this.testDataCallback){
           this.testDataCallback(res.testData);
        }
      }
    })
  }
})

//index.js
//获取应用实例
const app = getApp()

Page({
  onLoad: function () {
    //判断是否获取到动态设置的globalData
    if (app.globalData.testData && app.globalData.testData != '') {
      this.setData({
        testData: true
      });
    } else {
      // 声明回调函数获取app.js onLaunch中接口调用成功后设置的globalData数据
      app.testDataCallback = testData => {
        if (testData != '') {
          this.setData({
            testData: true
          });
        }
      }
    }
  }
})