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

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

弹性布局中心思想就是将父容器设为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;
 }

观察标题.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;
}

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

两种方式优缺点：

• 引用网络图片代码相对简单，但缺点是需要将图片上传服务器。

• 将本地图片转为 base64 的好处是减少 HTTP 请求，但由于 base64 编码会导致图片体积变大，因此适合小尺寸的图片。

• 网络上有许多 base64 图片在线转换工具，比如 http://imgbase64.duoshitong.com/。

作者：立正小歪牙
链接：https://www.jianshu.com/p/4499b7453602
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。