已經完成了登錄和註冊頁面已經開發完畢，當用戶註冊和登錄完畢後，讓用戶登錄到我們的個人信息頁面，就是我的頁面。源碼：https://github.com/limingios/wxProgram.git 中No.15
我的頁面的功能
當其他人查看我的信息，可以看到關注我，粉絲數量，關注數量，獲贊數量。
當用戶自己點擊我的信息，可以看到上傳視頻，註銷登錄，粉絲數量，關注數量，獲贊數量。
頁面的設計
mine文件內加入基本的小程序需要的元素
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'>已關注</button>
<button size='mini' type='primary' class='follow' data-followType='1' bindtap='followMe'>關注我</button>
<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 class="line"></view>
mine.js
// pages/mine/mine.js
Page({
/**
* 頁面的初始數據
*/
data: {
faceUrl: "../../resource/images/noneface.png",
nickname: "暱稱",
fansCounts: 0,
followCounts: 0,
receiveLikeCounts: 0,
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
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：下次針對頁面的基本的功能增加一些後臺的功能，
1. 註銷（註銷的接口）
2. 上傳視頻（比較大的功能）
3. 上傳頭像 （用戶的頭像的更改）
4. 用戶的信息查詢（用的粉絲數，點贊數，關注數）