uni-app开发一个小视频应用(一)

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,是一种终极的跨平台解决方案,这里的平台,主要指的是App平台(android、ios)、小程序平台、H5平台。开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

01

开发一个小视频应用

初始化项目

打开HBuilderX IDE,新建一个名称为mini-video的初始化uni-app项目,这里勾选uni-app即可创建,项目创建完成后,打开pages/index/index.vue,将<template>中的模板内容content部分清空,将uni-app初始项目中与应用无关的东西进行清空、修改即可。

创建底部导航栏组件

首先要弄清楚我们的uni-app已经提供了tabBar的配置,即提供了底部导航栏的,那为什么还需要自定义底部导航栏呢 ?因为uni-app提供的默认底部导航栏tabBar的背景颜色只支持十六进制,所以无法设置为透明。同时我们又需要将底部导航栏中的页面设置为tabBar页面,所以我们还是要进行tarBar的配置,而一配置tabBar,那么就会自动出现uni-app提供的默认导航栏,所以我们必须在应用启动onLaunch的时候将默认tabBar进行隐藏。

那么没有了默认导航栏,我们怎么进行tabBar页面的切换呢?我们可以通过<navigator>组件设置不同的跳转方式,实现应用内各种页面之间的跳转。记住APP和微信小程序是不支持<a>标签跳转的。

底部导航栏有五个页面: 首页(index.vue)、关注(follow.vue)、加号(添加好友friend.vue)、消息(news.vue)、我(personal.vue)。所以需要在pages中模仿index新建出剩余的四个页面,页面新建完成后,需要配置到pages.json中的tarBar中,只需要配置list即可,如:

