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

  前段时间开发了一款微信小程序,运行了也几个月了,在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
          });
        }
      }
    }
  }
})
 

 

转载于:https://www.cnblogs.com/jiangtengteng/p/10837659.html

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面分享一个微信小程序的猜成语小游戏示例,并详细讲解index.js的框架使用方法。 首先,我们需要创建一个微信小程序项目,并在项目目录下新建一个 `index.js` 文件作为小程序的入口文件。然后,在 `app.json` 配置首页路径为 `pages/index/index`,这样小程序就会首先加载 `pages/index/index` 页面,并执行 `index.js` 的代码。 下面是一个简单的猜成语小游戏示例: ```javascript // 引入成语列表 const idioms = require('./data/idioms.js') // 随机获取一个成语 function getRandomIdiom() { const index = Math.floor(Math.random() * idioms.length) return idioms[index] } // 将成语转换为数组 function idiomToArray(idiom) { return idiom.split('') } // 获取打乱顺序的成语数组 function getShuffledIdiom(idiom) { const arr = idiomToArray(idiom) const shuffledArr = arr.sort(() => Math.random() - 0.5) return shuffledArr } // 判断答案是否正确 function isAnswerCorrect(answer, idiom) { return answer === idiom } // 主函数 App({ // 全局变量 globalData: { idiom: '', shuffledIdiom: [], }, // 生命周期函数,小程序启动时执行 onLaunch: function () { // 随机获取一个成语 const idiom = getRandomIdiom() // 将成语转换为数组并打乱顺序 const shuffledIdiom = getShuffledIdiom(idiom) // 设置全局变量 this.globalData.idiom = idiom this.globalData.shuffledIdiom = shuffledIdiom }, // 事件处理函数,处理用户提交答案事件 handleSubmitAnswer: function (event) { const answer = event.detail.value.toLowerCase() const idiom = this.globalData.idiom.toLowerCase() if (isAnswerCorrect(answer, idiom)) { wx.showToast({ title: '回答正确!', icon: 'success', duration: 2000 }) } else { wx.showToast({ title: '回答错误!', icon: 'none', duration: 2000 }) } } }) ``` 这个小游戏的逻辑很简单:首先,从 `data/idioms.js` 引入成语列表,然后定义一些函数来随机获取成语、将成语转换为数组并打乱顺序、判断答案是否正确等。接着,在 `App` 对象定义全局变量和生命周期函数,在 `onLaunch` 生命周期函数随机获取一个成语并打乱顺序,然后将它们保存到全局变量。最后,在 `handleSubmitAnswer` 事件处理函数处理用户提交答案事件,判断答案是否正确,并通过 `wx.showToast` 方法弹出提示框来提醒用户是否回答正确。 在小程序的页面,我们可以通过 `getApp()` 方法获取全局的 `App` 对象,并通过它来访问全局变量和调用事件处理函数。例如,在 `pages/index/index.js` 的 `onLoad` 生命周期函数,我们可以通过 `getApp().globalData` 来获取全局变量,并将它们保存到页面的 `data` ,以便在页面渲染成语和打乱顺序的成语数组。在页面的 `wxml` ,我们可以使用 `wx:if` 来根据页面的状态来显示不同的内容,例如:当用户回答正确时,显示一个按钮来获取下一个成语。 这个小游戏还有很多可以改进的地方,例如:添加计时器、添加排行榜、添加提示等。但这个示例已经足够演示如何使用 `index.js` 的框架来编写一个简单的微信小程序
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值