uniapp开发短视频(uniapp快速开发)

网站建设 46
本篇文章给大家谈谈uniapp开发短视频,以及uniapp快速开发对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、uniapp扒下来的页面不能用

本篇文章给大家谈谈uniapp开发短视频,以及uniapp快速开发对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

uniapp扒下来的页面不能用

有可能是本身代码写的有问题导致的。

首页A跳转到新增页面B,在B页面点击保存后,再跳到首页A。此时在首页A,这时候无论点击跳转哪个页面,跳转成功后不能用,导致仍和页面的跳转都会循环在跳转回首页bug。代码本身有问题。

做短视频小程序项目时,出现开发者工具播放正常,一些视频在手机预览或真机测试黑屏,url链接正常拿出来也能正常播放,并没有报错,排查很久不知道原因,直到看见一篇问答才知道。但是因为赶进度,短视频只是项目中一个很小的模块,就没打算重构代码,好的思路是全局都只控制一个video显示播放,而不是像我代码中用v-if生成,判断swiper滑动时,当前显示的item,隐藏图片,生成video。重点:当我们暂停图片时,video标签就会移除,图片会显示,所以需要再判断一下当前item,下标是否变化。

微信小程序(或uniapp)引入腾讯视频插件播放视频

注意:个人开发者无法使用

登录微信公众平台,在你的小程序后台的设置-第三方服务—插件管理,搜索插件并点击添加。

微信小程序:

小程序的app.json里声明使用插件

在使用插件的页面的js文件里

使用插件的自定义组件,在json中定义需要引入的自定义组件。使用plugin://协议

页面中使用

暂停方法:

uniapp:

manifest.json添加:

在page.json中的对应页面的 style中添加

页面实现:

n0041aa087e即为vid。

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

前情回顾uni-app开发一个小视频应用(一)上篇文章,我们已经实现了首页的头部导航栏组件、底部的tabBar导航栏组件、中间的视频列表组件以及视频列表组件中的视频播放组件,传入视频列表渲染后已经可以上下滑动进行视频切换和播放,接下来我们将完成首页的剩余部分,左侧信息栏组件、右侧图标栏组件,以及完善视频切换动画、播放控制等功能。

左侧的信息栏组件,主要分三块: 作者名、视频标题名、音乐名。这个左侧信息栏信息是和当前播放视频相关联的,所以应该在循环视频列表的时候,将左侧信息栏组件一起渲染出来,所以左侧信息栏组件应该加到swiper-item中。

// components/list-left.vue

// components/video-list.vue

右侧图标栏组件,主要分为: 头像图标(头像设置border-radius)、收藏图标(iconfont图标)、评论图标(iconfont图标)、分享图标(iconfont图标)、音乐图标(图片设置border-radius),右侧图标栏组件设置一个固定宽度,然后让各种图标依次排列即可,如:

// components/list-right.vue

当点击头像下部的加号图标,可以对该用户进行关注,即隐藏加号图标,还有就是收藏爱心图标颜色切换,当点击收藏爱心图标,爱心图标变成红色,再次点击收藏爱心图标,爱心图标变回白色,这里先只处理颜色的变化,具体后台交互暂不处理。

// 在头像图标下方通过绝对定位添加一个加号图标,并定位到头像底部

所谓滑动播放,即向上滑动的时候,暂停当前播放视频并且播放下一个视频,向下滑动的时候,暂停当前播放视频,播放上一个视频,而这最关键的就是如何判断是向上滑动还是向下滑动。swiper组件给我们提供了一个change事件,我们可以监听这个change事件,拿到滑动完成后滑动到了第几页,即swiper-item的序号(从0开始),然后与滑动前的当前page相比较,就可以知道是向上滑还是向下滑了。

判断好了是上滑还是下滑后,我们还需要对上滑和下滑作出正确的处理,我们需要能够拿到每个视频播放组件,然后调用视频播放组件上的相关方法对播放进行控制,这就是涉及到了父组件如何调用子组件上方法,父组件要想调用子组件上的方法,关键是父组件要能够拿到子组件对象,我们可以通过ref实现,因为每一个视频播放组件是video-list视频列表组件的一个子组件,所以我们可以在video-list视频列表组件中给每一个video-player视频播放组件添加上一个ref="player",即可拿到对应的视频播放组件了。

// components/video-list.vue

要想实现单击视频播放组件,视频可以进行播放和暂停切换,那么我们需要给视频播放组件添加一个isPlay属性表示视频是否处于播放中,如果是播放中,那么点击就暂停,如果不是播放中,那么点击就播放,同时,由于uni-app不支持vue的dblclick事件的,所以我们还需要对单击和双击操作进行判断,我们需要定义一个变量用于记录用户点击次数,如果300ms内用户点击次数大于等于2,那么就是双击,否则就是单击,如:

双击的时候会向video-list父组件(视频列表组件)发送一个follow事件,video-list组件监听到follow事件后再通知list-right组件调用其方法让其爱心图标变红即可,如:

之前我们的视频播放组件接收了一个index属性,即当前视频对应的索引号,我们可以通过这个索引号判断当前视频是否是第一个,然后将其video组件的autoPlay设置为true即可自动播放。

至此,首页已经完成,效果图如下:

原文地址:

关于uni-app的使用感触

最近用uni-app开发了一个项目,下面说一下使用的具体感触吧。

先介绍一下项目大概的情况,,需要开发出ios和android两个客户端,功能不算太多,也不算少,大概30多个页面的样子。后台接口和设计图都已经确认好。客户端开发的话只有我一个,于是大胆的尝试了一下。

开发速度上来说的话,比原生开发确实周期要短很多,而且相对来说方便很多。

文档算是比较齐全,而且碰到任何问题都可以在社区上去搜索答案,还可以加入他们的QQ群进行咨询,所以综合来看到的话其实支持还是够的。在开发过程中碰到问题确实也通过这些渠道迎刃而解。

如果对Vue比较熟悉的话,上手还是比较快的,很方便前端人员进行开发。其实和平时使用vue差不多,只有一些小小的差异。开发的时候注意一下就行。

uni-app可以打包android,ios,微信小程序,h5等运行。兼容性这块的话,大部分都算比较好,在不同端没有不同表现,地图的操作上稍微会有一些不同。

App Store上架的话根据官方的文档其实是没有任何问题的,昨天我们的已经通过审核,微信小程序的审核也没有出现问题。

在特定的场景,uni-app还是值得考虑是否用来作为技术选型的,初次体验的感觉来看还是没有发现任何问题的。

uniapp视频广告收益怎么样

收益很低。

uniapp视频广告属于小型广告联盟,收益偏低,比如APP广告,点击一个才1毛多,百度h5广告联盟有0.5毛,所以uniapp视频广告收益很低。

uni-app广告分类两大类:基础广告和增强广告。

uniapp开发短视频的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于uniapp快速开发、uniapp开发短视频的信息别忘了在本站进行查找喔。

扫码二维码