「小程序JAVA實戰」小程序個人我的信息頁面開發（41）

已經完成了登陸和註冊頁面已經開發完畢，當用戶註冊和登陸完畢後，讓用戶登陸到咱們的我的信息頁面，就是個人頁面。源碼：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. 用戶的信息查詢（用的粉絲數，點贊數，關注數）