基于java的微信小程序的实现（五）用户个人信息小程序端开发

版权声明：lex https://blog.csdn.net/qq_36258498 4000 /article/details/84640534

文章目录

• 1.个人信息页面展示
• 2.显示个人信息功能
• 1.需求分析
• 2.js代码的编写
• 3.wxml代码

3.用户上传头像功能

• 1.需求分析
• 2.js代码的编写

4.用户注销功能

• 1.需求分析
• 2.代码实现

1.个人信息页面展示

2.显示个人信息功能

1.需求分析

在该页面首先需要在加载完毕后去调用后端的查找个人信息的接口，并将返回的值回显到个人信息页面上

2.js代码的编写

onLoad:function(params){
var me=this;
// var userInfo=app.userInfo;
//从缓存中获取到用户对象
var userInfo = app.getGlobalUserInfo("userInfo");
var serverUrl = app.serverUrl;
//获取当前登陆者的id
var userId=userInfo.id;

//请求后端接口查找个人信息
wx.request({
url: serverUrl + '/user/findUserInfo?id=' + userId + '&fansId='+userInfo.id,
method:'POST',
header: {
'content-type': 'application/json',
//因为需要做认证处理，所以要传入当前对象的id和token
'userId': userInfo.id,
'userToken':userInfo.token

},
success:function(res){
var user = res.data.data;
console.log(res.data);
if(res.data.status==200){
if (user.faceImage == null && user.faceImage == '' && user.faceImage == undefined) {
me.setData({
//如果用户为第一次登陆，该用户没有头像信息，将系统默认的头像路径赋值给faceUrl
faceUrl: "../resource/images/noneface.png"
})
}
me.setData({
//分别获取返回信息并赋值给对应变量
faceUrl: serverUrl + user.faceImage,
fansCounts: user.fansCounts,
followCounts: user.followCounts,
receiveLikeCounts: user.receiveLikeCounts,
nickname: user.nickname

})
}else if(res.data.status==502){
//502状态码为我们自定义返回的状态码，当token认证出现问题是就会返回该值，会将页面重定向到登录页
wx.showToast({
title: res.data.msg,
icon:"none",
duration:3000,
success:function(){
wx.redirectTo({
url: '../userLogin/login',
})
}
})
}

}
})
}

3.wxml代码

<view class='container'>

<label class='nickname'>{{nickname}}</label>
<view class='container-row'>
<label class='info-items'>{{fansCounts}} 粉丝</label>
<label class='info-items'>{{followCounts}} 关注</label>
<label class='info-items'>{{receiveLikeCounts}} 获赞</label>
</view>
</view>

</view>
</view>

3.用户上传头像功能

1.需求分析

用户需要点击头像时触发一个选择图片的事件，然后从相册中选择一张图片，之后会返回一个该图片的临时路径，然后在调用微信的上传文件的api，将该临时路径传入，并调用到后台上传头像的接口（详细请参考微信官方api文档，这里就不一一介绍官方相关的api了，代码中会做详细的注释）

2.js代码的编写

changeFace:function(){
var me=this;
//调用微信官方的图片选择接口
wx.chooseImage({
//最多可以选择的图片张数
count: 1,
//所选的图片的尺寸
sizeType: [ 'compressed'],
//选择图片的来源
sourceType: ['album', 'camera'],
//该回调函数会返回一个该文件的临时路径
success(res) {
// tempFilePath可以作为img标签的src属性显示图片，该返回值为一个数组对象
const tempFilePaths = res.tempFilePaths
var serverUrl=app.serverUrl;
// var userInfo=app.userInfo;
var userInfo=app.getGlobalUserInfo("userInfo");
//向用户显示上传状态
wx.showLoading({
title: '上传中',
})
wx.uploadFile({
//调用后端的上传文件接口
url: serverUrl+'/user/upload?id='+userInfo.id,
//因为上传的为单文件，所以只需要取得数组中的第一个值即可
filePath: tempFilePaths[0],
//该名字需要和后端接口定义的文件的变量名相同
name: 'file',
//传入认证消息
header: {
'content-type': 'application/json',
'userId': userInfo.id,
'userToken': userInfo.token
},
success(res) {
console.log(res.data)
//因为该方法的回调函数的返回值为String类型的字符串，并不是一个json对象，所以需要进行转换
const data = JSON.parse(res.data);
//隐藏提醒消息
wx.hideLoading();
wx.showToast({
title: '上传成功',
})

//将后端返回的头像的相对路径获取并赋值给imageUrl
var imageUrl=data.data;
me.setData({
faceUrl:serverUrl+imageUrl
})
}
})
}
})
}

4.用户注销功能

1.需求分析

当用户点击注销按钮时候会将用户的本地缓存删除，并返回到登录页面

2.代码实现

logout:function(){
var serverUrl = app.serverUrl;
// var userInfo=app.userInfo;
var userInfo=app.getGlobalUserInfo("userInfo");
//调用注销接口
wx.request({
url:serverUrl+ '/logout?id='+userInfo.id,
method:'POST',
header: {
'content-type': 'application/json'
},
success:function(res){
console.log(res.data);
wx.showToast({
title: '注销成功',
})
//调用该方法清除用户的本地缓存
wx.removeStorageSync("userInfo");
//并重定向到登录页面
wx.redirectTo({
url: '../userLogin/login'
})
}
})
}

阅读更多