微信小程序网悦新闻开发--我的模块开发（五）

目录

微信小程序网悦新闻开发--功能介绍（一）

微信小程序网悦新闻开发--小程序配置（二）

微信小程序网悦新闻开发--首页模块开发（三）

微信小程序网悦新闻开发--视频模块开发（四）

微信小程序网悦新闻开发--我的模块开发（五）

微信小程序网悦新闻开发--自定义组件开发（六）

微信小程序网悦新闻开发--云函数以及云数据开发（七）

 

我的模块

首先给大家展示一下我的页面的效果图

我的模块使用微信小程序视图容器组件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.youkuaiyun.com/nongweiyilady/article/details/74244362