uniapp仿抖音 - CSDN
精华内容
参与话题
  • 用到的工具 前端框架 API接口 后端IDEA 分层 数据库仅供大家参考学习 有疑问联系QQ:1984526233

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    用到的工具在这里插入图片描述
    前端框架在这里插入图片描述
    API接口在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    后端IDEA 分层在这里插入图片描述
    在这里插入图片描述
    数据库在这里插入图片描述

    展开全文
  • 仿抖音上下滑动播放视频(兼容安卓,ios,小程序,h5) 运行条件 HBuilder X 2.2.2 安装后,从插件市场导入,即可真机运行 vue 项目地址 github. uniapp插件市场. 说明 插件分别用swiper实现(多端兼容)和css3动画...

    仿抖音上下滑动播放视频(兼容安卓,ios,小程序,h5)

    运行条件

    HBuilder X 2.2.2
    安装后,从插件市场导入,即可真机运行
    vue

    项目地址

    github.
    uniapp插件市场.

    说明

    插件分别用swiper实现(多端兼容)和css3动画实现(暂时只支持app),可自行切换。

    插件在uni-app编译模式下编写(已切换)。

    默认为weex编译模式,在 manifest.json 的源码视图里配置是切换模式, manifest.json -> app-plus -> nvueCompiler 切换编译模式。

    swiper在非App端内嵌video性能比较差,不建议导入过多视频。

    项目效果

    h5在线地址.

    展开全文
  • uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播

    万次阅读 多人点赞 2019-11-11 17:02:46
    优直播uni-liveShow是基于vue+uni-app+vuex+nvue+swiper等技术开发仿制抖音|火山小视频/陌陌直播实战项目,支持编译到三端(H5、小程序、App端) 且兼容效果一致。 使用技术 编码器+技术:HBuilderX + vue/NVue/...

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

    使用技术

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

    ◆ uniapp透明导航栏

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

     /**
      * @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不能覆盖的问题,使用nvue页面就可以解决view覆盖在video之上,更多关于nvue页面开发,可以参看:uniapp开发nvue页面

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

    ◆ uniapp仿陌陌直播页面

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

    <template>
    	<div class="nlv__container">
    		<view class="nlv_main">
    			<swiper class="nlv-swiper" :indicator-dots="false" :vertical="false" :current="videoIndex" @change="handleSlider">
    				<swiper-item v-for="(item, index) in vlist" :key="index">
    					<!-- //直播区 -->
    					<view class="nlv-playerbox">
    						<video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src" :autoplay="index == videoIndex"
    						:controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill" :style="{height: winHeight, width: winWidth}">
    						</video>
    						
    						<!-- //顶部 -->
    						<view class="nlv_topbar" :style="{ height: headerBarH, 'padding-top': statusBarH }">
    							...
    						</view>
    						
    						<!-- //排名信息 -->
    						<view class="nlv-rankbox" :style="{top: headerBarH}">
    							<view class="nlv-rkls">
    								<text class="rkitem">总排名{{item.allRank}}</text>
    								<text v-if="item.hourRank" class="rkitem">小时榜第{{item.hourRank}}名</text>
    							</view>
    							<text class="nlv-uid">U直播:{{item.uid}}</text>
    						</view>
    						
    						<!-- 底部信息栏 -->
    						<view class="nlv-footToolbar">
    							<!-- 送礼物提示 -->
    							...
    							
    							<!-- 滚动msg信息 -->
    							<scroll-view class="nlv-rollMsgPanel" scroll-y show-scrollbar="false">
    								<block v-for="(msgitem, msgidx) in item.rollmsg" :key="msgidx">
    									<view class="nlv-msglist"><view class="msg_bg"><text class="msg_name">{{msgitem.uname}}</text> <text class="msg_text">{{msgitem.content}}</text></view></view>
    								</block>
    							</scroll-view>
    							
    							<view class="nlv-infobox">
    								<view class="nlv_reply" @tap="handleRollMsg(index)"><text class="nlv_reply_text">说点什么...</text></view>
    								<view class="nlv_btntool">
    									<view class="btn-toolitem"><text class="iconfont i-btntool">&#xe61f;</text></view>
    									<view v-if="item.cart" class="btn-toolitem" @tap="handleLiveCart(index)"><text class="iconfont i-btntool" style="color: #ff4e0e;font-size: 20px;">&#xe61e;</text></view>
    									<view class="btn-toolitem btn-toolitem-cart" @tap="handleLiveGift"><text class="iconfont i-btntool">&#xe600;</text></view>
    									<view class="btn-toolitem"><text class="iconfont i-btntool">&#xe682;</text></view>
    									<view class="btn-toolitem"><text class="iconfont i-btntool">&#xe656;</text></view>
    								</view>
    							</view>
    						</view>
    					</view>
    				</swiper-item>
    			</swiper>
    		</view>
    		
    		<!-- 商品广告、滚动消息、礼物 -->
    		...
    	</div>
    </template>
    
    <script>
    	// 引入视频数据
    	const liveJson = require('../mock-live.js')
    	
    	// 引入商品广告、滚动消息json、礼物
    	import liveCart from './cp-live/cart.vue'
    	import rollMsg from './cp-live/rollmsg'
    	import liveGift from './cp-live/gift'
    	
    	
    	let timer = null
    	export default {
    		data() {
    			return {
    				statusBarH: '',
    				headerBarH: '',
    				winHeight: '',
    				winWidth: '',
    				
    				videoIndex: 0,
    				vlist: liveJson,
    				
    				clickNum: 0,	//记录点击次数
    			}
    		},
    		components: {
    			liveCart, rollMsg, liveGift
    		},
    		beforeCreate() {
    			// 引入iconfont字体
    			// #ifdef APP-PLUS
    			const domModule = weex.requireModule('dom')
    			domModule.addRule('fontFace', {
    				fontFamily: "nvueIcon",
    				'src': "url('../../../static/fonts/iconfont.ttf')"
    			});
    			// #endif
    		},
    		created() {
    			// 获取设备宽、高、状态栏高度
    			let _sH = uni.getSystemInfoSync().statusBarHeight
    			let _hH = _sH + 50
    			let _wH = uni.getSystemInfoSync().windowHeight
    			let _wW = uni.getSystemInfoSync().windowWidth
    			this.statusBarH = `${_sH}px`
    			this.headerBarH = `${_hH}px`
    			this.winHeight = `${_wH}px`
    			this.winWidth = `${_wW}px`
    		},
    		onLoad(option) {
    			// 获取列表页索引
    			this.videoIndex = parseInt(option.index)
    		},
    		onReady() {
    			this.init()
    		},
    		methods: {
    			init() {
    				this.videoContextList = []
    				for(var i = 0; i < this.vlist.length; i++) {
    					// this.videoContextList.push(uni.createVideoContext('myVideo' + i, this))
    					// #ifdef APP-PLUS-NVUE
    					this.videoContextList.push(this.$refs['myVideo' + i][0])
    					// #endif
    					// #ifndef APP-PLUS
    					this.videoContextList.push(uni.createVideoContext('myVideo' + i, this))
    					// #endif
    				}
    			},
    			
    			
    			// >>> 【视频播放处理模块】-------------------------------------
    			// 滑动切换
    			handleSlider(e) {
    				let curIndex = e.detail.current
    				if(this.videoIndex >= 0){
    					this.videoContextList[this.videoIndex].pause()
    					this.videoContextList[this.videoIndex].seek(0)
    				}
    				if(curIndex === this.videoIndex + 1) {
    					console.log('向左滑动')
    					this.videoContextList[this.videoIndex + 1].play()
    				}else if(curIndex === this.videoIndex - 1) {
    					console.log('向右滑动')
    					this.videoContextList[this.videoIndex - 1].play()
    				}
    				this.videoIndex = curIndex
    			},
    			// 播放
    			play(index) {
    				this.videoContextList[index].play()
    			},
    			// 暂停
    			pause(index) {
    				this.videoContextList[index].pause()
    			},
    			
    			...
    		}
    	}
    </script>

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

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

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

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

     

    展开全文
  • 也是偶然机会,入手一个个仿抖音直播的app,还是原生的,后台是Php语言写的,用的还是Laravel框架,代码高深。 系统配置: 使用语言:PHP 数据库:mysql 使用框架:laravel 5.5 推荐服务器配置: 系统:linux系统 ...

    声明:本文章仅限于学习交流,一切商业行为与本人无关。
    我是一个本本分分的程序猿,每天都是996。苦的一逼。也是偶然机会,入手一个个仿抖音直播的app,还是原生的,后台是Php语言写的,用的还是Laravel框架,代码高深。

    1. 系统配置:

    使用语言:PHP
    数据库:mysql
    使用框架:laravel 5.5

    推荐服务器配置:
    系统:linux系统
    环境:nginx + php +mysql

    数据库要求:
    Mysql 5.5以上

    PHP要求:
    PHP >= 7.0.0
    PHP OpenSSL 扩展
    PHP PDO 扩展
    PHP Mbstring 扩展
    PHP Tokenizer 扩展
    PHP XML 扩展

    1. 功能如下:

    1.发布视频、文章、图片,可以评论分享点赞别人的发布,等级不同,可免费观看视频的次数不一样,发长视频的时间不一样,可以用砖石升级等级。
    2.会员可以打赏主播,送礼物,以砖石的形式买礼物送主播,关注主播,观看自己喜欢的分类,可以推广分佣。
    3.申请成为主播,后台审核认证,主播可以收礼物,以砖石的形式进入钱包,可以提现。可以收获粉丝,可以推广分佣。
    4.消息,官方通知和个人消息。
    5.我的收藏,我的动态,我的直播,我的访客,我的钱包,我的打赏等功能。
    6.视频流小视频,仿抖音小视频。
    等等,功能很齐全。

    1. 主要是我想分享的是这个搭建的过程:
      1:服务器购置,操作系统安装

    2:进入服务器,安装宝塔:
    安装教程可参考:https://www.bt.cn/download/linux.html
    3.会对接很多第三方,例如即时通讯,美颜,推拉流地址,连麦pk等等。
    还有很多技术性问题,有什么问题可以联系我,腾讯号:无酒散散二九一一三。
    祝大家能多多休息,愿技术长青。

    展开全文
  • 仿抖音微信小程序

    2020-01-21 16:08:41
    @TOC我 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 ...
  • 如果要是不想看这么代码的话,我整理了一下项目,下载到本地直接进行运行也可以; 代码下载地址 目录介绍 01.先来看一下需求 02.... 2.1 使用ViewPager 2.2 使用RecyclerView ... 03.... 3.4 修改...
  • 仿抖音上下滑动切换视频播放器配置滑动Activity 播放器配置 使用IjkVideoView 导入依赖 //导入IJKVideoView播放器 implementation 'com.dou361.ijkplayer:jjdxm-ijkplayer:1.0.5' 写布局文件 <?xml version="1.0...
  • 最近公司在做个短视频的项目,其中借鉴了很多抖音的设计,其中就有抖音的上下滑切换视频。 先说下思路,这里用重写了ViewPager的onInterceptTouchEvent和onTouchEvent方法,使其可以上下滑动切换视图。 代码如下 ...
  • 废话不多说直接附代码 wxml <!--index.wxml--> <view class="videoBox">...view class="video {{touch==true? 'transfrom' : '' }}" style="transform:translateY(-{{current*100}}%);...
  • uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。本文通过实例图文的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 先看代码,复制使用即可,这是纵向滑动屏幕导航栏跟随滑动的效果,是一个最基础的判断滚动距离和元素距离顶部高度的方式构成的,您将看到以下效果。 以下是代码 复制粘贴即可 , 这是一个非常基础的原理,我并未...
  • 抖音APP双击点赞效果实现

    千次阅读 2019-04-12 17:00:59
    相信大部分的同学都有刷抖音的经历吧,那么当你疯狂给小姐姐点赞的时候,有没有想过这个蹦出来的那些疯狂跳动的心心的是怎么实现的呢? = 。=,先看效果预览 分析: 效果特点: 1.双击屏幕任意位置,就生成一...
  • 仿爱奇艺视频播放类APP定制开发视频播放APP制作 视频类APP是基本上每个人下班之后常用的手机APP应用了。就连上班或者空闲之余也会拿起手机翻看翻看抖音,快手这样的短视频类的APP。而且相对于文字,图片。人们在...
  • uniapp实战印记菜谱小程序, 丰富的各种地方菜、小吃、饮品、美食菜谱大全 , 多端支持, 一套代码全网小程序, app, h5均可运行
  • 首先出效果图 在最前附上我的QQ: 2489757828 有问题的话可以找我一同探讨 我的github: 李大玄 我的私人博客: 李大玄 我的简书: 李大玄 我的CSDN: 李大玄 <login id="login" bind:onLoginSuccess="onLoginSuccess...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • 如何防抖动

    千次阅读 2019-01-02 09:34:09
    在开发中我们会接触到很多事件,有些事件会频繁的触发。如下: window 的 resize、scroll mousedown、mousemove keyup、keydown …… 以Vue为例,了解事件如何频繁的触发: &amp;amp;...am
  • 基于Taro+react+redux+RN+taroPop等技术开发的跨端聊天App实例,支持编译到多端H5+小...Taro三端统一聊天应用:taro-chatroom (仿微信界面聊天App) 技术栈: 编码/技术:Vscode / react+taro+react-redux+Reac...
  • 在消息tabBar上面添加小红点

    千次阅读 2016-06-28 17:39:59
    -(void)viewWillAppear:(BOOL)animated{  // 调用接口,在接口块中添加小红点  // 小红点  UIImageView *imageView = [[UIImageView alloc]init]; ...imageNamed:@"redPoint.png
1 2
收藏数 26
精华内容 10
热门标签
关键字:

uniapp仿抖音