小程序实战中，如何实现程序的注销功能呢？后端代码只要删除用户的redi缓存即可。小程序端在成功返回消息后，进行登陆页面的跳转。

文章目录

小程序的mine.wxml代码

mine.wxss代码

注销事件的代码mine.js

RegistLoginController 中注销代码

页面展示

小程序的mine.wxml代码

{{nickname}}

上传作品

注销

{{fansCounts}} 粉丝

{{followCounts}} 关注

{{receiveLikeCounts}} 获赞

mine.wxss代码

page {

font-size: 14px;

}

.container {

background-color: whitesmoke;

display: flex;

flex-direction: column;

align-items: center;

}

.container-row {

display: flex;

flex-direction: row;

margin-bottom: 10px;

margin-top: 10px;

}

.info-items {

margin-left: 30px;

}

.face {

width: 180rpx;

height: 180rpx;

border-radius: 50%;

margin-top: 20px;

}

.nickname {

margin-top: 5px;

font-weight: bold;

font-size: 18px;

}

.logout {

margin-top: 3px;

float: right;

}

.follow {

margin-top: 3px;

}

.line {

width: 100%;

height: 1px;

background-color: gainsboro;

margin-top: 1px;

}

.container-video {

display: flex;

flex-direction: row;

margin-top: 20px;

text-align: center;

border: solid 1px;

line-height: 30px;

}

.video-info {

width: 100%;

}

.video-info-selected {

background-color: gainsboro;

}

.container-video-list {

display: flex;

flex-direction: row;

flex-wrap: wrap;

}

.videoImage {

width: 250rpx;

height: 180px;

}

注销事件的代码mine.js

通过事件函数发起请求，后端处理成功返回结果，并跳转至登陆页面。

设置小程序的全局变量userInfo为null

//注销事件

logout: function () {

console.log("logout")

var user = app.userInfo;

var serverUrl = app.serverUrl;

wx.showLoading({

title: '请等待',

});

wx.request({

url: serverUrl+'/logout?userId=' + user.id,

method:"POST",

header: {

'content-type': 'application/json' //默认值

},

success: function (res) {

wx.hideLoading();

if( res.data.status == 200){

wx.showToast({

title: '注销成功',

icon: 'success',

duration: 20000

});

//注销成功，设置全局信息为null

app.userInfo = null;

wx.navigateTo({

url: '../login/login',

})

}

}

})

},

RegistLoginController 中注销代码

根据用户id，清楚redis中的缓存记录。

@ApiOperation(value="用户注销" , notes = "用户注销的接口")

@ApiImplicitParam(name = "userId", value = "用户id" ,required = true,

dataType = "String", paramType = "query")

@PostMapping("/logout")

public IMoocJSONResult logout(String userId) {

System.out.println("userId:"+userId);

redis.del(USER_REDIS_SESSION + ":" + userId);

return IMoocJSONResult.ok();

}