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

我的模块

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

我的模块使用微信小程序视图容器组件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.userInfothis.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

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

微信小程序网悦新闻开发--小程序配置（二）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
微信小程序网悦新闻开发--功能介绍（一）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
微信小程序网悦新闻开发--自定义组件开发（六）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
微信小程序网悦新闻开发--视频模块开发（四）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
微信小程序网悦新闻开发--首页模块开发（三）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
微信小程序网悦新闻开发--云函数以及云数据开发（七）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
springboot+微信小程序（无人机新闻）（eclipse）开发文档
微信小程序之"无人机新闻"开发文档源码连接 https://github.com/LiuGuoXiangIamI/drone-news 目录: 开发前的准备: 微信小程 ...
基于spring-boot的社区社交微信小程序，适合做脚手架、二次开发
代码地址如下: http://www.demodashi.com/demo/13867.html 1 概述笔者做的一个后端基于spring-boot的社区社交微信小程序,可以作为开发的脚手架,开发速 ...
微信小程序网易云音乐播放界面
微信小程序网易云效果图 HTML JS CSS 效果图 HTML <view class="box"><view class ...

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

目录

我的模块

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

最新文章

热门文章