{    "tabBar": { // 在pages.json中添加上tabBar配置,如下        "list": [            {"pagePath":"pages/index/index"},            {"pagePath":"pages/follow/follow"},            {"pagePath":"pages/friend/friend"},            {"pagePath":"pages/news/news"},            {"pagePath":"pages/personal/personal"}        ]    }}// App.vue中onLaunch的时候隐藏掉uni-app自带的tabBar
<script>    export default {        setTimeout(() => {            uni.hideTabBar(); // 隐藏tabBar        }, 1000);    }</script>

在ios和安卓App平台上运行时,会出现tabBar隐藏失败的情况,解决办法就是隐藏的时候需要添加一个1000ms左右的延迟

// 项目根目录下新建一个components目录,并在其中新建一个tab-bar.vue即自定义底部导航栏组件<template>    <view class="tab">        <navigator open-type="switchTab" url="/pages/index/index" class="tab-box">            首页        </navigator>        <navigator open-type="switchTab" url="/pages/follow/follow" class="tab-box">            关注        </navigator>        <view class="tab-box">            + <!--暂时用加号代替,后面会替换成字体图标-->        </view>        <navigator open-type="switchTab" url="/pages/news/news" class="tab-box">            消息        </navigator>        <navigator open-type="switchTab" url="/pages/personal/personal" class="tab-box">            我        </navigator>    </view></template>
<style>.tab{    height:50px;    width:100%;    position:fixed;    bottom: 0;    left: 0;    z-index: 20;}.tab-box{    float: left;    width: 20%;    color: #FFFFFF;    text-align: center;    height: 50px;    line-height: 50px;    font-size:20px}.icon-box{    width: 60%;    height: 30px;    background: #FFFFFF;    color: #000000;    margin: 10px 20%;    line-height:30px;    border-radius: 5px;    font-size: 15px;}</style>

添加图标字体

添加图标字体非常简单,就是登录iconfont网站,然后创建一个图标项目,然后搜索自己需要的图标,比如加号、搜索、返回,将它们加入到项目中,然后点击下载即可,下载完成后解压,找到iconfont.css这个文件,这个就是我们要用到的图标字体的css样式,直接引入到项目中即可,为了方便使用,我们将图标字体css文件作为一个全局样式引入到App.vue组件中。使用的时候,我们只需要在需要添加图标字体的标签上,添加上"iconfont 具体的图标样式名"即可,如:

// App.vue
<style>    /*每个页面公共css */    @import url("./static/iconfont.css");</style>// components/tab-bar.vue
<view class="tab-box">    <view class="iconfont icon-jiahao icon-box" ><!--添加一个加号图标字体样式,注意是两个样式名哦-->    </view></view>

创建首页头部导航栏

首页头部导航栏,最左侧是一个搜索图标,中间是推荐和同城,右侧无内容。同样,我们的uni-app是有一个默认头部导航栏的,所以我们首先要隐藏掉默认的头部导航栏,要隐藏默认头部导航栏,我们需要在pages.json文件中设置其navigationStyle属性值为custom即自定义,如:

{    "globalStyle": {        "navigationStyle":"custom" // 设置头部导航栏为自定义模式,头部导航栏会自动消失    }}// /components/index-header.vue
<template>    <view class="index-header"><!--固定定位到首页顶部-->        <view class="iconfont icon-icon-- icon"></view> <!--绝对定位到左侧-->        <view class="middle"> <!--搜索图标绝对定位后,middle将会上移动到顶部,在搜索图标下面,里面内容居中显示即可-->            <view class="text">推荐</view>|            <view class="text">同城</view><!--变成行内元素-->        </view>    </view></template>
<style scoped>.index-header {    height: 35px;    line-height: 35px;    width: 100%;    position: fixed;    top: 25px;    left: 0;    margin: 0 auto;    background: #000000;    z-index: 20;}.icon {    position: absolute;    left: 0;    top: 0;    color: white;    width: 20%;    text-align: center;}.middle {    text-align: center;    color: white;}.text {    display: inline;    margin: 0 10px;}</style>

创建视频播放组件

视频播放组件即一个全屏的页面,然后里面嵌入一个<video>组件即可实现。这里需要特别说一下如何让页面全屏显示,我们设置页面全屏通常会让需要全屏的元素设置上width: 100%; height: 100%;可是当我们给视频播放组件根元素标签设置上width为100%,height为100%后,它并没有全屏显示,因为当样式属性值为百分数的时候,其是相对于父元素的,即是父元素宽高的100%,而此时视频播放组件的父元素是html、body,它们并没有设置宽高,所以我们需要在App.vue中设置一下全局样式,将html和body的宽高设置为100%,此后其中的子元素设置百分数的时候才会其作用。

// App.vue
html,body {    width: 100%;    height: 100%;    margin: 0;    padding: 0;}// /components/video-player.vue
<template>    <view class="video-player">        <video class="video"                :src= "video.src"                :controls="false"               :loop="true">        </video>    </view></template><script>    export default {        props: ["video"]    }</script><style>    .video-player {        width: 100%;        height: 100%;    }    .video {        width: 100%;        height: 100%;        z-index: 19;    }</style>

创建视频列表组件

视频列表组件,我们使用的是<swiper>组件,里面<swiper-item>部分则为上面的视频播放组件。

// /components/video-list.vue
<template>    <view class="video-list">        <view class="swiper-box">            <swiper class="swiper" :vertical="true">                <swiper-item v-for="(item,index) in videos" :key="index">                    <view class="swiper-item">                        <video-player                                                      :video="item"                                                    :index="index">                        </video-player>                    </view>                </swiper-item>            </swiper>        </view>    </view></template>
<script>    import VideoPlayer from "./video-player.vue";    export default {        components: {            "video-player": VideoPlayer        },        props:['list'],        data() {            return {                videos:[],            }        },        watch:{                        list(){                                this.videos=this.list;                        }                }    }</script>
<style scoped>    .video-list {        width: 100%;        height: 100%;    }    .swiper-box{            height:100%;            width: 100%;    }    .swiper{            height:100%;            width: 100%;    }    .swiper-item {        width: 100%;        height: 100%;        background: red;    }</style>

向视频列表组件传入列表数据

视频列表组件和视频播放组件都已经完成后,就可以在首页onLoad的时候获取视频数据,然后传递给视频列表组件,视频列表组件在遍历传递过来的视频列表将视频地址传入对应的视频播放组件中即可,这里采用mock数据的方式提供视频列表。

// pages/index/index.vue
<template>    <view class="content">        <index-header></index-header> <!--首页头部导航栏组件-->        <video-list :list="list"></video-list> <!--视频列表组件-->        <tab-bar></tab-bar> <!--首页底部导航栏组件-->    </view></template><script>    import TabBar from "../../components/tab-bar.vue";    import IndexHeader from "../../components/index-header.vue";    import VideoList from "../../components/video-list.vue";    export default {        components: {            "tab-bar": TabBar,            "index-header": IndexHeader,            "video-list": VideoList        },        data() {            return {                list: []            }        },        onLoad() {            this.getVideos();        },        methods: {            getVideos() {                const res = [                    {                        id: 0,                        src: "http://alimov2.a.yximgs.com/bs2/gdtPostRoll/postRoll-MTA3MDY0NDY3Mzk.mp4",                        autho: "张三",                        title: "仙娜美",                        loveNumber: 10000,                        commentNumber: 2000,                        shareNumber: 30000                    },                    {                        id: 1,                        src: "http://upmov.a.yximgs.com/upic/2019/02/13/22/BMjAxOTAyMTMyMjUxMTlfNDc4ODM2MzlfMTA3Mjc5ODU2MjhfMV8z_b_B1fbc185eaca8cc06efa2d4f713e13e8c.mp4",                        autho: "李四",                        title: "【搞笑】最强猜歌王",                        loveNumber: 40000,                        commentNumber: 5000,                        shareNumber: 60000                    },                    {                        id: 2,                        src: "http://bdmov.a.yximgs.com/bs2/gdtPostRoll/postRoll-MTA3MDk5Mjc5OTg.mp4",                        autho: "王五",                        title: "特制流泪芥末酱",                        loveNumber: 70000,                        commentNumber: 8000,                        shareNumber: 90000                    }                ];                this.list = res;            }        }    }</script>
<style>    .content {        width: 100%;        height: 100%;    }</style>

原文作者:Rolan

原文地址:http://www.wxapp-union.com/article-5582-1.html

  -福利驾到-  

拉上好友一起拼团

最高可优惠70元!!

本文分享自微信公众号 - 腾讯NEXT学院(Next_Academy)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云点播的视频上传和转码

腾讯云服务视频,腾讯云点播的视频上传和转码功能

有些用户烦恼腾讯云储存上传大文件的各种不方便,比如不能转码(要转码得先把mp4文件从云存储上下载下来,然后通过服务器执行ffmpeg操作,最后再把切割的ts文件...

26620
来自专栏前端技术开发

vue使用video.js解决m3u8视频播放格式

今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只...

22710
来自专栏视频咖

腾讯云获2019亚太内容分发大会两项大奖

? 9月24日,由亚太CDN产业联盟主办的2019亚太内容分发大会暨CDN峰会于上海如期举办,本次峰会围绕当下5G热点,聚集众多使用或提供CDN服务的企业,共...

7410
来自专栏web秀

uni-app: 引导页功能如何实现?

1、Uni-App 启动页和引导页介绍 2、Uni-App 简单引导页示例 3、Uni-App 视频引导页示例

1.7K20
来自专栏媒矿工厂

4K+UHD浸入式音频直播(2018FIFA世界杯)

原标题:4K UHD HDR AND IMMERSIVE AUDIO LIVE STREAMING 2018 FIFA WORLD CUP RUSSIA FOR...

10130
来自专栏云点播服务

云点播-腾讯云点播服务

腾讯云点播(Video on Demand,VOD)是集音视频上传、直播录制、媒体资源管理、自动化转码处理、视频 AI、分发加速、播放器 SDK 于一体的一站式...

80140
来自专栏视频加密

IPTV系统可以实现哪些功能?IPTV系统开发怎么做?

随着IPTV系统的不断普及,已经广泛应用于生活中的各个角落,不论是家庭客厅、还是医院、酒店,亦或是街头巷尾,这不仅是时代变迁的必然,无疑,视频直播点播业务也给我...

12720
来自专栏布谷科技

直播平台开发的功能机制以及直播系统开发的功能实现

直播系统需要经过采集、编码、推流、分配、拉流、解码、观看等过程,直播的实现与传统的视频直播过程平稳一致。因此,所使用的开发框架、开发语言、业务服务等方面与传统的...

17300
来自专栏音视频技术

实现视频和音频的零延迟是标准的零和博弈

我们对于为什么视频不能及时、以未压缩的质量交付做出了很多解释。其中许多解释都是合理的,这些问题主要集中在网络容量或间歇性、扩展低延迟解决方案的成本、甚至局限性的...

36130

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励