本章主要讲解会员相关功能的界面实战。包含：会员首页界面、我的订单页面，收货地址管理、新增、修改页面、我的收藏页面、常见问题页面、联系客服页面等。
本章节不在分析界面的层级了，大家可以根据示意图分析，然后结合给出的示例代码对比实战。
会员首页
本节主要讲解会员首页界面的实现。效果如图15-1所示
1.布局分析
结构布局分析示意如图15-2所示。
根据上面的布局分析，我们会产生基础的框架，代码示例如下：
<view><image></image><view ><text>用户昵称</text><text>等级：普通会员</text><text>手机：【绑定手机号码】</text></view></view><navigator ><view><image></image><text>我的订单</text><image ></image></view></navigator>2.功能实现.wxml文件代码示例如下：<view class='toubu'><image class="toubu-img" src="{{userInfo.avatarUrl}}" background-size="cover"></image><view class='two-line-text'><text class='txt1'>{{userInfo.nickName}}</text><text class="txt2">等级：普通会员</text><text class="txt3">手机：【绑定手机号码】</text></view></view><navigator url='/pages/huiyuan/order/order_list2'><view class="wx-cell"><image class="wx-cell-icon" src="/images/sys01.png"></image><text class="wx-cell-text">我的订单</text><image class="wx-cell-arrow" src="/images/right.png"></image></view></navigator><navigator url='/pages/huiyuan/addr/index'><view class="wx-cell"><image class="wx-cell-icon" src="/images/sys02.png"></image><text class="wx-cell-text">收货地址管理</text><image class="wx-cell-arrow" src="/images/right.png"></image></view></navigator><navigator url='/pages/huiyuan/qita/01-shoucang'><view class="wx-cell"><image class="wx-cell-icon" src="/images/sys03.png"></image><text class="wx-cell-text">我的收藏</text><image class="wx-cell-arrow" src="/images/right.png"></image></view></navigator><navigator url='/pages/huiyuan/qita/02-wenti'><view class="wx-cell"><image class="wx-cell-icon" src="/images/sys06.png"></image><text class="wx-cell-text">常见问题</text><image class="wx-cell-arrow" src="/images/right.png"></image></view></navigator><navigator url='/pages/huiyuan/qita/03-kefu'><view class="wx-cell"><image class="wx-cell-icon" src="/images/sys05.png"></image><text class="wx-cell-text">联系客服</text><image class="wx-cell-arrow" src="/images/right.png"></image></view></navigator><view class="wx-cell"><image class="wx-cell-icon" src="/images/sys04.png"></image><text class="wx-cell-text">退出登录</text><image class="wx-cell-arrow" src="/images/right.png"></image></view>
.wxss文件样式代码示例如下：
/*头部样式*/.toubu{display: flex;margin: 1rpx;border: #ddd solid 1px;padding: 10rpx;background-color: crimson;}.toubu-img{width: 80px;height: 80px;margin: 20rpx;border-radius: 50%;}.two-line-text{padding: 3px;display: flex;flex-direction: column;}.txt1{margin: 3px 3px;font-size: 16px;font-weight: bold;white-space: nowrap; color: white;}.txt2{margin: 5px 3px 5px;font-size: 14px;color: white;white-space: nowrap; background-color: darkorange;}.txt3{margin: 3px 3px;font-size: 15px;color: white;white-space: nowrap;}/*会员首页菜单样式*/.wx-cell {width: 100%;margin-top: 15rpx;font-size: 34rpx;border-top: 1rpx solid #d9d9d9;border-bottom: 1rpx solid #d9d9d9;background-color: #fff;padding: 20rpx 25rpx;display: flex;flex-direction: row;align-items: center;}.wx-cell-icon{width: 56rpx;height: 56rpx;}.wx-cell-text{flex: 1;margin-left: 30rpx;}.wx-cell-arrow{width: 30rpx;height: 30rpx;margin-right:30rpx;}
小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中
【微信小程序参考资料】
（1）微信小程序学习路线 /
（2）Java微信小程序商城系统指导 /course/3066521
（3）PHP微信小程序商城系统指导 /course/3066518
（4）微信官方文档 https://developers./miniprogram/dev/framework/
21-微信小程序商城 会员首页（微信小程序商城开发 小程序毕业设计 小程序源代码）（黄菊华-微信小程序开发教程）
如果觉得《21-微信小程序商城 会员首页（微信小程序商城开发 小程序毕业设计 小程序源代码）》对你有帮助，请点赞、收藏，并留下你的观点哦！
