移动软件开发之微信小程序demo03

做一个视频播放小程序

准备

需要一个播放的图片

图片下载地址为：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip

需要一些类似下图的jsos

链接就是视频播放的地址

 项目创建

和前两个项目创建一样 把该删的删除 然后自动补全一个项目

前端设计

视频播放器分三个区域

第一个是播放视频的区域

第二个是点击发送弹幕的区域

第三个是视频选择区

 

逻辑实现

首先设计点击选择区的视频 播放对应的视频

就是说每当我们点击下面的一个视频 就要替换video里视频链接 

这里使用了wx-for直接渲染 这样就不用写死 data里的链表有多少个 就会渲染出多少个

我们给每个item都绑定点击事件

让他一点击就把对应的list里的数据替换上去

这里还需要考虑带video组件 所以要先暂停之前播放的 在进行替换 在新开始播放

主要也是比较简单的部分完成了 

弹幕

首先这是一个生成随机颜色的选择器 直接ctrlc+v上去

然后我们需要为发送弹幕绑定一个点击事件

需要获取输入框内容并发送到视频上

（获取文本） 

 

 （发送弹幕）

最终结果

 

 

当然 我们可以做个小修改 点击完发送事件后 把输入框的文本设置成空 这样就变得符合逻辑