标签：3px flex color 微信 程序 white margin 商城

本章主要讲解会员相关功能的界面实战。包含：会员首页界面、我的订单页面，收货地址管理、新增、修改页面、我的收藏页面、常见问题页面、联系客服页面等。
本章节不在分析界面的层级了，大家可以根据示意图分析，然后结合给出的示例代码对比实战。

会员首页

本节主要讲解会员首页界面的实现。效果如图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）微信小程序学习路线 http://www.hzyaoyi.cn/

（2）Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

（3）PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

（4）微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/

标签：3px,flex,color,微信,程序,white,margin,商城
来源： https://blog.51cto.com/u_13898481/2890830

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。