【问题描述】

今天写小程序项目的时候发现了一个bug,页面加载顺序问题:
我自己写了一个user界面,调用use.js初始化时需要根据app.js里面全局变量globalData的openid判断是否将用户信息存入云数据库,但是调试的时候发现加载顺序有问题。
点开调试器发现,页面先加载了user.js,导致我的user.js里面写的一个接口获取到的App.globalData.openid为空,然后判断此用户不存在,一直不断重复插入用户数据,等user.js全部加载完才加载app.js,将获取到的openid存入全局变量。

【解决方法】

这里我用的解决办法是加个定时器,在user.js里一直执行,直到app.js执行完毕将获取到的openid存入全局变量,再执行user.js调用的接口,这样就能让app.js先加载完后再执行user.js里面的那个接口,解决加载顺序问题。

【 user.js 部分】
// 第一步:在data里面加上定时器设置
data:{
	setInter: '', //设置定时器
},

// 第二步:在onLoad里面调用接口
onLoad: function (options) {
    this.startSetInter()
}

// 第三步:设置定时
startSetInter: function () {
     var that = this;
     //将计时器赋值给setInter
     that.data.setInter = setInterval(
        function () {
            that.queryUser() //这里的queryUser()是我自己写的去云数据库获取数据的接口
        }, 2000);
  },

下面是我自己写的queryUser接口:

// 我写的queryUser方法:检查数据库是否有此用户
// 贴上这个接口是因为有一行代码很重要,要取消定时器:
// clearInterval(that.data.setInter) 
    queryUser: function () {
        var that = this
        const openid = app.globalData.openid
        console.log("【queryUser】用户openid:", openid)
        if (openid == null) {
            return
        } else {
            const db = wx.cloud.database()
            db.collection('数据库表名').where({
                _openid: openid
            }).get({
                success: res => {
                    // 存在此用户
                    if (res.data.length > 0) {
                        that.setData({
                            motto: res.data[0].motto
                        })
                    } else {
                        that.addNewUser()  //如果没有用户就插入用户信息
                    }
                    clearInterval(that.data.setInter) //最重要的是这里要取消定时了
                    console.log("用户查询成功:", res)
                },
                fail: err => {
                    wx.showToast({
                        title: '用户查询失败',
                        icon: 'none'
                    })
                    console.error("用户查询失败:", err)
                }
            })
        }
    },

由于我只是完成自己的期末作业,所以代码没考虑很多,比较简单,直接在app.js里面获取openid,希望有帮助吧!

【参考大佬的链接】
微信小程序app.js加载慢导致home.js无法获取到userId的解决办法

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