前言
以下给出来四个常见的小程序个人主页，分别是商城系统个人主页，外卖系统个人主页，挂号系统个人主页，电影购票系统个人主页。包括完整的页面布局代码，完整的样式代码。使用的时候，只需要将页面代码和样式代码复制到自己项目对应的页面即可。而且可以根据已有代码只需稍微改造，便可以作为其他小程序的个人首页。
1、个人主页（商城系统）
1.1 页面效果
1.2 页面源码（.wxml）
这里的图片地址，修改为自己项目图片地址。也可以引入在线图片链接
<view class="user_info_wrap"> <view class="user_img_wrap"> <image class="user_bg" src="/images/back01.jpg" /> <view class="user_info"> <image class="user_icon" src="/images/touxiang01.jpg" /> <view class="user_name">张三牛人</view> </view> </view></view><view class="user_content"> <view class="user_main"> <!-- 历史足迹 --> <view class="history_wrap"> <navigator> <view class="his_num">0</view> <view class="his_name">收藏的店铺</view> </navigator> <navigator url="/pages/collect/index"> <view class="his_num">0</view> <view class="his_name">收藏的商品</view> </navigator> <navigator> <view class="his_num">0</view> <view class="his_name">关注的商品</view> </navigator> <navigator> <view class="his_num">0</view> <view class="his_name">我的足迹</view> </navigator> </view> <!-- 我的订单 --> <view class="orders-wrap"> <view class="orders_title">我的订单</view> <view class="order_content"> <navigator url="/pages/order/index?type=1"> <view class="iconfont icon-ding_dan"></view> <view class="order_name">全部订单</view> </navigator> <navigator url="/pages/order/index?type=2"> <view class="iconfont icon-fukuantongzhi"></view> <view class="order_name">待付款</view> </navigator> <navigator url="/pages/order/index?type=3"> <view class="iconfont icon-receipt-address"></view> <view class="order_name">待收获</view> </navigator> <navigator> <view class="iconfont icon-tuihuo"></view> <view class="order_name">退货/退货</view> </navigator> </view> </view> <!-- 收货地址 --> <view class="address_wrap">收获地址管理</view> <!-- 应用信息相关 --> <view class="app_info_wrap"> <view class="app_info_item app_info_contact"> <text>联系客服</text> <text>18348392981</text> </view> <navigator url="/pages/feedback/index" class="app_info_item" >意见反馈</navigator> <view class="app_info_item">关于我们</view> </view> <!-- 推荐 --> <view class="recommend_wrap">把应用推荐给其他人</view> </view></view>1.3 样式代码 （.wxss）
page { background-color: #ccc;}.user_info_wrap { height: 45vh; overflow: hidden; background-color: var(--themeColor); position: relative;}.user_info_wrap .user_img_wrap { position: relative;}.user_info_wrap .user_img_wrap .user_bg { height: 50vh; text-align: center; /* filter: blur(10rpx); */}.user_info_wrap .user_img_wrap .user_info { position: absolute; left: 50%; transform: translateX(-50%); top: 20%; text-align: center;}.user_info_wrap .user_img_wrap .user_info .user_icon { width: 150rpx; height: 150rpx; border-radius: 50%;}.user_info_wrap .user_img_wrap .user_info .user_name { color: #fff; margin-top: 40rpx; font-size: 40rpx;}.user_info_wrap .user_btn { position: absolute; left: 50%; transform: translateX(-50%); top: 40%; border: 1rpx solid greenyellow; color: greenyellow; font-size: 38rpx; padding: 30rpx; border-radius: 10rpx;}.user_content { position: relative;}.user_content .user_main { padding-bottom: 90rpx; color: #666; position: absolute; width: 90%; left: 50%; transform: translateX(-50%); top: -40rpx;}.user_content .user_main .history_wrap { background-color: #fff; display: flex;}.user_content .user_main .history_wrap navigator { flex: 1; text-align: center; padding: 10rpx 0;}.user_content .user_main .history_wrap navigator .his_num { color: var(--themeColor);}.user_content .user_main .orders-wrap { background-color: #fff; margin-top: 30rpx;}.user_content .user_main .orders-wrap .orders_title { padding: 20rpx; border-bottom: 1rpx solid #ccc;}.user_content .user_main .orders-wrap .order_content { display: flex;}.user_content .user_main .orders-wrap navigator { padding: 15rpx 0; flex: 1; text-align: center;}.user_content .user_main .orders-wrap navigator .iconfont { color: var(--themeColor); font-size: 40rpx;}.user_content .user_main .address_wrap { margin-top: 30rpx; background-color: #fff; padding: 20rpx;}.user_content .user_main .app_info_wrap { margin-top: 30rpx; background-color: #fff;}.user_content .user_main .app_info_wrap .app_info_item { padding: 20rpx; border-bottom: 1rpx solid #ccc;}.user_content .user_main .app_info_wrap .app_info_contact { display: flex; justify-content: space-between;}.user_content .user_main .recommend_wrap { margin-top: 30rpx; background-color: #fff; padding: 20rpx;}@font-face { font-family: "iconfont"; /* Project id 4135149 */ src: url('//at.alicdn.com/t/c/font_4135149_lsktbsemkwh.woff2?t=1687535938174') format('woff2'), url('//at.alicdn.com/t/c/font_4135149_lsktbsemkwh.woff?t=1687535938174') format('woff'), url('//at.alicdn.com/t/c/font_4135149_lsktbsemkwh.ttf?t=1687535938174') format('truetype');}.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.icon-fenxiang:before { content: "/e600";}.icon-shoucang:before { content: "/e602";}.icon-receipt-address:before { content: "/e673";}.icon-shoucang1:before { content: "/e636";}.icon-kefu:before { content: "/e625";}.icon-fukuantongzhi:before { content: "/e60c";}.tuikuantuihuo:before { content: "/e603";}.icon-ding_dan:before { content: "/e61b";}.icon-jinqian:before { content: "/e652";}.icon-gouwuchekong:before { content: "/e601";}.icon-gouwuche:before { content: "/e601"}.icon-tuihuo:before{ content: "/e601"}2、个人主页（外卖系统）
2.1 页面效果
2.2 页面源码（.wxml）
<scroll-view class='scbg' scroll-y='true'> <view class="parent_catainer"> <!-- 头部 --> <view class="container_head"> <image class="head_img" src="/images/waimai01.jpg"></image> <view class="head_pers_info" bindtap="head_pers_info"> <view class="head_pic"> <image class="head_pic_content" mode="aspectFit" src="/images/waimai.jpg"></image> </view> <view class="inf_content"> <text class="user_info">张麻子</text> <text class="family_info_ct_phone">联系电话：1832437281</text> </view> </view> </view> <!-- 我的钱包 --> <view class="orders-wrap"> <view class="orders_title">我的订单</view> <view class="order_content"> <navigator url="/pages/order/index?type=1"> <view class="iconfont icon-ding_dan">10.4万</view> <view class="order_name">借钱</view> </navigator> <navigator url="/pages/order/index?type=2"> <view class="iconfont icon-fukuantongzhi">100.34元</view> <view class="order_name">我的账单</view> </navigator> <navigator url="/pages/order/index?type=3"> <view class="iconfont icon-receipt-address">6月</view> <view class="order_name">消费账单</view> </navigator> <navigator> <view class="iconfont icon-tuihuo">1.66元</view> <view class="order_name">查看卡额度</view> </navigator> </view> </view> <view class="userItemListView"> <view class="my_priview_md" bindtap="myappointpage"> <text>我的米粒</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="openmyorder"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>美团红包</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="myaid"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>商家代金券</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="myfriend"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>拼好饭代金券</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="mycollection"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的收藏</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="mycollection"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的评价</text> <view class="arrow"></view> </view> </view> <view class="userItemListView"> <view class="my_priview_md" bindtap="bind"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>个人资料</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="bind"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的地址</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="bind"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>修改手机号</text> <view class="arrow"></view> </view> </view> <view class="my_priview_logout" bindtap="bind"> 退出账号 </view> </view></scroll-view>2.3 样式代码 （.wxss）
page { width: 100%; height: 100%; background:#f0f0f0;}.parent_catainer{ background:#f0f0f0;} /* 头部背景图片 */.container_head{ height: 370rpx; width: 100%; display: flex; justify-content: flex-end; align-items: flex-end;} .head_img { position: absolute; width: 100%; height: 370rpx;} .head_pers_info{ height: 200rpx; width: 100%; margin-bottom: 50rpx; justify-content: left; display: flex; align-items: center; flex-direction: row; position: absolute;} .head_pic{ width: 120rpx; height: 120rpx; border-radius: 60rpx; background-color: #08cbb0; color: #ffffff; align-items: center; display: flex; justify-content: center;}.head_pic_content{ position: absolute; width: 110rpx; height: 110rpx; border-radius: 55rpx; background-color: white;} .head_pic{ margin-left: 5%;} .inf_content{ display: flex; flex-direction: column; margin-left: 10rpx; align-items: flex-start; justify-content: center; color: #ffffff; padding-bottom: 5rpx;} .user_info{ text-align: left; font-size: 32rpx; font-weight: bold; margin-bottom: 8rpx; color: black;} .family_info_ct_phone{ text-align: center; justify-content: center; font-size: 28rpx; margin-bottom: 2rpx; font-weight: bold; color: black;} .family_info_ct{ text-align: center; justify-content: center; font-size: 28rpx; margin-bottom: 2rpx; width: 500rpx; overflow: hidden; white-space: nowrap; text-align: left; text-overflow: ellipsis;} .userItemListView{ background: #fff; padding: 0 0rpx; margin: 24rpx 0;} .userItemListView > view{ height: 94rpx; line-height: 94rpx; padding-left: 50rpx; border-bottom: 1rpx solid #F1F1F1; position: relative;} /* 移除最后一个元素的下边框 */.userItemListView > view:last-child{ border: none;} .my_priview_md{ display: flex; align-items: center;} .my_priview{ width: 50rpx; height: 50rpx; margin-right: 10rpx;} .my_priview_logout{ /* margin-top: 10rpx; width: 50rpx; height: 50rpx; margin-right: 10rpx; */ text-align: center; margin-top: 30rpx; background-color: #fff; padding: 20rpx;}.arrow{ width: 16rpx; height: 16rpx; border-top: 4rpx solid #999; border-right: 4rpx solid #999; /* 旋转45度 */ transform: rotate(45deg); /* 调整位置 */ position: absolute; right: 30rpx; top: 38rpx;} .userItemListView text{ font-size: 30rpx;} .last_view{ background:#f0f0f0; width: 100%; height:1200rpx;} .orders-wrap { background-color: #fff; margin-top: 30rpx;} .orders-wrap .orders_title { padding: 20rpx;} .orders-wrap .order_content { display: flex;} .orders-wrap navigator { padding: 15rpx 0; flex: 1; text-align: center;} .orders-wrap navigator .iconfont { color: var(--themeColor); font-size: 25rpx;} .address_wrap { margin-top: 30rpx; background-color: #fff; padding: 20rpx;}3、个人主页（医疗挂号）
3.1 页面效果
3.2 页面源码（.wxml）
<!-- 用户列表选项 --><scroll-view class='scbg' scroll-y='true'> <view class="parent_catainer"> <!-- 头部 --> <view class="container_head"> <image class="head_img" src="/images/back01.jpg"></image> <view class="head_pers_info" bindtap="head_pers_info"> <view class="head_pic"> <image class="head_pic_content" mode="aspectFit" src="/images/zhangmazi.jpg"></image> </view> <view class="inf_content"> <text class="user_info">张麻子</text> <text class="family_info_ct_phone">联系电话：1832437281</text> <text class="family_info_ct">关联账号：张老师 </text> </view> </view> </view> <view class="userItemListView"> <view class="my_priview_md" bindtap="myappointpage"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的预约</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="openmyorder"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的订单</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="myaid"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的帮助</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="myfriend"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的亲友</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="mycollection"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的收藏</text> <view class="arrow"></view> </view> </view> <view class="userItemListView"> <view class="my_priview_md" bindtap="bind"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>个人资料</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="updatepassword"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>修改密码</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="aboutus" hidden="true"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>关于我们</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="logout"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>退出登录</text> <view class="arrow"></view> </view> </view> <view class="last_view"></view> </view></scroll-view>3.3 样式代码 （.wxss）
/* 用户列表选项样式 */page { width: 100%; height: 100%; background:#f0f0f0;}.parent_catainer{ background:#f0f0f0;} /* 头部背景图片 */.container_head{ height: 370rpx; width: 100%; display: flex; justify-content: flex-end; align-items: flex-end;} .head_img { position: absolute; width: 100%; height: 370rpx;} .head_pers_info{ height: 200rpx; width: 100%; margin-bottom: 50rpx; justify-content: left; display: flex; align-items: center; flex-direction: row; position: absolute;} .head_pic{ width: 120rpx; height: 120rpx; border-radius: 60rpx; background-color: #08cbb0; color: #ffffff; align-items: center; display: flex; justify-content: center;}.head_pic_content{ position: absolute; width: 110rpx; height: 110rpx; border-radius: 55rpx; background-color: white;} .head_pic{ margin-left: 5%;} .inf_content{ display: flex; flex-direction: column; margin-left: 10rpx; align-items: flex-start; justify-content: center; color: #ffffff; padding-bottom: 5rpx;} .user_info{ text-align: left; font-size: 32rpx; font-weight: bold; margin-bottom: 8rpx;} .family_info_ct_phone{ text-align: center; justify-content: center; font-size: 28rpx; margin-bottom: 2rpx;} .family_info_ct{ text-align: center; justify-content: center; font-size: 28rpx; margin-bottom: 2rpx; width: 500rpx; overflow: hidden; white-space: nowrap; text-align: left; text-overflow: ellipsis;} .userItemListView{ background: #fff; padding: 0 0rpx; margin: 24rpx 0;} .userItemListView > view{ height: 94rpx; line-height: 94rpx; padding-left: 50rpx; border-bottom: 1rpx solid #F1F1F1; position: relative;} /* 移除最后一个元素的下边框 */.userItemListView > view:last-child{ border: none;} .my_priview_md{ display: flex; align-items: center;} .my_priview{ width: 50rpx; height: 50rpx; margin-right: 10rpx;} .arrow{ width: 16rpx; height: 16rpx; border-top: 4rpx solid #999; border-right: 4rpx solid #999; /* 旋转45度 */ transform: rotate(45deg); /* 调整位置 */ position: absolute; right: 30rpx; top: 38rpx;} .userItemListView text{ font-size: 30rpx;} .last_view{ background:#f0f0f0; width: 100%; height:1200rpx;} 4、个人主页（电影购票系统）
4.1 页面效果
4.2 页面源码（.wxml）
<scroll-view class='scbg' scroll-y='true'> <view class="parent_catainer"> <!-- 头部 --> <view class="container_head"> <image class="head_img" src="/images/back02.jpg"></image> <view class="head_pers_info" bindtap="head_pers_info"> <view class="head_pic"> <image class="head_pic_content" mode="aspectFit" src="/images/lisi.jpg"></image> </view> <view class="inf_content"> <text class="user_info">蛋糕酱</text> </view> </view> </view> <view class="userItemListView"> <view class="my_priview_md" bindtap="myappointpage"> <text>电影票</text> <text class="my_priview_right">点击查看已购电影票</text> </view> <view class="my_priview_md" bindtap="openmyorder"> <text>优惠券</text> <text class="my_priview_right">点击查看优惠券</text> </view> <view class="my_priview_md" bindtap="myaid"> <text>权益卡</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="myfriend"> <text>我的小食</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="mycollection"> <text>想看的电影</text> <view class="arrow"></view> </view> </view> <view class="userItemListView"> <view class="my_priview_md" bindtap="bind"> <text>个人资料</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="updatepassword"> <text>联系客服</text> <text class="my_priview_right">点击咨询票小密</text> </view> <view class="my_priview_md" bindtap="logout"> <text>退出登录</text> <view class="arrow"></view> </view> </view> <view class="last_view"></view> </view></scroll-view>4.3 样式代码 （.wxss）
page { width: 100%; height: 100%; background:#f0f0f0;}.parent_catainer{ background:#f0f0f0;} /* 头部背景图片 */.container_head{ height: 370rpx; width: 100%; display: flex; justify-content: flex-end; align-items: flex-end;} .head_img { position: absolute; width: 100%; height: 370rpx;} .head_pers_info{ height: 200rpx; width: 100%; margin-bottom: 50rpx; justify-content: left; display: flex; align-items: center; flex-direction: row; position: absolute;} .head_pic{ width: 120rpx; height: 120rpx; border-radius: 60rpx; background-color: #08cbb0; color: #ffffff; align-items: center; display: flex; justify-content: center;}.head_pic_content{ position: absolute; width: 110rpx; height: 110rpx; border-radius: 55rpx; background-color: white;} .head_pic{ margin-left: 5%;} .inf_content{ display: flex; flex-direction: column; margin-left: 10rpx; align-items: flex-start; justify-content: center; color: #ffffff; padding-bottom: 5rpx;} .user_info{ text-align: left; font-size: 32rpx; font-weight: bold; margin-bottom: 8rpx;} .family_info_ct_phone{ text-align: center; justify-content: center; font-size: 28rpx; margin-bottom: 2rpx;} .family_info_ct{ text-align: center; justify-content: center; font-size: 28rpx; margin-bottom: 2rpx; width: 500rpx; overflow: hidden; white-space: nowrap; text-align: left; text-overflow: ellipsis;} .userItemListView{ background: #fff; padding: 0 0rpx; margin: 24rpx 0;} .userItemListView > view{ height: 94rpx; line-height: 94rpx; padding-left: 50rpx; border-bottom: 1rpx solid #F1F1F1; position: relative;} /* 移除最后一个元素的下边框 */.userItemListView > view:last-child{ border: none;} .my_priview_md{ display: flex; align-items: center; justify-content: space-between;}.my_priview_right{ /* 调整位置 */ position: absolute; right: 30rpx; color: #ccc;} .my_priview{ width: 50rpx; height: 50rpx; margin-right: 10rpx;} .arrow{ width: 16rpx; height: 16rpx; border-top: 4rpx solid #999; border-right: 4rpx solid #999; /* 旋转45度 */ transform: rotate(45deg); /* 调整位置 */ position: absolute; right: 30rpx; top: 38rpx;} .userItemListView text{ font-size: 30rpx;} .last_view{ background:#f0f0f0; width: 100%; height:1200rpx;}