uniapp开发视频社区（Uniapp开发视频聊天）

今天给各位分享uniapp开发视频社区的知识，其中也会对Uniapp开发视频聊天进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、uniapp聊天室是怎么实现的？
• 2、uniapp开发遇到的问题总结
• 3、uniapp的videoplayer模块冲突怎么解决
• 4、uni-app开发一个小视频应用(二)
• 5、微信小程序（或uniapp）引入腾讯视频插件播放视频

uniapp聊天室是怎么实现的？

可以直接用第三方开发的uniapp 原生插件，比如即构科技的ZegoExpressUniAppSDK߅是一个基于 ZegoExpressEngine 原生 Android / iOS SDK 的 uni-app Wrapper，提供视频直播以及实时音视频服务，仅需几行代码，30分钟左右即可轻松接入，为开发者节省了不少时间。

uniapp开发遇到的问题总结

解决方案：

定义一个布尔类型的变量放到页面上去，改变循环的数据的某个属性时，给该变量赋值成false，然后再设置成true

只能使用create生命周期去构造了，如果不能满足的话就另想其他办法了

使用 placeholder-class 属性设置一个类名，再用该类名写样式去覆盖掉原有的样式

使用js给img标签添加行内样式以达到目的

经过顽强的询问，搜索，才知道HBuilderX 2.9.0+ 相关更新：调整根字体大小为系统默认大小与微信小程序平台一致，调整后 rem 默认大小不再为 窗口宽度/20，改为了浏览器（webview）默认的字体大小，一般为 16px

这是社区给的解决方案： 更新 HBuilderX 2.9.0+ 后 rpx(upx)、rem 样式变形的处理办法

我做的项目主要是使用 rpx 的部分变形，使用的解决方案为 宽屏适配指南

在里面找到的解决方案如下：

在 pages.json 的 globeStyle 里配置 rpx 的如下参数

uniapp的videoplayer模块冲突怎么解决

更新或不勾选videoplayer。

插件与内置videoplayer组件冲突导致。videoplayer组件中的弹幕功能使用了第三方库danmaku-flame，从日志看应该是插件也用了此库，建议联系插件开发者确认是否可更新去掉包含此库，或者直接使用插件的视频播放模块，不勾选videoplayer。

uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web、以及各种小程序微信、支付宝、百度、头条、QQ、快手、钉钉、淘宝、快应用等多个平台。

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即可自动播放。

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

原文地址：

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

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

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

微信小程序：

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

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

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

页面中使用

暂停方法：

uniapp：

manifest.json添加：

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

页面实现：

n0041aa087e即为vid。

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