notepad++ 万能的微信小程序个人主页：商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】

前言

以下给出来四个常见的小程序个人主页，分别是商城系统个人主页，外卖系统个人主页，挂号系统个人主页，电影购票系统个人主页。包括完整的页面布局代码，完整的样式代码。使用的时候，只需要将页面代码和样式代码复制到自己项目对应的页面即可。而且可以根据已有代码只需稍微改造，便可以作为其他小程序的个人首页。

1、个人主页（商城系统）

1.1 页面效果

1.2 页面源码（.wxml）

这里的图片地址，修改为自己项目图片地址。也可以引入在线图片链接

张三牛人

收藏的店铺

收藏的商品

关注的商品

我的足迹

我的订单

全部订单

待付款

待收获

退货/退货

收获地址管理

联系客服

18348392981

意见反馈

关于我们

把应用推荐给其他人

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）

张麻子

联系电话：1832437281

我的订单

10.4万

借钱

100.34元

我的账单

6月

消费账单

1.66元

查看卡额度

我的米粒

美团红包

商家代金券

拼好饭代金券

我的收藏

我的评价

个人资料

我的地址

修改手机号

退出账号

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）

张麻子

联系电话：1832437281

关联账号：张老师

我的预约

我的订单

我的帮助

我的亲友

我的收藏

个人资料

修改密码

关于我们

退出登录

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）

蛋糕酱

电影票

点击查看已购电影票

优惠券

点击查看优惠券

权益卡

我的小食

想看的电影

个人资料

联系客服

点击咨询票小密

退出登录

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;

}

好文阅读

评论可见，请评论后查看内容，谢谢！！！

您阅读本篇文章共花了：

金钥匙

notepad++ 万能的微信小程序个人主页：商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】

微信公众平台 (最详细)Charles+Burp+手机联动抓取WX小程序/公众号数据包

腾讯云物联网服务器与微信小程序设计（讲解设备如何上云，如何对接微信小程序）

发表评论取消回复

金钥匙

notepad++ 万能的微信小程序个人主页：商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】

微信公众平台 (最详细)Charles+Burp+手机联动抓取WX小程序/公众号数据包

腾讯云物联网服务器与微信小程序设计（讲解设备如何上云，如何对接微信小程序）

相关文章

发表评论取消回复