+
80
-

微信小程序如何实现page的onload request在app onlanch结束后触发?

微信小程序如何实现page的onload request在app onlanch结束后触发?

因为app onlanch中有用户登录的request请求,如果没有完成就执行page onload中的request,会出现登录失败的错误

网友回复

+
0
-

三种方案

一、promise

在app.js中声明一个userLogin函数

App({
onLaunch: function() {
console.log('App Launch')
//不在这里默认请求
},
/**
* 定义全局变量
*/
globalData: {
openid: '', //用户openid
userId: '', //用户编号
},
/**
* 用户登录请求封装(解决onlaunch和onload执行顺序问题)
*/
userLogin: function() {
var that = this;
//定义promise方法
return new Promise(function(resolve, reject) {
// 调用登录接口
wx.login({
success: function(res) {
if (res.code) {
console.log("用户登录授权code为:" + res.code);
//调用wx.request请求传递code凭证换取用户openid,并获取后台用户信息
wx.request({
url: 'https://www.xxxx.xxx.api', // 后台请求用户信息方法【注意,此处必须为https数字加密证书】
data: {
code: res.code //code凭证
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
if (res.data.errcode == 0) {
//获取用户信息成功
that.globalData.openid = res.data.openid;
that.globalData.userId = res.data.UserId;
//存入session缓存中
wx.setStorageSync("userId", that.globalData.userId)
console.log(that.globalData.userId);
console.log(that.globalData.openid);
//promise机制放回成功数据
resolve(res.data);
} else {
reject('error');
}
},
fail: function(res) {
reject(res);
wx.showToast({
title: '系统错误'
})
 },
complete: () => {

} //complete接口执行后的回调函数,无论成功失败都会调用
})
} else {
reject("error");
}
}
})
})
}});

然后再每个page的onload request请求执行改变改为

const app=getApp();//初始化app.js
page({

onLoad: function (option) {
var that = this;
let UserId = wx.getStorageSync("userId");
console.log("进入首页的用户编号为:" + UserId);
if (UserId == '') {
app.userLogin().then(res => {
console.log("promise回调后的数据:");
console.log(res);
if (res.errcode == 0) {
//把首页需要请求的数据接口都提取到一个自定义方法中
that.GetData();
}
})
}
else
{
//用户缓存存在
that.GetData();
}

}
,
GetData()
{
//需要用到用户编号换取商品信息的接口

}
})

二、定时查询

app.js中还是往常一样登录获取用户的id,但是在page onload中我们会定时查询userid,看看有没有值,有值就request,没值就定时等待

//app.js
App({
  onLaunch: function () {
    wx.request({
      url: 'test.php', //仅为示例,并非真实的接口地址
      data: {
      },
      success: function(res) {
        this.globalData.userid= res.userid;
      
      }
    })
  },
  globalData: {
    userid: ''
  }
})


//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    albumDisabled: true,
    bindDisabled: false
  },
  getdata:function(){},
  onLoad: function () {
    //500毫秒查询一次是否获取了userid
    var checkuser = setInterval(function () {
      var userid=app.globalData.userid
      if (userid!="") {
        clearTimeout(checkuser);
        that.getdata();
      }
    }, 500);
   
  }
})

三、app 回调函数

//app.js
App({
  onLaunch: function () {
    wx.request({
      url: 'test.php', //仅为示例,并非真实的接口地址
      data: {
      },
      success: function(res) {
        this.globalData.userid= res.userid;
        //由于这里是网络请求,可能会在 Page.onLoad 之后才返回
        // 所以此处加入 callback 以防止这种情况
        if (this.useridCallback){
           this.useridCallback(res.userid);
        }
      }
    })
  },
  globalData: {
    userid: ''
  }
})


//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    albumDisabled: true,
    bindDisabled: false
  },
  onLoad: function () {
    //判断是用户是否绑定了
    if (app.globalData.userid&& app.globalData.userid!= '') {
      this.setData({
        albumDisabled: false,
        bindDisabled: true
      });
    } else {
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.useridCallback = userid=> {
        if (userid!= '') {
          this.setData({
            albumDisabled: false,
            bindDisabled: true
          });
        }
      }
    }
  }
})

我知道答案,我要回答