场景描述: 小程序有3个页面. 分别为 a页面
(首页面), b页面
, c页面
. 在app.js
中获取 openid
, 然后在 其他3个页面中使用.
问题描述: 我们在 app.js
的onLaunch
中获取到 openid, 然后 赋予 app.globalData.openid
中, 但是在 a页面
的 onLoad
中输出app.globalData.openid
, 却为空. b页面
点击,可以输出,c页面
点击,也可以输出.再点击到a页面
, 此时也可以输出.
问题分析: 在 app.js
中获取openid
是异步
的,所以导致,可能执行到的第一个页面 a页面
的 onLoad
时候,openid
还没有返回.导致 第一个页面a页面
的 onLoad
中没有获取到 app.globalData.openid
解决方案: 在第一次登录小程序的时候,是没有任何信息的,此时,我们到登录页面登录,登陆之后,有了全局的openid
,和缓存openid
. 后面我们第二次登陆, 在 a页面(首页吗)
中查看是否存在 缓存openid
, 如果不存在,说明客户肯定是第一次登陆.则清除所有的缓存和去全局. 如果存在, 还分为2种情况, 此时需要用 wx.checkSession
来检测是否登录过期,第一种情况, 没有登录过期,则直接使用缓存即可. 第二种情况, 登录过期,则清除所有状态. 后续操作, 都使用全局. 在第一种情况下, 把缓存openid
赋值给全局openid
. 后续操作也是一样.
思路: 第一次登陆的时候, 存了 缓存openid
后续根据这个来判断 是否登陆过, 如果 缓存openid
存在, 则在根据 wx.checkSession
来判断,用户登陆是否过期, 如果没有过期, 则直接使用. 如果过去,清除所有状态. 在其他页面中, 可以直接判断 app.globalData.openid
是否存在,存在表示登录,不存在表示没有登录. 其他页面不用考虑异步的情况.
注意: 这个判断要放在 a页面(首页面)
的 onshow
中, 因为有可能是之前没有登录,后来点击登录了,再点击回来,所以每次都要验证一下. 我们这个首页面的判断, 是针对首页面的,其他页面可以直接通过 缓存
或者全局
来判断是否登录失效. 我这个项目是3个页面来回切换,所以逻辑判断需要放在 onShow
中执行.
个人显示头像信息页面: 之前的判断去掉, 然后把判断放在 onshow
中. 如下
onShow: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
}
},
部分重要代码:
- 首页面代码
//app.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function (options) {
/**
* 判断 缓存openid 是否存在
* 不存在, 说明之前没有登陆过,是第一次登陆, 此时清除所有状态.
* 存在,分为2种情况,通过 wx.checkSession 来判断
* 第一种情况, 没有过期, 则直接赋值使用.
* 第二种情况, 已经过期, 此时清除所有状态.
*/
if (wx.getStorageSync('openid')) {
wx.checkSession({
success: (res) => {
//session_key 未过期,并且在本生命周期一直有效, 把之前的缓存赋值给2个全局变量
app.globalData.openid = wx.getStorageSync('openid');
app.globalData.userInfo = wx.getStorageSync('userInfo');
// 获取到 openid,做后续操作.
},
fail: (res) => {
// session_key 已经失效,需要重新执行登录流程, 清除缓存和全局信息
try {
wx.removeStorageSync('openid');
wx.removeStorageSync('userInfo');
app.globalData.openid = '';
app.globalData.userInfo = null;
// 没有获取到,做后续操作
} catch (e) {
console.log("清除缓存失败!");
}
},
})
} else {
console.log("没有登录");
//缓存不存在,清除下所有状态.
try {
wx.removeStorageSync('openid');
wx.removeStorageSync('userInfo');
app.globalData.openid = '';
app.globalData.userInfo = null;
// 没有获取到,做后续操作
} catch (e) {
console.log("清除缓存失败!");
}
}
},
...
- 其他页面
onShow: function () {
if(app.globalData.openid){
console.log('登录');
}else{
console.log('没有登录');
}
},
全部代码
- a 页面(首页吗)
// pages/test1/test1.js
//获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
/**
* 判断 缓存openid 是否存在
* 不存在, 说明之前没有登陆过,是第一次登陆, 此时清除所有状态.
* 存在,分为2种情况,通过 wx.checkSession 来判断
* 第一种情况, 没有过期, 则直接赋值使用.
* 第二种情况, 已经过期, 此时清除所有状态.
*/
if (wx.getStorageSync('openid')) {
wx.checkSession({
success: (res) => {
console.log("登录");
//session_key 未过期,并且在本生命周期一直有效, 把之前的缓存赋值给2个全局变量
app.globalData.openid = wx.getStorageSync('openid');
app.globalData.userInfo = wx.getStorageSync('userInfo');
// 获取到 openid,做后续操作.
},
fail: (res) => {
console.log("登录失败");
// session_key 已经失效,需要重新执行登录流程, 清除缓存和全局信息
try {
wx.removeStorageSync('openid');
wx.removeStorageSync('userInfo');
app.globalData.openid = '';
app.globalData.userInfo = null;
// 没有获取到,做后续操作
} catch (e) {
console.log("清除缓存失败!");
}
},
})
} else {
console.log("没有登录");
//缓存不存在,清除下所有状态.
try {
wx.removeStorageSync('openid');
wx.removeStorageSync('userInfo');
app.globalData.openid = '';
app.globalData.userInfo = null;
// 没有获取到,做后续操作
} catch (e) {
console.log("清除缓存失败!");
}
}
},
})
- 第二个页面, 个人登录页面
//index.js
//获取应用实例
const app = getApp()
const util = require("../../utils/util");
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
bindQuit: function () {
wx.removeStorageSync('openid');
wx.removeStorageSync('userInfo');
app.globalData.openid = '';
app.globalData.userInfo = null;
this.setData({
userInfo: null,
hasUserInfo: false
})
},
onLoad: function () {
},
onShow: function () {
if (app.globalData.userInfo) {
console.log("登录");
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
}else{
console.log("没有登录");
}
},
getUserInfo: function (e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo;
//设置缓存userInfo
wx.setStorageSync('userInfo', e.detail.userInfo);
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
const that = this;
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
const code = res.code;
const url = app.globalData.httpBase + "/api/xcx/getOpenid?code=" + code;
util.newhttp(url).then(function (res) {
const resData = res.data;
if (resData.code == 1) {
app.globalData.openid = resData.data.openid;
wx.setStorageSync('openid', resData.data.openid);
}
}).catch(function (error) {
console.log(error);
})
}
})
}
})
- 第三个页面
// pages/test2/test2.js
//获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
if(app.globalData.openid){
console.log('登录');
}else{
console.log('没有登录');
}
},
})