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

news2025/6/2 11:09:07

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

前言

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

一、需求与设计思路

1. 需求分析

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

2. 设计思路

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

二、核心代码实现

1. 组件结构

<template>
  <view class="media-viewer">
    <swiper
      class="media-swiper"
      :indicator-dots="true"
      :current="current"
      @change="onChange"
    >
      <swiper-item v-for="(item, idx) in mediaList" :key="idx">
        <image
          v-if="item.type === 'image'"
          :src="item.url"
          class="media-img"
          mode="aspectFill"
          :lazy-load="true"
          @click="previewImage(item.url)"
        />
        <video
          v-else-if="item.type === 'video'"
          :src="item.url"
          class="media-video"
          controls
          :poster="item.poster || ''"
          @fullscreenchange="onFullScreen"
        />
      </swiper-item>
    </swiper>
    <view class="thumbs">
      <view
        v-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>