网站首页 > 技术文章 正文
最近在捣鼓uniapp小视频项目,结合之前开发的一些自定义插件,就开发了一个uniapp仿抖音短视频uni-ttLive项目。
uni-ttlive 一款基于uniapp+vue.js+uView+uaPopup等技术开发的仿抖音短视频+直播+聊天项目。
实现技术
- 使用技术:uniapp+vue.js
- 组件库:uni-ui、uView-ui
- 弹窗组件:ua-popup
- 自定义topbar+tabbar
项目包含短视频、直播及聊天三个大模块。
首页短视频可以流畅上下滑动切换,底部显示小视频播放mini进度条。其中小视频和直播页面采用了nvue组件写法。
main.js配置
/**
* 主入口配置
* @author YXY
*/
import Vue from 'vue'
import App from './App'
import uView from 'uview-ui'
Vue.use(uView)
import API from '@/common/request'
Vue.prototype.$api = API
// 引入状态管理
import Store from './store'
Vue.prototype.$store = Store
Vue.config.productionTip = false
App.mpType = 'app'
// #ifdef APP-PLUS
plus.navigator.closeSplashscreen()
// #endif
const app = new Vue({
...App
})
app.$mount()
为了兼容nvue页面,通过globalData来保存全局状态栏及导航栏高度。
<script>
export default {
globalData: {
// 全局设置状态栏和导航栏高度
statusBarH: 0,
customBarH: 0,
},
onLaunch: function() {
uni.getSystemInfo({
success: (e) => {
// 获取手机状态栏高度
let statusBar = e.statusBarHeight
let customBar
// #ifndef MP
customBar = statusBar + (e.platform == 'android' ? 50 : 45)
// #endif
// #ifdef MP-WEIXIN
// 获取胶囊按钮的布局位置信息
let menu = wx.getMenuButtonBoundingClientRect()
// 导航栏高度 = 胶囊下距离 + 胶囊上距离 - 状态栏高度
customBar = menu.bottom + menu.top - statusBar
// #endif
// #ifdef MP-ALIPAY
customBar = statusBar + e.titleBarHeight
// #endif
// 兼容nvue写法(H5/小程序/APP/APP-Nvue)
this.globalData.statusBarH = statusBar
this.globalData.customBarH = customBar
}
})
},
}
</script>
<style>
/*每个页面公共css */
/* #ifndef APP-NVUE */
@import './static/fonts/iconfont.css';
/* #endif */
</style>
<style lang="scss">
@import './style/reset.scss';
@import './style/layout.scss';
@import "uview-ui/index.scss";
</style>
hbuilderx2.5起,支持easycom自动导入组件模式。将自定义组件放在components目录下。
uaPopup一款基于uni-app自定义弹框组件(加强版)
emmm,暂时分享到这里。欢迎大家一起交流讨论哈!
最近有些小忙,可能不会过多的分享一些技术文章,敬请谅解。
猜你喜欢
- 2024-11-26 视频播放必备神器,解锁H5 Player的强大功能
- 2024-11-26 NAS下搭建具备web管理界面并自动上传视频的bilibili录播姬
- 2024-11-26 html5的面试中,大概率会问到的音频和视频的那些知识点
- 2024-11-26 老司机福利,迅雷X新版可以下载网页视频了
- 2024-11-26 随笔:前端音视频的那些名词
- 2024-11-26 基于flutter/dart仿抖音app实例
- 2024-11-26 今年找工作到底有多难,真的不好找工作吗 @抖音短视频
- 2024-11-26 基于flutter3.x跨端仿抖音app实战|flutter-douyin短视频直播
- 2024-11-26 Sketch 免费入门视频教程 - 设计/前端/产品都应该学的设计利器
- 2024-11-26 MiroTalk:基于 WebRTC 的免费 4K 实时视频会议框架
你 发表评论:
欢迎- 599℃几个Oracle空值处理函数 oracle处理null值的函数
- 591℃Oracle分析函数之Lag和Lead()使用
- 579℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 575℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 571℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 564℃【数据统计分析】详解Oracle分组函数之CUBE
- 550℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 545℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)