uniapp+vue3仿抖音/微信直播+短视频+聊天-极光社区

原创uniapp+vue3+vite5+uv-ui搭建短视频+直播+聊天系统uniapp-dylive。

运行到h5+小程序+app端效果

null

uni-vue3-dylive实现了类似抖音上下滑动视频切换播放功能。新增了仿微信聊天等功能。

null

使用技术

编辑器：HbuilderX 4.66
框架技术：Uniapp+Vue3+Vite5+Nvue+Pinia2
UI组件库：uv-ui+vk-uview
弹框组件：uaPopup（uniapp封装多端弹框组件）
自定义组件：uaNavbar+uaTabbar组件
本地缓存：pinia-plugin-unistorage
编译支持：h5+小程序+APP端

null

项目框架目录

null

目前uni-vue3-dylive项目已经同步到我的原创作品集。
uni-app+vue3+pinia2+uv-ui跨三端短视频+聊天+直播商城

null

uniapp+vue3短视频模块

null

<ua-layout>
    <view class="ua__swipervideo flex1">
        <swiper
            class="ua__swipervideo-wrap flex1"
            :current="currentVideo"
            vertical
            :circular="true"
            :duration="200"
            @change="handleChange"
            @transition="handleTransition"
        >
            <swiper-item v-for="(item, index) in videoList" :key="index">
                <video
                    class="ua__swipervideo-player flex1"
                    :id="'uplayer' + index"
                    :src="item.src"
                    :danmu-list="item.danmu"
                    :enable-danmu="true"
                    :controls="false"
                    :loop="true"
                    :autoplay="index == currentVideo"
                    :show-center-play-btn="false"
                    object-fit="contain"
                    @click="handleClickVideo"
                    @play="isPlaying=true"
                    @timeupdate="handleTimeUpdate"
                    :style="{'width': `${winWidth}px`, 'height': `${winHeight}px`}"
                >
                </video>

                <!-- 浮层模块 -->
                <view class="ulive__video-float__info flexbox flex-col">
                    <view class="flexbox flex-row flex-alignb">
                        <!-- 左侧 -->
                        <view class="vdinfo__left flex1 flexbox flex-col">
                            <view class="ltrow danmu flexbox" @click="handleOpenDanmu"><text class="danmu-txt">弹</text><uv-icon class="ico" name="edit-pen" color="#fff" size="14" /></view>
                            <view class="ltrow"><text class="ait">@{{item.author}}</text></view>
                            <view class="ltrow"><text class="desc">{{item.desc}}</text></view>
                        </view>
                        <!-- 右侧操作栏 -->
                        <view class="vdinfo__right flexbox flex-col">
                            <view class="rtbtn avatar flexbox flex-col">
                                <view class="ubox"><image class="uimg" :src="item.avatar" mode="aspectFill" /></view>
                                <view class="btn flexbox" :class="{'active': item.isFollow}" @click="handleFollow(index)"><uv-icon :name="item.isFollow ? 'checkmark' : 'plus'" :color="item.isFollow ? '#ff007f' : '#fff'" size="11" /></view>
                            </view>
                            <view class="rtbtn flexbox flex-col" @click="handleLiked(index)"><uv-icon name="heart-fill" :color="item.isLike ? '#ff007f' : '#fff'" size="40" /><text class="num">{{item.likeNum+(item.isLike ? 1 : 0)}}</text></view>
                            <view class="rtbtn flexbox flex-col" @click="handleOpenComment(index)"><uv-icon name="chat-fill" color="#fff" size="40" /><text class="num">{{item.replyNum}}</text></view>
                            <view class="rtbtn flexbox flex-col"><uv-icon name="star-fill" color="#fff" size="40" /><text class="num">{{item.starNum}}</text></view>
                            <view class="rtbtn flexbox flex-col" @click="handleOpenShare(index)"><uv-icon name="share-fill" color="#fff" size="40" /><text class="num">{{item.shareNum}}</text></view>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>

        <!-- 固定tabs(脱离滑动区) -->
        <view class="ulive__video-header__tabs" :style="{'margin-top': `${menuBarT}px`}">
            <uv-tabs :current="tabsCurrent" :list="tabsList" />
        </view>

        <!-- 播放暂停按钮 -->
        <view v-if="!isPlaying" class="ua__swipervideo-playbtn" :style="{'left': `${winWidth/2}px`, 'top': `${winHeight/2}px`}" @click="handleClickVideo">
            <text class="ua__swipervideo-playico welive-icon welive-icon-play nvueicon"></text>
        </view>

        <!-- 播放mini进度条 -->
        <view v-if="sliderValue > 0" class="ua__swipervideo-slider">
            <slider
                :value="sliderValue"
                :step="sliderStep"
                :max="sliderMaxValue"
                activeColor="#fff"
                backgroundColor="rgba(255,255,255,.2)"
                block-color="#fff"
                block-size="6"
                @changing="onSliderChanging"
                @change="onSliderChange"
            />
        </view>
    </view>

    <template #footer>
        <ua-tabbar bgcolor="transparent" color="rgba(255,255,255,.7)" :border="false" :dock="false" transparent z-index="1000" />
    </template>
</ua-layout>

null

// 监听播放进度条
const handleTimeUpdate = (e) => {
    let { currentTime, duration } = e.detail
    sliderValue.value = currentTime
    sliderMaxValue.value = duration
    sliderStep.value = currentTime / duration
}

// 滑动条拖动中
const onSliderChanging = (e) => {
    sliderValue.value = e.detail.value
    handlePause()
}

// 滑动条拖动结束
const onSliderChange = (e) => {
    sliderValue.value = e.detail.value
    let video = getVideoContext()
    if(!video) return
    video.seek(sliderValue.value)
    handlePlay()
}

null

uniapp+vue3仿抖音/微信直播+短视频+聊天

运行到h5+小程序+app端效果

使用技术

项目框架目录

uniapp+vue3短视频模块

0条评论