由于微信在最近开始要求使用wx.getUserProfile()来获取用户的昵称,头像等信息。而且在用户已授权的前提下,不再支持静默获取以上的用户信息。针对这个改动,也将自己小程序的登录逻辑进行了相应的修改,下面是此次修改设置的流程图:
流程图
相关的业务代码如下:
小程序加载及初始化时的业务逻辑
//app.js
const httpClient = require('utils/httpClient');
const urlConfig = require('utils/config');
App({
onLaunch: function () {
//获取本地缓存的Token
this.initGlobalToken();
//todo 获取本地保存的用户信息,如果存在就设置,不存在由接口去刷新缓存
this.initUserInfo();
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
console.log(res)
let body = new Object();
body.code = res.code;
httpClient.doPost(urlConfig.urlList.userInfoUrl, new Object, body)
.then(success => {
//成功登陆就缓存到本地用户信息
console.log("get user info success: " + JSON.stringify(success.data))
//保存到全局变量
let unionId = success.data.token.unionid;
let userInfo = success.data.userinfo;
this.globalData.unionId = unionId;
this.globalData.userInfo = userInfo;
this.storeUserInfo(userInfo, unionId)
//同时刷新本地的用户信息缓存
//将用户信息保存到本地
}, fail => {
//登陆失败就尝试从缓存中获取用户信息
//获取本地缓存的用户信息
console.log("get user info fail: " + JSON.stringify(fail))
this.initUserInfo();
});
}
})
},
//同步获取用户缓存的Token
initGlobalToken: function () {
try {
let that = this;
//同步获取保存的Token 即将获取的值直接进行赋值
let token = wx.getStorageSync('Authorization');
if (token) {
console.log('getStorageSync token from cache success: ' + token);
that.globalData.token = cache.data;
} else {
console.log('getStorageSync token from cache fail: ' + JSON.stringify(token));
}
} catch (e) {
console.log('getStorageSync token from cache fail: ' + e);
}
},
//异步获取用户本地缓存的UserInfo
initUserInfo: function () {
let userInfo = wx.getStorageSync('userInfo');
if (userInfo) {
console.log("initUserInfo from cache success")
this.globalData.userInfo = userInfo;
}
let unionId = wx.getStorageSync('unionId');
if (unionId) {
console.log("initUnionId from cache success")
this.globalData.unionId = unionId;
}
//两者都存在才设置为保存用户信息
if (userInfo && unionId) {
this.globalData.hasUserInfo = true;
}
},
//存储用户信息和UnionId
storeUserInfo: function (userInfo, unionId) {
wx.setStorage({
key: 'unionId',
data: unionId,
success: success => {
console.log("store unionId success:" + JSON.stringify(success))
},
fail: fail => {
console.log("store unionId fail:" + JSON.stringify(fail))
}
});
let userInfoString = JSON.stringify(userInfo);
console.log(userInfoString)
wx.setStorage({
key: 'userInfo',
data: userInfo,
success: success => {
console.log("store userInfo success:" + JSON.stringify(success))
},
fail: fail => {
console.log("store userInfo fail:" + JSON.stringify(fail))
}
});
},
//异步全局刷新Token
refreshGlobalToken: function () {
let that = this;
//异步获取保存的Token
wx.getStorage({
key: 'Authorization',
//成功获取到缓存 保存到全局变量中
success: cache => {
console.log('getStorage token from cache success: ' + cache.data)
//获取到了Token才更新Token
if (cache.data) {
that.globalData.token = cache.data
console.log(that.globalData)
}
},
// 获取失败就失败
fail: e => {
console.log('getStorage token from cache fail: ' + e.errMsg)
}
})
},
//当前是否拥有用户信息
hasUserInfo: function () {
if (this.globalData.userInfo) {
return true;
}
return false;
},
globalData: {
token: null,
notifyLoginTip: false,
unionId: null,
userInfo: null,
hasUserInfo: false
}
})
提示登录和授权页面
提示登录的组件wxml文件
提示授权按钮页面
绑定用户信息成功页面
授权页面点击事件业务逻辑
登录按钮绑定的点击事件代码
// pages/me/me.js
//获取应用实例
const app = getApp();
const httpClient = require('../../utils/httpClient');
const urlList = require('../../utils/config');
Page({
/**
* 页面的初始数据
*/
data: {
motto: 'Hello World',
userInfo: app.globalData.userInfo,
hasUserInfo: app.globalData.hasUserInfo,
mes: "",
showError: false,
toptipsType: "success"
},
//事件处理函数
bindViewTap: function () {
console.log(app.globalData);
wx.navigateTo({
url: '/pages/login/login'
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
getUserInfo: function (e) {
wx.getUserProfile({
desc: '完善用户信息',
success: res => {
app.globalData.userInfo = res.userInfo;
this.bindUserInfo(app.globalData.userInfo, app.globalData.unionId);
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
},
fail: fail => {
}
})
},
//绑定用户的UserInfo和OpenId
bindUserInfo: function (userInfo, unionId) {
if (userInfo && unionId) {
this.showTopTips("绑定信息成功", "success")
let body = new Object();
body.user_info = userInfo;
body.union_id = unionId;
console.log('bindUserInfo')
console.log(unionId)
console.log(JSON.stringify(userInfo))
httpClient.doPost(urlList.urlList.addUserInfoUrl, null, body).then(
success => {
//更新缓存中的userInfo
console.log("bindUserInfo success " + JSON.stringify(success))
},
fail => {
console.log("bindUserInfo fail " + JSON.stringify(fail))
this.showTopTips("绑定信息异常,请检查网络或重试", "error")
}
)
} else {
this.showTopTips("绑定信息异常,请检查网络或重试", "error")
}
},
//展示topTip数据
showTopTips: function (mes, toptipsType) {
this.setData({
mes: mes,
showError: true,
toptipsType: toptipsType
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})