uniapp 仿火山 / 抖音短视频|uni-App+vue 直播实例

uniapp仿火山/抖音短视频|uni-app+vue直播实例

项目简介

U直播是一个基于uniapp+vue+nvue+vuex等技术实现的小视频/直播界面/聊天等功能的跨端项目,分别仿制了抖音小视频、陌陌直播界面功能,可实现上下滑动切换播放、暂停,评论、商品等功能。

技术框架

  • 编辑器+技术:HBuilderX + vue/NVue/uniapp/vuex
  • iconfont图标:阿里字体图标库
  • 自定义导航栏 + 底部Tabbar
  • 弹窗组件:uniPop(uni-app封装自定义Modal弹窗)
  • 测试环境:H5端/小程序/App端/真机

uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例

App.vue页面获取顶部状态栏高度

<script>
    import Vue from 'vue'
    export default {
        onLaunch: function() {
            // console.log('App Launch')
            uni.getSystemInfo({
                success:function(e){
                    Vue.prototype.statusBar = e.statusBarHeight
                    // #ifndef MP
                    if(e.platform == 'android') {
                        Vue.prototype.customBar = e.statusBarHeight + 50
                    }else {
                        Vue.prototype.customBar = e.statusBarHeight + 45
                    }
                    // #endif

                    // #ifdef MP-WEIXIN
                    let custom = wx.getMenuButtonBoundingClientRect()
                    Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
                    // #endif

                    // #ifdef MP-ALIPAY
                    Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
                    // #endif
                }
            })
        },
    }
</script>

顶部透明导航栏实现

由于原生导航栏功能限制,有些效果不好实现,于是就自定义顶部导航栏模式,可设置透明背景(如:个人主页/朋友圈动态)效果, 具体可参看这篇文章:uni-app自定义导航栏按钮|uniapp仿微信顶部导航条
uniapp仿火山/抖音短视频|uni-app+vue直播实例
uniapp仿火山/抖音短视频|uni-app+vue直播实例

<header-bar :isBack="true" title=" " :bgColor="{background: 'transparent'}" transparent>
    <text slot="back" class="uni_btnIco iconfont icon-guanbi" style="font-size: 25px;"></text>
    <text slot="iconfont" class="uni_btnIco iconfont icon-dots mr_5" style="font-size: 25px;"></text>
</header-bar>

仿抖音小视频切换实现

uniapp+swiper实现类似抖音/火山小视频上下滑动切换视频效果,点击可播放、暂停,点赞、评论等功能

<swiper :indicator-dots="false" :duration="200" :vertical="true" :current="videoIndex" @change="handleSlider" style="height: 100%;">
    <block v-for="(item,index) in vlist" :key="index">
        <swiper-item>
            <view class="uni_vdplayer">
                <video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src" 
                :controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill">
                </video>
                <!-- 中间播放按钮 -->
                <view class="vd-cover flexbox" @click="handleClicked(index)"><text v-if="!isPlay" class="iconfont icon-bofang"></text></view>
                <!-- 底部信息 -->
                <view class="vd-footToolbar flexbox flex_alignb">
                    <view class="vd-info flex1">
                        <view class="item at">
                            <view class="kw" v-for="(kwItem,kwIndex) in item.keyword" :key="kwIndex"><text class="bold fs_18 mr_5">#</text> {{kwItem}}</view>
                        </view>
                        <view class="item subtext">{{item.subtitle}}</view>
                        <view class="item uinfo flexbox flex_alignc">
                            <image class="avator" :src="item.avator" mode="aspectFill" /><text class="name">{{item.author}}</text> <text class="btn-attention bg_linear1" :class="item.attention ? 'on' : ''" @tap="handleAttention(index)">{{item.attention ? '已关注' : '关注'}}</text>
                        </view>
                        <view class="item reply" @tap="handleVideoComment"><text class="iconfont icon-pinglun mr_5"></text> 写评论...</view>
                    </view>
                    <view class="vd-sidebar">
                        <view v-if="item.cart" class="ls cart flexbox bg_linear3" @tap="handleVideoCart(index)"><text class="iconfont icon-cart"></text></view>
                        <view class="ls" @tap="handleIsLike(index)"><text class="iconfont icon-like" :class="item.islike ? 'like' : ''"></text><text class="num">{{ item.likeNum+(item.islike ? 1: 0) }}</text></view>
                        <view class="ls" @tap="handleVideoComment"><text class="iconfont icon-liuyan"></text><text class="num">{{item.replyNum}}</text></view>
                        <view class="ls"><text class="iconfont icon-share"></text><text class="num">{{item.shareNum}}</text></view>
                    </view>
                </view>
            </view>
        </swiper-item>
    </block>
</swiper>

uniapp仿火山/抖音短视频|uni-app+vue直播实例

