基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

2023-08-09 13:09:05 67

一、项目简介

uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。界面仿制抖音|火山小视频/陌陌直播，支持编译到多端(H5、小程序、App端)且兼容效果一致。

二、效果预览

在H5、小程序、App端测试效果如下：(后续大图均为APP端)

三、使用技术

编码器+技术：HBuilderX+vue/NVue/uniapp/vuex
iconfont图标：阿里字体图标库
自定义导航栏+底部Tabbar
弹窗组件：uniPop（uni-app封装自定义弹出窗）
测试环境：H5端+小程序+App端

◆uniapp计算设备顶部状态栏高度

/**
*@descuniapp主页面App.vue
*@aboutQ：282310962wx：xy190310
*/

◆项目中顶部透明导航栏设置

顶部导航栏采用的是自定义模式，可设置透明背景(如：个人主页/朋友圈动态)具体可参看这篇文章：https://www.nhooo.com/article/174034.htm

◆uniapp仿抖音小视频效果

项目中小视频界面功能效果类似抖音/火山小视频，使用swiper组件实现上下滑动切换视频播放。













＃{{kwItem}}

{{item.subtitle}}

{{item.author}}{{item.attention?'已关注':'关注'}}

写评论...



{{item.likeNum+(item.islike?1:0)}}
{{item.replyNum}}
{{item.shareNum}}

视频滑动切换播放、暂停及单击/双击判断，商品及评论展示

在项目开发过程中，遇到了视频video层级高不能覆盖的问题，使用nvue页面就可以解决view覆盖在video之上。.nvue(nativevue的缩写)

更多关于nvue页面开发，可以参看：uniapp开发nvue页面

◆uniapp聊天页面实现

项目中的聊天页面，功能效果这里就不详细介绍了，可参看这篇：uni-app聊天室|vue+uniapp仿微信聊天实例

◆直播页面live.nvue

为避免video不能覆盖问题，直播页面采用的是nvue编写，开发过程也遇到了一些坑，尤其是css，全部是flex布局，而且不能多级嵌套，有些css属性不支持。

另外引入阿里字体图标也需注意：通过weex方式引入

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

至于视频滑动切换和上面小视频操作差不多，就不贴码了。到这里，uni-liveShow项目基本介绍完了，希望对大家有些许帮助。

基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

热门推荐

随机推荐