制作个人信息页面/我的页面
hello，小伙伴们大家好，小编是后端开发，没有系统接触过前端学习，最近公司要求开发小程序，斗胆承接，其中有个人信息页面比较常用，现记录下来，供初学者参考，有不符合规范的地方，希望各位大佬包含，评论区指点！废话不多说，直接上代码。
效果图
样式使用了flex布局
js文件：my.js
// pages/my/my.js
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: {
},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
console.log(e)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
json文件：my.json
{
"usingComponents": {
},
"navigationBarBackgroundColor": "#a7d3e8",
"navigationBarTitleText": "我的"
}
wxml文件：my.wxml
<view class='container'>
<!--头像名称-->
<view class="partOne">
<view class="userinfo">
<block wx:if="{
{canIUseOpenData}}">
<view class="userinfo-avatar">
<open-data type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName"></open-data>
</block>
<block wx:elif="{
{!hasUserInfo}}">
<button wx:if="{
{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<button wx:elif="{
{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<view wx:else> 请使用1.4.4及以上版本基础库 </view>
</block>
<block wx:else>
<image class="userinfo-avatar" src="{
{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{
{
userInfo.nickName}}</text>
</block>
</view>
<view class="scanicon">
<image src="../../images/scan.png" />
</view>
</view>
<!--我的分值、扫一扫-->
<view class="partTwo">
<!--我的分值-->
<view class="item">
<view class="itemname">
<view ><image src="../../images/score.png" /></view>
<view ><text >我的得分</text></view>
</view>
<view class="right"><image src="../../images/right.png" /></view>
</view>
<!--扫一扫-->
<view class="scan">
<view class="itemname">
<view ><image src="../../images/scan.png" /></view>
<view ><text >扫一扫</text></view>
</view>
</view>
</view>
<!--关于我们、使用帮助、绑定个人信息-->
<view class="partThree">
<!--关于我们-->
<view class="item">
<view class="itemname">
<view ><image src="../../images/aboutmy.png" /></view>
<view ><text >关于我们</text></view>
</view>
<view class="right"><image src="../../images/right.png" /></view>
</view>
<!--使用帮助-->
<view class="item">
<view class="itemname">
<view ><image src="../../images/help.png" /></view>
<view ><text >使用帮助</text></view>
</view>
<view class="right"><image src="../../images/right.png" /></view>
</view>
<!--绑定个人信息-->
<view class="item">
<view class="itemname">
<view ><image src="../../images/bangding.png" /></view>
<view ><text >绑定信息</text></view>
</view>
<view class="right"><image src="../../images/right.png" /></view>
</view>
</view>
</view>
wxss样式文件：my.wxss
.container{
background-color: #eeeeee;
height : 100vh;
}
.partOne {
display: flex;
justify-content: space-between;
background-color: #a7d3e8;
padding-top: 130rpx;
padding-bottom: 130rpx;
}
.userinfo {
display: flex;
align-items: center;
height: 128rpx;
margin-left: 40rpx;
color: rgb(255, 255, 255);
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 30rpx;
border-radius: 50%;
}
.userinfo-nickname {
height: 128rpx;
}
.partOne .scanicon{
display: flex;
justify-content: flex-end;
align-items: center;
height: 128rpx;
margin-right: 80rpx;
}
.partOne .scanicon image{
width: 80rpx;
height: 80rpx;
}
.partTwo{
height: 200rpx;
width: 90%;
margin-left: 5%;
margin-top: -50rpx;
background-color: #ffffff;
border: 1rpx solid rgb(176, 176, 176);
border-radius: 25rpx;
}
.partTwo .item{
display: flex;
justify-content: space-between;
align-items: center;
height: 100rpx;
}
.partTwo .item .itemname{
display: flex;
justify-content: space-between;
align-items: center;
width: 210rpx;
margin-left: 20rpx;
}
.partTwo .item .itemname image{
width: 60rpx;
height: 60rpx;
}
.partTwo .right{
margin-right: 20rpx;
}
.partTwo .right image{
width: 50rpx;
height: 50rpx;
}
.partTwo .scan{
display: flex;
align-items: center;
height: 100rpx;
}
.partTwo .scan .itemname{
display: flex;
justify-content: space-between;
align-items: center;
width: 180rpx;
margin-left: 20rpx;
}
.partTwo .scan image{
width: 60rpx;
height: 60rpx;
}
.partThree{
height: 300rpx;
width: 90%;
margin-left: 5%;
margin-top: 10rpx;
background-color: #ffffff;
border: 1rpx solid rgb(176, 176, 176);
border-radius: 25rpx;
}
.partThree .item{
display: flex;
justify-content: space-between;
align-items: center;
height: 100rpx;
}
.partThree .item .itemname{
display: flex;
justify-content: space-between;
align-items: center;
width: 210rpx;
margin-left: 20rpx;
}
.partThree .item .itemname image{
width: 60rpx;
height: 60rpx;
}
.partThree .right{
margin-right: 20rpx;
}
.partThree .right image{
width: 50rpx;
height: 50rpx;
}
到这里就结束啦，有需要其他页面的小伙伴可以给小编留言，小编会持续更新微信小程序常用的页面 和 组件，也请给小编一个关注，提前写过各位大佬