E企盈小程序开发-热线：4006-838-530文章目录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, rece开通登山包小程序电话:4006-838-530iveLikeCounts: 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', }) } }) } 开通手工皮带小程序电话:4006-838-530} }) }
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({ t开通海鲜小程序电话:4006-838-530itle: '上传中', }) 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' }) } }) }
最新评论