{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','http://www.shouhuola.com/static/css/dist/css/images/default.jpg', '推荐 慢半拍 的文章《微信小程序登录授权 并解决app.js中的onLaunch中的数据 在page的onLoade中接收》','http://www.shouhuola.com/article-52303.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
首先理一下授权登录的顺序 1.用户进入小程序有一个默认页面 在这个默认页面的onLoade中设置一个只有点击授权才能得到的数据
2.当用户打开小程序进入默认页面 如果获取不到这个数据就跳转到登陆页面
3.登录页面只有点击授权登录之后才会生成这个数据 并跳转到首页
如:
wx.getStorage({
key: 'success',
success: function (res) {
},
fail: function (res) {
wx.redirectTo({
url: '../login/login',
})
},
complete: function (res) {
},
})12345678910111213
在点击授权登录的页面设置点击授权之后 给一个success在storge中
如
bindGetUserInfo: function (e) {
if (e.detail.userInfo) {
wx.setStorage({
key: 'success',
data: '1',
})
// var timestamp = Date.parse(new Date())
// var expiration = timestamp + 30000
// wx.setStorageSync('index_data', res.data.data)
// wx.setStorageSync('index_data_expiration', expiration)
app.onLaunch()
//用户按了允许授权按钮
let that = this;
wx.switchTab({
url: '../homepage/homepage'
})
} else {
//用户按了拒绝按钮
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
showCancel: false,
confirmText: '返回授权',
success: function (res) {
if (res.confirm) {
console.log('用户点击了“返回授权”')
}
}
})
}
},
1234567891011121314151617181920212223242526272829303132
再来看app.js中的代码 app.js中设置了登录的请求 并接收到微信小程序传递过来的个人信息
wx.getSetting({
success: res => {
console.log(res)
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
lang:"zh_CN",
success: res => {
// 可以将 res 发送给后台解码出 unionId
console.log(res)
this.globalData.userInfo = res.userInfo
console.log(this.globalData.urls)
wx.request({
url: this.globalData.urls + "/api/login/get_openid",
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded",
'content-type': 'application/json' // 默认值
},
data: {
code: code,
nickname: this.globalData.userInfo.nickName,
gender: this.globalData.userInfo.gender,
avatarUrl: this.globalData.userInfo.avatarUrl,
city: this.globalData.userInfo.city
},
success: res => {
console.log(res)
wx.setStorage({
key: 'token',
data: res.data.data.token
})
this.globalData.account = res.data.data.account
this.globalData.token = res.data.data.token
const account = res.data.data.account
if (this.employIdCallback) {
this.employIdCallback(account);
}
//在res中返回的有account token
// that.globalData.openid = res.data.openid
console.log(this.globalData.account, this.globalData.token)
}
})
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
}
})
},
onShow: function() {
// this.globalData.scence = wx.getStorageSync('scence')
// if (this.globalData.scence) {
// wx.switchTab({
// url: 'pages/homepage/homepage',
// success: function(res) {
// console.log(res)
// },
// fail: function(err) {
// console.log(err)
// }
// })
// }
},
onHide: function() {
this.globalData.scence = 1
wx.setStorageSync('scence', this.globalData.scence)
},
globalData: {
account: '',
stroge: 0,
openid: 0,
userInfo: null,
times: null,
urls: 'https://wx.knowdao.com',
urlst: 'http://test.knowdao.com',
token: ''
}
})12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
在page页面的onLoade函数中开始调用回调函数获取app.js中设置的全局变量的数据
const that = this
if (app.globalData.account && app.globalData.account != ''){
wx.request({
url: app.globalData.urls + "/api/follow/list", //仅为示例，并非真实的接口地址
method: "POST",
header: {
account: app.globalData.account,
token: app.globalData.token,
"content-type": "application/x-www-form-urlencoded",
'content-type': 'application/json' // 默认值
},
success: function (res) {
if (res.data.status == 200) {
that.setData({
focusman: res.data.data
})
console.log(that.data.focusman)
} else {
console.log('error');
return false;
}
}
})
} else {
const account = app.globalData.account
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.employIdCallback = account => {
if (account != '') {
wx.request({
url: app.globalData.urls + "/api/follow/list", //仅为示例，并非真实的接口地址
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded",
'content-type': 'application/json' ,// 默认值
account: app.globalData.account,
token: app.globalData.token,
},
success: function (res) {
console.log(res)
console.log(that)
if (res.data.status == 200) {
that.setData({
focusman: res.data.data,
})
console.log(that.data.focusman)
} else {
console.log('error');
return false;
}
}
})
}
}12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
上述全部代码总结起来就是 在 先在onLunch里面 获取到用户信息 并获取到token 和 account 然后 放在全局变量中 但是由于异步的关系和网络的问题很有可能在页面的onlound里面获取不到全局变量中的token和account 这时候就要用到回调了 在这里面用的回调就是 首先在onlound里面写 if（获取到了account和token）{正常执行代码} else if(如果咩有获取到就设置个函数重新获取登录的用户信息和token 在这个页面) 然后在onlunch里面判断有没有这个函数有的话把res传过去 res里面包含account 和token 然后在onlound里面判断res传过来的token是不是为空 如果为空就重新发起请求重新获取
作者：前端阿龙
链接：https://blog.csdn.net/weixin_42790916/article/details/82792600
来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。