微信小程序中当有异步操作或者耗时同步操作时,不能保证app.js中的onLaunch与page.js
发表时间:2020-9-26
发布人:葵宇科技
浏览次数:135
微信小程序中当有异步操作或者耗时同步操作时,不能保证app.js中的onLaunch与page.js中onLoad先后执行顺序的解决方案
我在此为大家汇总了三种解决方案,大家普遍都会用这里的前两种方法,个人认为我的第三种方法更加巧妙且方便
方法一:
解决方法:定义回调函数
小程序网络请求默认为异步请求,在appjs的onLaunch运行后进行异步请求时,程序不会停止,Page页已执行onload,
我们希望onLaunch执行完后再执行onload。 目标:>//app.js App({ >: function () { wx.request({ url: 'http://test.cn/login', //仅为示例,并非真实的接口地址 data: {}, success: function(res) { this.globalData.checkLogin = true; //由于这里是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.checkLoginReadyCallback){ this.checkLoginReadyCallback(res); } } }) }, globalData: { checkLogin: false } }) //index.js //获取应用实例 const app = getApp() Page({ data: { test: false }, >: function () { let that = this; //判断onLaunch是否执行完毕 if (app.globalData.checkLogin){ that.setData({ test:true }) }else{ app.checkLoginReadyCallback = res => { that.setData({ test:true }) }; } } })执行顺序:[App]> //app.js: //将你本来写在>:function(){ login:function(){ let that = this; return new Promise(function (resolve, reject) { // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId if (res.code) { // console.log('获取用户登录凭证:' + code); // ------ 发送凭证 ------ /* * 通过code获取登录session */ wx.request({ url: 'xxx/login?code=' + res.code, method: 'GET', header: { 'content-type': 'application/json' }, success: function (res) { console.log(res) if (res.statusCode == 200) { // 注意这里 resolve(res); } else { console.log(res.errMsg) } }, }) } else { console.log('获取用户登录失败:' + res.errMsg); } } }) }) } } //page.js onLoad: function (options) { let _this = this; app.login().then(function (res) { let newDate = new Date(); // 修改到当前的时间 _this.changeNowTime(); }) },
方法三:
解决方法:通过getCurrentPages()[0].onLoad()重新执行一次page.js中的onLoad方法
不用每个页面都写相关逻辑,只需要在app.js中加入以下几行相关代码即可
缺点:page.js中的onload方法会执行两次!//app.js >: function (info) { //当进入小程序的场景为通过分享进入时,预防onLoad钩子请求不到数据 if (info.path !== 'xxxxx/xxx/xxx') { console.log('info', info); setTimeout(() => { console.log('getCurrentPages', getCurrentPages()); getCurrentPages()[0].onLoad(info.query); }, 1000); } // 登录 wx.login({ success: (xxx) => { //xxxxxx }, }); }
最后:希望大家补充其它相关方法,分享是每一位程序员都要有的美德~
转载请注明出处!谢谢~
by:汪荣顶