「小程序JAVA實(shí)戰(zhàn)」小程序我的個(gè)人信息頁面開發(fā)（41）

已經(jīng)完成了登錄和注冊(cè)頁面已經(jīng)開發(fā)完畢，當(dāng)用戶注冊(cè)和登錄完畢后，讓用戶登錄到我們的個(gè)人信息頁面，就是我的頁面。源碼：https://github.com/limingios/wxProgram.git 中No.15

我的頁面的功能

• 當(dāng)其他人查看我的信息，可以看到關(guān)注我，粉絲數(shù)量，關(guān)注數(shù)量，獲贊數(shù)量。

• 當(dāng)用戶自己點(diǎn)擊我的信息，可以看到上傳視頻，注銷登錄，粉絲數(shù)量，關(guān)注數(shù)量，獲贊數(shù)量。

• 頁面的設(shè)計(jì)

• mine文件內(nèi)加入基本的小程序需要的元素

• mine.wxml

<view>

??<view?class='container'>
??????<image?src="{{faceUrl}}"?class="face"></image>
????<label?class='nickname'>{{nickname}}</label>
??????<button?size='mini'?class='primary'?bindtap='uploadVideo'>?上傳作品</button>
??????<button?size='mini'?type=''?class='logout'?bindtap='logout'>注銷</button>

????????<button?size='mini'?type=''?class='follow'?data-followType='0'?bindtap='followMe'>已關(guān)注</button>

????????<button?size='mini'?type='primary'?class='follow'?data-followType='1'?bindtap='followMe'>關(guān)注我</button>


????<view?class='container-row'>
??????<label?class='info-items'>{{fansCounts}}?粉絲</label>
??????<label?class='info-items'>{{followCounts}}?關(guān)注</label>
??????<label?class='info-items'>{{receiveLikeCounts}}?獲贊</label>
????</view>
??</view>

</view>

<view?class="line"></view>

• mine.js

//?pages/mine/mine.js
Page({

??/**
???*?頁面的初始數(shù)據(jù)
???*/
??data:?{
????faceUrl:?"../../resource/images/noneface.png",
????nickname:?"昵稱",
????fansCounts:?0,
????followCounts:?0,
????receiveLikeCounts:?0,
??},

??/**
???*?生命周期函數(shù)--監(jiān)聽頁面加載
???*/
??onLoad:?function?(options)?{

??},

??/**
???*?生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
???*/
??onReady:?function?()?{

??},

??/**
???*?生命周期函數(shù)--監(jiān)聽頁面顯示
???*/
??onShow:?function?()?{

??},

??/**
???*?生命周期函數(shù)--監(jiān)聽頁面隱藏
???*/
??onHide:?function?()?{

??},

??/**
???*?生命周期函數(shù)--監(jiān)聽頁面卸載
???*/
??onUnload:?function?()?{

??},

??/**
???*?頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
???*/
??onPullDownRefresh:?function?()?{

??},

??/**
???*?頁面上拉觸底事件的處理函數(shù)
???*/
??onReachBottom:?function?()?{

??},

??/**
???*?用戶點(diǎn)擊右上角分享
???*/
??onShareAppMessage:?function?()?{

??}
})

• mine.wxss

page?{
????font-size:?14px;
}

.container?{
????background-color:?whitesmoke;
????display:?flex;
????flex-direction:?column;
????align-items:?center;
}

.container-row?{
????display:?flex;
????flex-direction:?row;
????margin-bottom:?10px;
????margin-top:?10px;
}

.info-items?{
????margin-left:?30px;
}

.face?{
????width:?180rpx;
????height:?180rpx;
????border-radius:?50%;
????margin-top:?20px;
}

.nickname?{
????margin-top:?5px;
????font-weight:?bold;
????font-size:?18px;
}

.logout?{
????margin-top:?3px;
????float:?right;
}

.follow?{
????margin-top:?3px;
}

.line?{
????width:?100%;
????height:?1px;
????background-color:?gainsboro;
????margin-top:?1px;
}

.container-video?{
????display:?flex;
????flex-direction:?row;
????margin-top:?20px;
????text-align:?center;
????border:?solid?1px;
????line-height:?30px;
}

.video-info?{
????width:?100%;
}

.video-info-selected?{
????background-color:?gainsboro;
}

.container-video-list?{
????display:?flex;
????flex-direction:?row;
????flex-wrap:?wrap;
}

.videoImage?{
????width:?250rpx;
????height:?180px;
}

PS：下次針對(duì)頁面的基本的功能增加一些后臺(tái)的功能，
1. 注銷（注銷的接口）
2. 上傳視頻（比較大的功能）
3. 上傳頭像 （用戶的頭像的更改）
4. 用戶的信息查詢（用的粉絲數(shù)，點(diǎn)贊數(shù)，關(guān)注數(shù)）