uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播

优直播uni-liveShow是基于vue+uni-app+vuex+nvue+swiper等技术开发仿制抖音|火山小视频/陌陌直播实战项目,支持编译到三端(H5、小程序、App端) 且兼容效果一致。

使用技术

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

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第1张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第2张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第3张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第4张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第5张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第6张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第7张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第8张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第9张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第10张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第11张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第12张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第13张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第14张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第15张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第16张图片

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第17张图片

◆ uniapp透明导航栏

顶部导航栏采用的是自定义模式,可设置透明背景(如:个人主页/朋友圈动态) 具体可参看这篇文章:uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第18张图片

 /**
  * @desc 	uni-app主入口页面
  * @about 	Q:282310962  wx:xy190310
  */

import Vue from 'vue'
import App from './App'

// ***引入css
import './static/fonts/iconfont.css'
import './assets/css/reset.css'
import './assets/css/layout.css'

// ***引入状态管理
import store from './store'
Vue.prototype.$store = store

// ***引入公共组件
import headerBar from './components/header/header.vue'
import tabBar from './components/tabbar/tabbar.vue'
import popupWindow from './components/popupWindow.vue'
Vue.component('header-bar', headerBar)
Vue.component('tab-bar', tabBar)
Vue.component('popup-window', popupWindow)

// ***引入自定义弹窗组件uniPop
import uniPop from './components/uniPop/uniPop.vue'
Vue.component('uni-pop', uniPop)

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

◆ uniapp实现抖音小视频界面

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

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第19张图片


    
        
            
                
                
                
                
                
                    
                        
                             {{kwItem}}
                        
                        {{item.subtitle}}
                        
                            {{item.author}} {{item.attention ? '已关注' : '关注'}}
                        
                         写评论...
                    
                    
                        
                        {{ item.likeNum+(item.islike ? 1: 0) }}
                        {{item.replyNum}}
                        {{item.shareNum}}
                    
                
            
        
    

视频video不能覆盖的问题,使用nvue页面就可以解决view覆盖在video之上,更多关于nvue页面开发,可以参看:uniapp开发nvue页面

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

◆ uniapp仿陌陌直播页面

解决video不能覆盖问题,直播页面采用的是nvue编写

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播_第20张图片



至此,基于uniapp+vue直播项目就介绍这么多了,希望能够喜欢!!

◆ 最后附上react、RN项目实战案例

RN仿微信聊天室:https://blog.csdn.net/yanxinyun1990/article/details/100573360

react+redux网页版聊天实例:https://blog.csdn.net/yanxinyun1990/article/details/94143575

 

你可能感兴趣的:(uni-app实例)