【问题描述】
今天写小程序项目的时候发现了一个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的解决办法