微信小程序网悦新闻开发--我的模块开发（五）
目录
我的模块
首先给大家展示一下我的页面的效果图
我的模块使用微信小程序视图容器组件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
