朋友圈图片展现形式：
1、一张宽图：宽度100%，高度自适应
2、一张长图：高度全部展示，有最大高度，宽度自适应
3、多张图片：除去一张，两张和四张的时候是一排两张，其他都是一排三张，依次向后累加
4、视频：宽度是屏幕宽度的一半，高度自适应（视频的展现形式可能和朋友圈有些出入）

实现思路：
1、判断遍历对象是图片是视频，分别展示不同view
2、视频：为视频绑定加载完成事件bindloadedmetadata=“videometa”，在videometa方法中获取视频的宽高，并setData双向绑定在视频标签上
3、图片：
3.1、单张图片：为图片绑定加载完成事件bindload=“oneImageLoad”，在oneImageLoad中获取图片宽高，判断宽高大小来区别是长图还是宽图，并返回状态值isHeightMode，在图片标签中用isHeightMode 来决定图片的mode是widthFix还是heightFix，如果是长图HeightFix模式的时候，要给定图片最大高度
3.2、多张图片，一律都是mode=“aspectFill”，在css样式中编写顶宽定高，一排显示几张

下面只展示图片视频相关代码：
wxml：

  <!-- 图片和视频 --><view class="img_box"><view class="{{mediaList.length > 1 ? 'many_img' : ''}}"><!-- 遍历 --><!-- 在这里判断图片的数量是单站还是四张，分别给不同样式，来实现，一排是两张还是三张 --><viewwx:for="{{mediaList}}"wx:key="index"class="img_item {{mediaList.length == 1 ? 'one' : mediaList.length == 4 ? 'four' : 'many'}}"><!-- item.type == 2 是视频 --><!-- style 的 宽高是 视频标签 bindloadedmetadata="videometa" 方法里计算的宽高 --><viewclass="video_box"wx:if="{{item.type == 2}}"style="width: {{width}}rpx;height: {{height}}rpx;"><viewclass="video_marks"catchtap="previewImage"data-index="{{index}}"data-sources="{{mediaList}}"></view><videoclass="video"src="{{item.url}}"bindloadedmetadata="videometa"controls="{{false}}"></video></view><!-- 不是 item.type == 2 就是图片 else --><block wx:else><!-- 如果只有一张图片 bindload="oneImageLoad" 获取图片宽高，并计算宽高比，来判断图片的 mode 是 widthFix 还是 heightFix --><imagewx:if="{{mediaList.length == 1}}"class="img"bindtap="previewImage"bindload="oneImageLoad"src="{{item.url}}"data-sources="{{mediaList}}"data-index="{{index}}"mode="{{isHeightMode ? 'heightFix' : 'widthFix'}}"style="height: {{isHeightMode ? '500rpx' : ''}}"></image><!-- 多张图片 一律使用 aspectFill 并固定宽高 --><imagewx:elseclass="img"src="{{item.url}}"bindtap="previewImage"data-sources="{{mediaList}}"data-index="{{index}}"mode="aspectFill"></image></block></view></view></view>

js：

    // 预览图片previewImage(e) {let {sources, index} = e.currentTarget.datasetsources.filter(i => {i.type = i.type == 2 ? 'video' : 'image'i.poster = i.imgUrl})wx.previewMedia({sources,current: index})},// 视频加载完成，改变视频的宽高videometa(e) {var that = this;//获取系统信息wx.getSystemInfo({success (res) {//视频的高var height = e.detail.height;//视频的宽var width = e.detail.width;//算出视频的比例var proportion = height / width;//res.windowWidth为手机屏幕的宽。var windowWidth = res.windowWidth;//算出当前宽度下高度的数值height = proportion * windowWidth;that.setData({height,width:windowWidth});}})},// 图片加载后判断图片宽高比例oneImageLoad(e) {const { width , height } = e.detailheight >= width && this.setData({ isHeightMode: true })}

wxss：

.guidebook .img_box {margin-bottom: 12rpx;padding-left: 4rpx;
}
.guidebook .img_box .many_img {display: flex;justify-self: start;flex-wrap: wrap;
}
.guidebook .img_item.four {width: 198rpx;height: 198rpx;margin-right: 16rpx;margin-bottom: 16rpx;border-radius: 16rpx;overflow: hidden;
}
.guidebook .img_item.four:nth-child(2n) {margin-right: 30rpx;
}
.guidebook .img_item.many {width: 198rpx;height: 198rpx;margin-right: 16rpx;margin-bottom: 16rpx;border-radius: 16rpx;overflow: hidden;
}
.guidebook .img_item.many:nth-child(3n) {margin-right: 0;
}