<tbody id="iajvf"></tbody>

    1. <em id="iajvf"><acronym id="iajvf"><menuitem id="iajvf"></menuitem></acronym></em>
        <li id="iajvf"><acronym id="iajvf"></acronym></li>

        [技術分享]基于 uniapp+vue 直播/聊天/小視頻

        xiaoyan2015發布于2 年前 ? 1235 次閱讀

        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

        大佬,帶帶我