[技术分享]基于 uniapp+vue 直播/聊天/小视频

xiaoyan2015发布于1 年前 • 873 次阅读

Uni-liveShow直播室是一款基于vue+uni-app技术开发的集仿抖音小视频/陌陌直播/微信聊天功能为一体的项目,支持编译到H5、小程序、App端 https://www.cnblogs.com/xiaoyan2017/p/11835641.html

效果预览:

技术栈:

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

引入公共样式及组件

 /**
  * @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组件实现上下滑动切换视频,点击可播放、暂停,点赞、评论等功能。

<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>

由于原生video、map等组件层级较高,虽说提供了cover-view组件可以覆盖其上,但其不能嵌套子组件,且限制较大,故只能采用编写.nvue(native vue)页面了。 nvue页面编写和vue无太大差别,只是需要注意css编写方式

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

好了,今天关于uniapp开发直播聊天室项目介绍到此了,后续会继续为大家分享一些实战项目。希望大家能喜欢~~~

共收到 1 条回复
l201906

大佬,带带我