微信小程序網悅新聞開發--我的模塊開發（五）

目錄

微信小程序網悅新聞開發--功能介紹（一）

微信小程序網悅新聞開發--小程序配置（二）

微信小程序網悅新聞開發--首頁模塊開發（三）

微信小程序網悅新聞開發--視頻模塊開發（四）

微信小程序網悅新聞開發--我的模塊開發（五）

微信小程序網悅新聞開發--自定義組件開發（六）

微信小程序網悅新聞開發--雲函數以及雲數據開發（七）

 

我的模塊

首先給大家展示一下我的頁面的效果圖

我的模塊使用微信小程序視圖容器組件scroll-view開發，提供用戶登錄註冊，注意的是微信小程序2018年以後登錄必須使用button組件設置open-type="getUserInfo" 然後再去綁定登錄方法，以下是對應列表頁面wxml的代碼.。

<scroll-view 
scroll-y="{{true}}" >
  <view class="headerBox">
    <view class="userinfo"  wx:if="{{!hasUserInfo}}">
      <view class="userInfoLogin">
        <text class="iconfont icon-shouji icoCircular"></text>
        <text class="iconfont icon-weixin icoCircular"></text>
        <text class="iconfont icon-icon_qq icoCircular"></text>
        <text class="iconfont icon-xinlangweibo icoCircular"></text>
      </view>
      <view class="userInfoHeader">
        <button 
          class="userInfoButton"
          open-type="getUserInfo" 
          bindgetuserinfo="getUserInfo"
        >登錄/註冊</button>
      </view>
      <view class="userInfoBox">
        <view class="icoGroup"><text class="iconfont icon-zhongxindongtai icoGroupImage"></text><text class="icoGroupText">動態</text></view>
        <view class="icoGroup"><text class="iconfont icon-icon_huifu-xian icoGroupImage"></text><text class="icoGroupText">跟帖</text></view>
        <view class="icoGroup"><text class="iconfont icon-shoucang icoGroupImage"></text><text class="icoGroupText">收藏</text></view>
        <view class="icoGroup"><text class="iconfont icon-lishi icoGroupImage"></text><text class="icoGroupText">歷史</text></view>
      </view>
    </view>
    <view class="userinfo"  wx:else>
      <view class="userInfoHeader1">
          <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </view>
      <view class="userInfoBox">
        <view class="icoGroup"><text class="icoGroupNum">0</text><text class="icoGroupText">動態</text></view>
        <view class="icoGroup"><text class="icoGroupNum">0</text><text class="icoGroupText">跟帖</text></view>
        <view class="icoGroup"><text class="icoGroupNum">0</text><text class="icoGroupText">收藏</text></view>
        <view class="icoGroup"><text class="icoGroupNum">0</text><text class="icoGroupText">歷史</text></view>
      </view>
    </view>
  </view>
  <view class="list">
    <view class="list_items"><text>我的關注</text><text class="iconfont icon-iconfontjiantou5 jiantou"></text></view>
    <view class="list_items"><text>任務中心</text><text class="iconfont icon-iconfontjiantou5 jiantou"></text></view>
    <view class="list_items"><text>會員中心</text><text class="iconfont icon-iconfontjiantou5 jiantou"></text></view>
    <view class="list_items"><text>系統設置</text><text class="iconfont icon-iconfontjiantou5 jiantou"></text></view>
    <view class="list_items"><text>消息查看</text><text class="iconfont icon-iconfontjiantou5 jiantou"></text></view>
    <view class="list_items"><text>意見反饋</text><text class="iconfont icon-iconfontjiantou5 jiantou"></text></view>
    <view class="list_items"><text>掃一掃</text><text class="iconfont icon-iconfontjiantou5 jiantou"></text></view>
  </view>
</scroll-view>

以下是對應頁面js的代碼。

const app = getApp()

Page({
  data: {
    userInfo: {},
    hasUserInfo: false
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    }
  },
  getUserInfo: function(e) {
    wx.getUserInfo({
      success: res => {
        app.globalData.userInfo = res.userInfo
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  }
})

以下是對應頁面wxss的代碼。

page{
  background-color: #EEF1F4;
}
.headerBox{
  padding-bottom: 30rpx;
  background-color:#fff;
  margin:20rpx 20rpx 0rpx 20rpx;
  border-radius:5px 5px 5px 5px;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  margin-top: 65rpx;
  color: #000;
  font-weight: bold;
}
.userInfoHeader{
  display: flex;
  width: 750rpx;
  height: 200rpx;
  justify-content: center;
  align-items: center;
}
.userInfoHeader1{
  display: flex;
  width: 650rpx;
  height: 200rpx;
}
.userInfoButton {
  width: 220rpx;
  height: 60rpx;
  margin-top: 15px;
  background-color: #da372b;
  border-radius:15px 15px 15px 15px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.icoCircular{
  height: 40rpx;
  width: 40rpx;
  font-size:30rpx;
  color:#555555;
  border-radius: 50%;
  border: 1px solid #555555;
  padding: 10rpx;
  margin-right: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.userInfoLogin{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0rpx 20rpx 40rpx;
}
.userInfoBox{
  display: flex;
  flex-direction: row;
  width: 750rpx; 
}
.icoGroup{
  flex: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.icoGroupImage{
  color:#666666;
  font-size: 24px;
}
.icoGroupNum{
  color:#000;
  font-size: 16px;
  margin-bottom: 5rpx;
}
.icoGroupText{
  color:rgb(119, 119, 119);
  font-size: 12px;
}
.list{
  padding:15rpx 20rpx 20rpx 20rpx;
}
.list_items{
  width: 650rpx;
  height: 100rpx;
  margin-bottom: 15rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  background-color: #fff;
  border-radius:5px 5px 5px 5px;
  color: #424242;
  display: flex;
  align-items: center;
  font-size: 16px;
  justify-content: space-between;
}
.jiantou{
  color: #A5A5A5;
  font-size: 14px;
}

下面是點擊登錄後的頁面效果圖

 

這裏使用到了字體圖標，如何使用大家可以參考這篇文章：

https://blog.csdn.net/nongweiyilady/article/details/74244362