微信小程序入门【三】：实现简单登录退出和个人信息页面
效果图预览
这个框很是惆怅，但是真机调试没出现过，这个bug下次再解决吧。这次说说登录。
效果图：
附上代码：
home.wxml
Hi 游客
{{userInfo.nickName}}
退出登录
@技术支持：江阔jk921
home.wxss
/* pages/scroll/scroll.wxss */
.top{
width: 100%;
height: 400rpx;
background-color:seashell;
padding-top: 150rpx;
}
.userinfo{
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
overflow: hidden;
}
.userinfo-nickname{
font-size: large;
color: #494949;
}
.nav{
padding-top:100rpx;
}
.content{
padding-top: 50rpx;
}
.panel{
margin: 50rpx;
}
.standView{
width: 100%;
height: 300rpx;
font-size: x-small;
color: #c8c8c9;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
home.js
login登录逻辑处理
login(e) {
var that = this;
Dialog.confirm({
title: '您还未登录',
message: '请先登录之后再进行操作',
})
.then(() => {
//1、判断是否授权
wx.getSetting({
success(res) {
console.log(res.authSetting)
if (res.authSetting['scope.userInfo']) {
//2、获取用户个人信息
that.getUserProfile();
} else {
//2、向用户发起授权请求
wx.authorize({
scope: 'scope.userInfo',
success() {
console.log("授权成功------")
//3、获取用户个人信息
that.getUserProfile();
},
fail() {
wx.showModal({
content: '检测到您没打开用户信息权限，是否去设置打开？',
confirmText: "确认",
cancelText: "取消",
success: function (res) {
console.log(res);
//3、点击“确认”时打开设置页面，手动让用户授权
if (res.confirm) {
wx.openSetting({
success: (res) => {}
})
} else {
console.log('用户点击取消')
}
}
});
}
})
}
}
})
// on confirm
})
.catch(() => {
// on cancel
});
},
//获取用户个人信息
getUserProfile() {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '请先授权登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
var user = res.userInfo;
//缓存用户信息
wx.setStorageSync('userInfo', user);
//全局变量
app.globalData.userInfo = user;
console.log("全局变量" + JSON.stringify(app.globalData.userInfo))
console.log(res.userInfo)
this.setData({
userInfo: res.userInfo
})
}
})
},exitLogin退出登录
//退出登录
exitLogin: function () {
console.log("------------------exit-------")
Dialog.confirm({
title: '',
message: '退出登录？',
})
.then(() => {
// on confirm
try {
wx.removeStorageSync('userInfo'); //清除本地缓存
app.globalData.userInfo = ''; //清除全局变量
console.log("清除全局变量：" + app.globalData.userInfo)
this.setData({
userInfo: ''
})
Toast("退出登录成功！")
} catch (e) {
// Do something when catch error
}
wx.switchTab({
url: '/pages/home/home'
});
})
.catch(() => {
// on cancel
});
},附上home.js全码：
// pages/scroll/scroll.js
import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';
import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast';
//在page页面引入app，同时声明变量，获得所需要的全局变量
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: {},
},
login(e) {
var that = this;
Dialog.confirm({
title: '您还未登录',
message: '请先登录之后再进行操作',
})
.then(() => {
//1、判断是否授权
wx.getSetting({
success(res) {
console.log(res.authSetting)
if (res.authSetting['scope.userInfo']) {
//2、获取用户个人信息
that.getUserProfile();
} else {
//2、向用户发起授权请求
wx.authorize({
scope: 'scope.userInfo',
success() {
console.log("授权成功------")
//3、获取用户个人信息
that.getUserProfile();
},
fail() {
wx.showModal({
content: '检测到您没打开用户信息权限，是否去设置打开？',
confirmText: "确认",
cancelText: "取消",
success: function (res) {
console.log(res);
//3、点击“确认”时打开设置页面，手动让用户授权
if (res.confirm) {
wx.openSetting({
success: (res) => {}
})
} else {
console.log('用户点击取消')
}
}
});
}
})
}
}
})
// on confirm
})
.catch(() => {
// on cancel
});
},
//获取用户个人信息
getUserProfile() {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '请先授权登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
var user = res.userInfo;
//缓存用户信息
wx.setStorageSync('userInfo', user);
//全局变量
app.globalData.userInfo = user;
console.log("全局变量" + JSON.stringify(app.globalData.userInfo))
console.log(res.userInfo)
this.setData({
userInfo: res.userInfo
})
}
})
},
//退出登录
exitLogin: function () {
console.log("------------------exit-------")
Dialog.confirm({
title: '',
message: '退出登录？',
})
.then(() => {
// on confirm
try {
wx.removeStorageSync('userInfo'); //清除本地缓存
app.globalData.userInfo = ''; //清除全局变量
console.log("清除全局变量：" + app.globalData.userInfo)
this.setData({
userInfo: ''
})
Toast("退出登录成功！")
} catch (e) {
// Do something when catch error
}
wx.switchTab({
url: '/pages/home/home'
});
})
.catch(() => {
// on cancel
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
this.getTabBar().init();
//登录状态缓存
let userInfo = wx.getStorageSync("userInfo");
console.log("---缓存-----："+userInfo)
console.log("----onshow 全局变量----："+app.globalData.userInfo)
this.setData({
userInfo:userInfo
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
大功告成！