【微信小程序】个人信息页面/我的页面

制作个人信息页面/我的页面

hello，小伙伴们大家好，小编是后端开发，没有系统接触过前端学习，最近公司要求开发小程序，斗胆承接，其中有个人信息页面比较常用，现记录下来，供初学者参考，有不符合规范的地方，希望各位大佬包含，评论区指点！废话不多说，直接上代码。

效果图

样式使用了flex布局

js文件：my.js

// pages/my/my.jsPage({/**
   * 页面的初始数据
   */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;}

到这里就结束啦，有需要其他页面的小伙伴可以给小编留言，小编会持续更新微信小程序常用的页面 和 组件，也请给小编一个关注，提前写过各位大佬