当前位置：首页 > article >正文

鸿蒙OSUniApp 开发支持图片和视频的多媒体展示组件#三方框架 #Uniapp

article 2025/8/25 14:48:41

使用 UniApp 开发支持图片和视频的多媒体展示组件

前言

在现代移动应用中，图片和视频已成为内容展示的主流形式。一个优秀的多媒体展示组件不仅能提升用户体验，还能增强产品的互动性和视觉冲击力。随着鸿蒙（HarmonyOS）生态的不断壮大，开发者对多端适配和高性能渲染提出了更高要求。本文将以 UniApp 为例，详细讲解如何开发一个支持图片和视频的多媒体展示组件，并给出鸿蒙平台的适配建议。

一、需求与设计思路

1. 需求分析

支持图片和视频混合展示，自动识别类型
支持全屏预览图片、播放视频
支持滑动切换、缩略图导航
兼容鸿蒙平台，适配不同分辨率
组件化设计，便于复用和扩展

2. 设计思路

使用 swiper 组件实现滑动切换
通过 v-for 渲染多媒体列表，自动区分图片和视频
图片采用 image 组件，支持懒加载和预览
视频采用 video 组件，支持全屏播放
提供缩略图导航，提升交互体验
适配鸿蒙平台的多媒体能力和性能特性

二、核心代码实现

1. 组件结构

<template><view class="media-viewer"><swiperclass="media-swiper":indicator-dots="true":current="current"@change="onChange"><swiper-item v-for="(item, idx) in mediaList" :key="idx"><imagev-if="item.type === 'image'":src="item.url"class="media-img"mode="aspectFill":lazy-load="true"@click="previewImage(item.url)"/><videov-else-if="item.type === 'video'":src="item.url"class="media-video"controls:poster="item.poster || ''"@fullscreenchange="onFullScreen"/></swiper-item></swiper><view class="thumbs"><viewv-for="(item, idx) in mediaList":key="idx":class="['thumb', { active: idx === current }]"@click="goTo(idx)"><image v-if="item.type === 'image'" :src="item.url" class="thumb-img" mode="aspectFill" /><view v-else class="thumb-video"><image :src="item.poster || defaultPoster" class="thumb-img" mode="aspectFill" /><text class="play-icon">▶</text></view></view></view></view>
</template>

2. 脚本逻辑

<script>
export default {name: 'MediaViewer',props: {mediaList: { type: Array, required: true },defaultPoster: { type: String, default: '/static/video-poster.png' },},data() {return {current: 0,};},methods: {onChange(e) {this.current = e.detail.current;},goTo(idx) {this.current = idx;},previewImage(url) {const imgs = this.mediaList.filter(m => m.type === 'image').map(m => m.url);uni.previewImage({urls: imgs,current: url,});},onFullScreen(e) {// 可根据 e.detail.fullScreen 做自定义处理},},
};
</script>

3. 样式设计

<style scoped>
.media-viewer {width: 100vw;background: #000;padding-bottom: 24rpx;
}
.media-swiper {width: 100vw;height: 420rpx;background: #000;
}
.media-img, .media-video {width: 100vw;height: 420rpx;object-fit: cover;border-radius: 12rpx;background: #222;
}
.thumbs {display: flex;justify-content: center;margin-top: 18rpx;gap: 16rpx;
}
.thumb {width: 88rpx;height: 88rpx;border-radius: 10rpx;overflow: hidden;border: 2rpx solid transparent;position: relative;background: #222;cursor: pointer;
}
.thumb.active {border-color: #007aff;
}
.thumb-img {width: 100%;height: 100%;object-fit: cover;
}
.thumb-video {position: relative;width: 100%;height: 100%;
}
.play-icon {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);color: #fff;font-size: 36rpx;text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.18);
}
</style>

三、父页面集成与使用示例

<template><media-viewer :mediaList="mediaList" />
</template><script>
import MediaViewer from '@/components/MediaViewer.vue';
export default {components: { MediaViewer },data() {return {mediaList: [{ type: 'image', url: 'https://cdn.example.com/1.jpg' },{ type: 'video', url: 'https://cdn.example.com/2.mp4', poster: 'https://cdn.example.com/2.jpg' },{ type: 'image', url: 'https://cdn.example.com/3.jpg' },],};},
};
</script>