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