<script>
    let timer = null
    export default {
        data() {
            return {
                videoIndex: 0,
                vlist: videoJson,

                isPlay: true,    //当前视频是否播放中
                clickNum: 0,    //记录点击次数
            }
        },
        components: {
            videoCart, videoComment
        },
        onLoad(option) {
            this.videoIndex = parseInt(option.index)
        },
        onReady() {
            this.init()
        },
        methods: {
            init() {
                this.videoContextList = []
                for(var i = 0; i < this.vlist.length; i++) {
                    // this.videoContextList.push(this.$refs['myVideo' + i][0])
                    this.videoContextList.push(uni.createVideoContext('myVideo' + i, this));
                }

                setTimeout(() => {
                    this.play(this.videoIndex)
                }, 200)
            },

            // 滑动切换
            handleSlider(e) {
                let curIndex = e.detail.current
                if(this.videoIndex >= 0){
                    this.videoContextList[this.videoIndex].pause()
                    this.videoContextList[this.videoIndex].seek(0)
                    this.isPlay = false
                }
                if(curIndex === this.videoIndex + 1) {
                    this.videoContextList[this.videoIndex + 1].play()
                    this.isPlay = true
                }else if(curIndex === this.videoIndex - 1) {
                    this.videoContextList[this.videoIndex - 1].play()
                    this.isPlay = true
                }
                this.videoIndex = curIndex
            },
            // 播放
            play(index) {
                this.videoContextList[index].play()
                this.isPlay = true
            },
            // 暂停
            pause(index) {
                this.videoContextList[index].pause()
                this.isPlay = false
            },
            // 点击视频事件
            handleClicked(index) {
                if(timer){
                    clearTimeout(timer)
                }
                this.clickNum++
                timer = setTimeout(() => {
                    if(this.clickNum >= 2){
                        console.log('双击视频')
                    }else{
                        console.log('单击视频')
                        if(this.isPlay){
                            this.pause(index)
                        }else{
                            this.play(index)
                        }
                    }
                    this.clickNum = 0
                }, 300)
            },

            // 喜欢
            handleIsLike(index){
                let vlist = this.vlist
                vlist[index].islike =! vlist[index].islike
                this.vlist = vlist
            },
            // 显示评论
            handleVideoComment() {
                this.$refs.videoComment.show()
            },

            // 显示购物车
            handleVideoCart(index) {
                this.$refs.videoCart.show(index)
            },
        }
    }
</script>

基于Nvue小视频开发

由于原生video、map等原生组件层级较高,虽说cover-view组件可以覆盖其上,但其不能嵌套子组件,且限制较大,故只能采用编写.nvue(native vue)页面了。nvue页面语法结构和vue无太大差别,只是需要注意css编写方式,且只能使用flex布局模式,另外一些css属性无效。引入iconfont也有差异。
nvue引入iconfont方式:

beforeCreate() {
    // 引入iconfont字体
    // #ifdef APP-PLUS
    const domModule = weex.requireModule('dom')
    domModule.addRule('fontFace', {
        fontFamily: "nvueIcon",
        'src': "url('../../../static/fonts/iconfont.ttf')"
    });
    // #endif
},

好了,以上就是uniapp开发小视频/直播项目的介绍,希望对大家有些许帮助吧 ✍💪
最后分享个之前开发的H5即时IM项目
HTML5趣聊|仿微信h5语音|摇一摇|地图|红包
uniapp仿火山/抖音短视频|uni-app+vue直播实例

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
本帖由系统于 3年前 自动加精
讨论数量: 11

这个app上线过了么?我想看看流畅不

4年前 评论

大佬 项目开源吗????? :grin:

4年前 评论
test2018

收费的 估计

3年前 评论
blankqwq

大佬牛

3年前 评论

开源分享下,共同进步。。是不是的啊

3年前 评论

你这blog到处各个网站发,也没见到一个开源链接呐?

3年前 评论
test2018 3年前

用uniapp 开发直播、小视频之类项目的话,可以试一试我近期在使用的【GoEasy】这个框架,支持微信小程序、uniapp、react等,实时性不错,也比较稳定易用,有弹幕、直播聊天室开发需求的也可以去看看。地址:www.goeasy.io/

2年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
46
粉丝
44
喜欢
99
收藏
54
排名:372
访问:2.6 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
2
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
2
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
1
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
1
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1
vue3桌面管理
1
vite2+electron13
1
electron仿mac桌面
1
electron桌面管理
1
vite2桌面应用
1
uniapp短视频
1
uniapp仿抖音
1
uni-app直播
1
uniapp后台
1
uni-app+uview后台系统
1
svelte.js实战开发
1
svelte3仿微信
1
svelte+svelteKit聊天室
1
svelte聊天实例
2
svelte朋友圈
1
svelte.js仿微信
1
svelte.js网页聊天
1
svelte-ui-admin
1
svelte-admin后台管理
1
svelte管理系统
1
tauri桌面应用
1
tauri+vue3
1
vite3+tauri
1
tauri聊天程序
1
tauri仿微信
1
vue3后台管理
1
vite.js管理系统
1
vue3+vite4
1
vite4+pinia
1
vue3+pinia2
1
vue3-chatgpt
2
vite-chatgpt
1
chatgpt-mobile
1
electron-chatgpt
1
electron+vite4+vue3
1
electron25-vue3
1
chatgpt-vite
1
uni-chatgpt
1
uniapp+vue3+pinia
2
vite+uniapp
1
chatgpt-uniapp
1
tauri-admin
1
tauri+rust+vue3
1
tauri后台管理
1
tauri-vite
1
tauri+vue3桌面端后台
1
react18 hooks
2
react18+arco
2
react18+zustand
1
react18-webchat
1
react18-admin
1
react-arco-admin
1
react-vite-admin
1
react18后台管理
1
electron-mateos
1
electron27+react18
1
electron-react-macos
1
electron桌面os
1
react-macos
1
uniapp+vue3直播
1
flutter3-chat
2
flutter3仿微信
2
flutter3聊天
2
flutter3+dart3
1
flutter3桌面端开发
1
flutter3-douyin
1
flutter3仿抖音
1
flutter3短视频
1
flutter3直播
1
社区赞助商