基於java的微信小程式的實現(五)使用者個人資訊小程式端開發
阿新 • • 發佈:2018-11-30
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'
})
}
})
}