评论
微信小程序app.js异步抛出请求数据,app.js无法使用this.setData问题

微信小程序app.js异步抛出请求数据,app.js无法使用this.setData问题

人常常都是这么误会自己的,以为自己恋旧,以为自己长情,其实只是你现在过得不好罢了

灵沐出来也有一些时间了,我们会发现strapi这个框架是真的不好安装,虽然它摆脱了wordpress后台但是效果没有预计好


我们是发现灵沐在第一次进入的时候首页的背景是空白的,第二次进入的时候背景就会出现控制台和缓存中没有错误提示,数据中也是存在背景图片地址,那为啥首次打开出现空白呢?


这要从app.js的缓存事件说起

起因

为了节约接口的请求次数,设计初想把基本的配置内容一次请求完毕,添加至缓存中。这样打开其他页面只需要调用缓存即可,若我在调试小程序中修改了后台数据,小程序缓存就要更新,因此就要考虑到生命周期onShow和onLaunch选择

导致

按照逻辑app.js请求数据存为缓存,index页面调用缓存。问题出现在app.js和index他们同时触发,导致了第一次访问在缓存中会有数据,而首页背景依然是空白渲染不出数据

那大家是否会有一个疑问,热门推举中它会有数据出现呢?既然也是需要通过后台配置,却一个出可以出现一个无法出现


其实热门推举也是没办法获取后台的配置的,只是因为这个接口它在没有获取到配置参数时候默认会请求所有文章,大家才能看到内容;证明了一句话:

枫瑞的程序,没有一些bug衬托还运行不起来

奇思

发现问题时候采用最朴实的setTimeout函数解决,app.js请求之后,index延迟200毫秒

在和codezen大佬交流中直接告诉我这是非常不理智的,假设对方网速差,延迟过了200毫秒就无法走通

而且app.js无法使用this.setData

 解决

如何正确解决该异步呢?正确的做法应该是在app.js请求结束抛出

// 请求基本数据
  getSetDate() {
    const that=this
    API.getFrSet().then((res) => {
      const accountInfo = wx.getAccountInfoSync();
      // 保存微信端配置
      console.log('请求基本数据', res.data.data.attributes)
      wx.setStorageSync('frSet', res.data.data.attributes)
    
    // 抛出请求返回给其他页面
      if (this.wxConfigCallback) {
        this.wxConfigCallback(res)
      }
    
    })
  },
​
​

index页面函数中调用

  // 获取缓存信息
  getSystemInfo() {
    // 接收app.js抛出数据
    app.configCallback = (res) => {
      //执行业务逻辑...
      consloe.log(res)
    }
  },

最后

学习+3

头发-2