uni-app+nvue滑动短视频|直播|聊天朋友圈

简短介绍

基于uniapp+uview-ui开发的一款多端仿制抖音APP小视频/直播项目。

可上下流畅的滑动切换小视频、暂停/播放及点赞、评论等功能。支持编译h5+小程序+App端

实现技术

  • 编辑器:hbuilderx3.1.21
  • 编码器/技术:uniapp+nvue+nuex+ua-popup
  • 组件库:uview-ui / uni-ui
  • 矢量图标库:iconfont字体图标
  • 弹窗组件:uaPopup 基于uni-app自定义全端弹窗组件
  • 自定义导航条+底部菜单栏
  • 编译支持:H5+小程序+APP端

项目结构

uniapp全端自定义组件

为了这个项目,特意封装了导航栏、tabbar组件及uaPopup弹框组件。

基于uniapp自定义navbar+tabbar组件

基于uniapp跨多端自定义模态框组件

uapopup调用非常简单,无需手动引入组件,通过easycom模式自动注册组件。
支持组件式+函数式调用弹框组件。

<ua-popup v-model="isVisibleConfirm" shadeClose="false" title="标题" xclose z-index="1001"
    content="<div style='color:#ff557f;padding:20px 40px;'>预测未来的最好办法是自己亲手创造未来!</div>"
    :btns="[
        {text: '取消', click: handleCancel},
        {text: '确定', style: 'color:#00aa00;', click: handleOk},
    ]"
/>
<script>
export default {
    methods: {
        handleOk() {
            let $ua = this.$refs.uapopup
            $ua.open({
                content: '人生漫漫,且行且珍惜',
                customStyle: {'background-color': 'rgba(170, 0, 127, 0.6)', 'color': '#fff'},
                time: 3,
                onClose() {
                    $ua.open({
                        type: 'android',
                        content: '<div style="color:#aa007f">不要等待机会,而要创造机会</div>',
                        customStyle: {'width': '210px'},
                        btns: [
                            {
                                text: '关闭',
                                click() {
                                    $ua.close()
                                }
                            },
                            {
                                text: '确定',
                                style: 'color:#00aa00;',
                                click() {
                                    // ...
                                }
                            }
                        ]
                    })
                }
            })
        }
    }
}
</script>

uniapp聊天模块

项目中聊天模块支持发送图文混排消息、图片/视频预览、位置定位及红包等功能。


uniapp短视频/直播模块

项目中的小视频及直播页面,整体分为顶部导航区、小视频区、底部tabbar菜单区三个模块。

小视频支持上下滑动切换,底部还有一条播放进度条刻度线。

<view v-if="currentTab == 2" class="ua__tabcnt-recommend">
    <swiper class="ua__vdplayer-swiper flex1" :current="currentVideo" vertical @change="handleSwipeVertical">
        <swiper-item v-for="(item, index) in videoList" :key="index">
            <!-- 视频模块 -->
            <view class="ua__vdplayer-video flex1">
                <video class="vdplayer" :id="'vdplayer' + index" :ref="'vdplayer' + index" 
                    :src="item.src"
                    :controls="false" :loop="true" :show-center-play-btn="false" object-fit="fill"
                    :autoplay="index == currentVideo"
                    @play="isPlaying=true" @timeupdate="handleTimeUpdate"
                    :style="{'width': winWidth, 'height': winHeight}"
                >
                </video>
                <view class="ua__vdplayer-playwrap" @click="handleVideoClicked"><view v-if="!isPlaying" class="ua__vdplayer-playbtn"><text class="iconfont">{{`\ue607`}}</text></view></view>
            </view>
            <!-- 信息模块 -->
            <view class="ua__vdplayer-info flexbox flex-col">
                <view class="flexbox flex-row flex-alignb">
                    <!-- //左侧信息 -->
                    <view class="vdinfo__left flex1">
                        <view class="ltitem uavatar flexbox flex-row">
                            <navigator url="#" class="flexbox flex-alignc flex-row"><image class="uimg" :src="item.avatar" /><text class="uname">{{item.author}}</text></navigator>
                            <view class="flexbox btn" :class="{'actived': item.isFollow}" @click="handleFollow(index)"><text class="btn-text">{{item.isFollow ? '已关注' : '关注'}}</text></view>
                        </view>
                        <view v-if="item.topic" class="ltitem flexbox flex-row">
                            <view class="kw" v-for="(kw, index2) in item.topic" :key="index2"><text class="lbl">#{{kw}}</text></view>
                        </view>
                        <view class="ltitem"><text class="desc">{{item.desc}}</text></view>
                    </view>
                    <!-- //右侧按钮 -->
                    <view class="vdinfo__right flexbox flex-col">
                        <view class="rtitem ball" v-if="item.goods&&item.goods.length > 0" @click="handleShowGoodsPopup(item.goods)"><text class="icon iconfont">{{`\ue734`}}</text></view>
                        <view class="rtitem" :class="{'isliked': item.isLike}" @click="handleLiked(index)"><text class="icon iconfont">{{`\ue635`}}</text><text class="num">{{item.likeNum+(item.isLike ? 1 : 0)}}</text></view>
                        <view class="rtitem" @click="showReplyPopup = true"><text class="icon iconfont">{{`\ue632`}}</text><text class="num">{{item.replyNum}}</text></view>
                        <view class="rtitem" @click="showSharePopup = true"><text class="icon iconfont">{{`\ue63b`}}</text><text class="num">{{item.shareNum}}</text></view>
                    </view>
                </view>
            </view>
        </swiper-item>
    </swiper>
    <!-- 底部播放进度条 -->
    <view class="ua__vdplayer-progress"><view class="bar" :style="{'width': progressBar+'px'}"></view></view>
