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

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'
        })
      }
    })
  }