微信小程序：照片墙小程序项目总结

项目考察点：弹性布局、伪类、base64

1、弹性布局

弹性布局中心思想就是将父容器设为display: flex，它的所有子元素自动成为容器成员。
在本项目中，可以分为两个大盒子：.row-center和.wrap，其中.wrap内又有两个盒子.row-1和.row-2，如图所示：

界面布局划分

• .row-center内项目是居中的，使用 justify-content:center。
• .wrap内项目需要两端对齐，使用justify-content:space-between。
• .row-1内项目从左往右排列，使用justify-content:flex-start。
• .row-2内项目从又往左排列，使用justify-content:flex-end。

WXSS如下：

.row{
  display: flex;
}
.row-center{
  justify-content:center;
}
.wrap{
  display: flex;
  justify-content:space-between;
}
.wrap .row-1{
  justify-content:flex-start;
}
.wrap .row-2{
  justify-content:flex-end;
}

观察row-1结构：

    
      
      姑父
    
    
      
      姑姑
    
    
      
      表弟
    

我们发现.row-1内的项目 item 之间是兄弟关系，而第三个 item 却在下一行，这时就要给盒子.row-1设置flex-wrap: wrap让 item 在一行排不下的时候自动换行。.row-2同理。

 .row{
 display: flex;
 flex-wrap: wrap;
 }

2、伪类

观察标题.title结构：

 我们这一家

标题只有一行代码，那么就需要用到伪类::before和::after实现[图片]和[图片]这两部分。content 属性与 ::before 及 ::after 伪元素配合使用，来插入生成内容。因为本项目只需要插入背景图片，因此content设置为空。

.title::before{
  content: '';
  display: block;
  position:absolute;
  left:-36rpx;
  top:8rpx;
  width:36rpx;
  height:32rpx;
  background-size: cover;
  background-image: url(`http://xxxxxxxx`);
}
.title::right{
  content: '';
  display: block;
  position:absolute;
  right:-36rpx;
  top:8rpx;
  width:36rpx;
  height:32rpx;
  background-size: cover;
  background-image: url(`http://xxxxxxxx`);
}

当只需要给相同元素中第一个元素设置样式的时候，可以使用伪类:first-of-type。因此照片间距我们只需要给每个.row中第一个子元素 item 设置 margin-right 。

.item:first-of-type{
 margin-right:14rpx;
}

3、base64

由于 WXSS 中不支持引入本地图片，因此在 WXSS 使用 background-image 引入图片时，只能使用网络图片或将本地图片转为 base64 。

两种方式优缺点：

• 引用网络图片代码相对简单，但缺点是需要将图片上传服务器。
• 将本地图片转为 base64 的好处是减少 HTTP 请求，但由于 base64 编码会导致图片体积变大，因此适合小尺寸的图片。
• 网络上有许多 base64 图片在线转换工具，比如 http://imgbase64.duoshitong.com/。