uni-app 实现微信朋友圈

前言：最近在与小伙伴们一起开发一款微信小程序，我们展示图片的方式想参照微信朋友圈，干了一个晚上加一个上午终于实现了这个功能，在这里与诸位小伙伴一起分享。

展示图片主要有以下几种情况需要考虑：

1.展示1张图片时，完整展示整张图片

 2.展示2张图片时，无法完整的展示整张图片，2张并列展示

  3.展示3张图片时，无法完整的展示整张图片，3张在一排并列展示

 4.展示4张图片时，无法完整的展示整张图片，2张一排，共两排

 5.展示5~9张图片时，无法完整的展示整张图片，每3张图片为一排，最多3排

接下来，我们开始实现，首先搭建结构

<template>	
	<view class="container">
		   <view v-for="(item, index) in images.slice(0, 9)" :key="index"
			:class="{'image-wrapper': images.length === 1||2||3||5||6||7||8||9, 
            'images-wrapper-special': images.length === 4}">
				<image :src="item" mode="aspectFill" class="image"
				:class="{'one-image': images.length === 1}"></image>
			</view>
	</view>
</template>

其次，定义动态动态数组

<script setup>
	import {
		reactive
	} from 'vue'
	let images = reactive([
		'https://tse3-mm.cn.bing.net/th/id/OIP-C.EdR-CCRff01qwa1fciVWyQHaIp? 
         w=188&h=220&c=7&r=0&o=5&dpr=1.3&pid=1.7',
		'https://tse3-mm.cn.bing.net/th/id/OIP-C.WQT5rrxpOXzISuXL9Egj7wHaJM? 
         w=159&h=197&c=7&r=0&o=5&dpr=1.3&pid=1.7',
		'https://tse3-mm.cn.bing.net/th/id/OIP-C.EdR-CCRff01qwa1fciVWyQHaIp? 
         w=188&h=220&c=7&r=0&o=5&dpr=1.3&pid=1.7',
		'https://tse3-mm.cn.bing.net/th/id/OIP-C.WQT5rrxpOXzISuXL9Egj7wHaJM? 
         w=159&h=197&c=7&r=0&o=5&dpr=1.3&pid=1.7',
		'https://tse3-mm.cn.bing.net/th/id/OIP-C.EdR-CCRff01qwa1fciVWyQHaIp? 
         w=188&h=220&c=7&r=0&o=5&dpr=1.3&pid=1.7',
		// 更多图片URL...
	])
</script>

接下来就是重头戏，CSS的书写，因为uni-app不支持很复杂的CSS样式，所以写CSS真的很让人头疼，干了那么久，大家凑合看：

<style type="text/css">
	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
    /* 剩余其他照片的样式 */
	.image-wrapper {
		width: 32%;
		height: 100px;
		margin-top: 5px;
	}
     /* 特殊的四张照片 */
	.images-wrapper-special {
		width: 35%;
		height: 100px;
		margin-top: 5px;
	}
     /* 每一张图片右边与底部有间隔 */
	.image {
		margin-right: 2%;
		margin-bottom: 1%;
	}
     /* 一张照片 */
	.one-image {
		/* 此百分比可以根据自己的需要进行调整 */
		width: 280%;
		height: 280%;
	}
</style>