xiaoyan2015 发表于 2019-11-15 10:16:56

uni-app直播|仿抖音/陌陌|uniapp直播室


项目介绍:
UniLiveShow是基于Nvue+vue+uniapp+swiper技术实现的高仿抖音短视频/陌陌直播界面的项目,效果类似抖音上下滑动切换视频播放,还有点赞、评论、商品广告等功能,支持编译到H5、小程序、App端,且兼容性一致。

预览效果:


技术框架:

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












自定义导航栏模式:获取状态栏高度
<script>
    import Vue from 'vue'
    export default {
      onLaunch: function() {
            // console.log('App Launch')
            uni.getSystemInfo({
                success:function(e){
                  Vue.prototype.statusBar = e.statusBarHeight
                  // #ifndef MP
                  if(e.platform == 'android') {
                        Vue.prototype.customBar = e.statusBarHeight + 50
                  }else {
                        Vue.prototype.customBar = e.statusBarHeight + 45
                  }
                  // #endif
                  
                  // #ifdef MP-WEIXIN
                  let custom = wx.getMenuButtonBoundingClientRect()
                  Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
                  // #endif
                  
                  // #ifdef MP-ALIPAY
                  Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
                  // #endif
                }
            })
      },
    }
</script>引入公共组件及样式库
import Vue from 'vue'
import App from './App'

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)

// 自定义弹窗组件
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()项目中聊天模块可参考:uni-app聊天室App|vue+uniapp仿微信聊天界面实例

uni-app+nvue技术实现仿抖音界面滑动效果,且有点赞、评论及商品等功能,可以单击、双击判断。
<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>
/**
* @desc 小视频JSON数据
*/

module.exports = [
    {
      id: 1,
      avator: '/static/uimg/u__chat_img1.jpg',
      poster: '/static/placeholder/video-img4.jpg',
      src: '/static/placeholder/video.mp4',
      author: '猪猪佩奇',
      subtitle: '稻城亚丁-人间绝美景色',
      keyword: ['美好回忆', '旅游圣地'],
      playNum: 3172,
      likeNum: 2518,
      replyNum: 292,
      shareNum: 107,
      islike: false,
      attention: false,
      cart: [
            {
                name: '同款冬枣',
                image: '/static/placeholder/cart-img1.jpg',
                price: 9.90
            },
            {
                name: '10斤装爆甜冰糖心红富士',
                image: '/static/placeholder/cart-img2.jpg',
                price: 9.90
            },
            {
                name: '红心猕猴桃 单果40-70克',
                image: '/static/placeholder/cart-img3.jpg',
                price: 10.0
            }
      ]
    },
    {
      id: 2,
      avator: '/static/uimg/u__chat_img12.jpg',
      poster: '/static/placeholder/video-img0.jpg',
      src: 'https://txmov2.a.yximgs.com/bs2/newWatermark/MTg3NDYzOTY3MjM_zh_3.mp4',
      author: 'Alisa',
      subtitle: '不要在乎别人的流言蜚语',
      keyword: ['经典老歌'],
      playNum: 9432,
      likeNum: 5627,
      replyNum: 1285,
      shareNum: 638,
      islike: true,
      attention: true,
      cart: ''
    },
    {
      id: 3,
      avator: '/static/uimg/u__chat_img5.jpg',
      poster: '/static/placeholder/video-img2.jpg',
      src: 'https://txmov2.a.yximgs.com/bs2/newWatermark/MTY3NTU3MzYzMTQ_zh_4.mp4',
      author: '往后余生都是你',
      subtitle: '能不能给我一首歌的时间,让你拾起从前的快乐',
      keyword: '',
      playNum: 7268,
      likeNum: 3438,
      replyNum: 1105,
      shareNum: 327,
      islike: false,
      attention: false,
      cart: [
            {
                name: 'YCID施蒂蓝玫瑰凝养柔滑唇膏',
                image: 'https://cbu01.alicdn.com/img/ibank/2019/218/182/12384281812_1493014487.jpg',
                price: 7.70
            },
            {
                name: '玛可安迪新款抖音网红推荐口红',
                image: 'https://cbu01.alicdn.com/img/ibank/2019/285/249/10457942582_1068990292.jpg',
                price: 19.9
            },
      ]
    },
   
    ...
]开发遇到了视频video层级过高不能被其他组件覆盖,起初使用cover-view,可是不能内嵌标签,甚是麻烦,于是使用nvue页面就可以解决view覆盖在video之上。.nvue (native vue的缩写)
另外在nvue页面中使用iconfont图标库需注意引入方式
beforeCreate() {
    // 引入iconfont字体
    // #ifdef APP-PLUS
    const domModule = weex.requireModule('dom')
    domModule.addRule('fontFace', {
      fontFamily: "nvueIcon",
      'src': "url('../../../static/fonts/iconfont.ttf')"
    });
    // #endif
},

uni-app开发直播聊天项目介绍到这里,后续继续为大家分享实战项目,希望能有一些许帮助!!

祈祷真情 发表于 2019-12-4 09:35:33

厉害了老哥
页: [1]
查看完整版本: uni-app直播|仿抖音/陌陌|uniapp直播室