</view>
/**
 * @Desc     uniapp短视频|直播
 * @Time     andy by 2021-09
 * @About    Q:282310962
 */
<script>
    const app = getApp()
    import videoJSON from '@/mock/videolist.js'

    export default {
        data() {
            return {
                // 导航栏高度
                customBarHeight: app.globalData.customBarH,
                navbarBgcolor: '#21252b',
                tabbarBgcolor: '#21252b',

                tabNavLs: [
                    {label: '附近动态', badge: 5, lists: []},
                    {label: '关注', lists: []},
                    {label: '推荐', dot: true, lists: []},
                ],
                // 当前选项卡
                currentTab: 0,

                // 当前视频索引
                currentVideo: 0,
                // 视频数据
                videoList: videoJSON,
                // 视频是否播放中
                isPlaying: false,
                // 点击次数
                clickNum: 0,
                // 视频播放进度条
                progressBar: 0,
                clickTimer: null,

                // 屏幕宽高
                winWidth: '',
                winHeight: '',

                popupGoodsList: [],
                showGoodsPopup: false,
                showReplyPopup: false,
                showSharePopup: false,
            }
        },
        watch: {
            currentTab(val) {
                this.changeTabPanel(val)
            }
        },
        computed:{
            customBarMargin() {
                return `margin-top: ${this.customBarHeight}px`
            }
        },
        created() {
            // 引入iconfont字体
            // #ifdef APP-NVUE
            const domModule = weex.requireModule('dom')
            domModule.addRule('fontFace', {
                fontFamily: "nvueIcon",
                'src': "url('/static/fonts/iconfont.ttf')"
            });
            // #endif

            let wW = uni.getSystemInfoSync().windowWidth
            let wH = uni.getSystemInfoSync().windowHeight
            this.winWidth = `${wW}px`
            this.winHeight = `${wH}px`
        },
        methods: {

            // 长按动态
            handleDynamicMenu(e) {
                let points
                // #ifndef APP-NVUE
                points = [e.touches[0].clientX, e.touches[0].clientY]
                // #endif
                // #ifdef APP-NVUE
                points = [e.touches[0].screenX, e.touches[0].screenY]
                // #endif

                this.$refs.uapopup.open({
                    type: 'contextmenu',
                    follow: points,
                    btns: [
                        {text: '不感兴趣'},
                        {text: '复制'},
                        {
                            text: '举报',
                            style: 'color:#f00;',
                            click: () => {
                                this.$refs.uapopup.close()
                            }
                        },
                    ],
                })
            },

            /* ++++++++++ { 视频播放模块 } ++++++++++ */
            getVideoCtx() {
                // return this.$refs['vdplayer' + this.currentVideo][0]
                return uni.createVideoContext('vdplayer'+ this.currentVideo, this)
            },

            // 垂直滑动视频
            handleSwipeVertical(e) {
                let index = e.detail.current
                this.progressBar = 0
                this.isPlaying = false
                let video = this.getVideoCtx()
                if(!video) return
                video.pause()
                // 重新开始
                video.seek(0)

                this.currentVideo = index

                // 自动播放
                this.handlePlay()
            },

            handlePlay() {
                let video = this.getVideoCtx()
                if(!video) return
                video.play()
                this.isPlaying = true
            },

            handlePause() {
                let video = this.getVideoCtx()
                if(!video) return
                video.pause()
                this.isPlaying = false
            },

            // 点击视频(单击/双击)
            handleVideoClicked() {
                this.clickTimer && clearTimeout(this.clickTimer)
                this.clickNum++
                this.clickTimer = setTimeout(() => {
                    if(this.clickNum >= 2) {
                        console.log('你双击了')
                    }else {
                        console.log('你单击了')
                        if(this.isPlaying) {
                            this.handlePause()
                        }else {
                            this.handlePlay()
                        }
                    }
                    this.clickNum = 0
                }, 250)
            },

            ...
        }
    }
</script>

直播页面逻辑处理和这个差不多,不过多了送礼物、滚动消息等功能。
好了,以上就是基于uniapp开发短视频的一些分享,希望对大家有些帮助。
electron11+vue3仿制QQ聊天|electron仿微信/qq

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
讨论数量: 2

做uni-app开发,可以自己搭建,也可以试试第三方的websocket框架。我近期在使用的GoEasy这个框架,在应对我们项目这种突发性的高并发需求上,表现不错。有websocket使用需求的也可以去看看,地址:www.goeasy.io/

2周前 评论
codemonkey

开源了吗?工程文件能否学习一下

2周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
29
粉丝
33
喜欢
89
收藏
54
排名:230
访问:2.0 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
1
vue聊天室
2
vue仿微信
1
vue即时通讯
1
vue聊天IM
1
vue网页版
1
vue仿微信网页端
1
vue聊天pc端
1
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