视频播放小程序

1.界面

在这里插入图片描述
点击下方视频栏进行视频播放

在这里插入图片描述
点击发送弹幕按钮

在这里插入图片描述

2.相关知识点

1.wx-for:

for循环数组讲解
回顾一下其他编程语言的数组语句,以C语言为例:
int a[3] = {2, 1, 8}; 假设当前项为a[1],则
a:数组名称
1: 当前项的下标变量名
a[1]:当前项的变量名

回到微信小程序,在组件上使用“wx:for”控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为“index”,数组当前项的变量名默认为“item”

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用“wx:for-index”可以指定数组当前下标的变量名,
使用“wx:for-item”可以指定数组当前元素的变量名;

在这里插入图片描述
在这里插入图片描述
wx:for可以进行嵌套

在这里插入图片描述
打印出来的乘法表效果如下

在这里插入图片描述
wx:key 官方解释:当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

翻译:在不使用 wx:key的情况下, 如果 array 内的数据发生改变,则会重新创建每个Item对象然后渲染列表(费时费力)

在使用 wx:key的情况下,如果array中的数据发生改变,只是将对应的对象重新排序。未发生变化的对象,不会重新创建(Very good)

使用情况:
1.第一种:wk:key=“字符串”,代表在for循环的array中的item的某个property,该property的值(不是property哦!)需要是列表中唯一的字符串或者数字

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
此时由于没有wx:key,调试器出现警告,提醒我们应该添加wx:key。由array数组可知此时id值为列表中唯一的数字,因此添加wx:key=“id”

在这里插入图片描述
在这里插入图片描述
此时调试器警告消失

2.第二种:wk:key="*this",代表在for循环中的item自身,这种表示需要item本身就是一个唯一的字符串或者数字。(不再演示)

2.video组件

video是视频组件,可用于播放本地或网络视频资源,其默认宽度为300rpx、高度为225rpx。

在这里插入图片描述
在这里插入图片描述
video组件具体相关内容见开发文档链接如下:
开发文档

3.代码实现

index.wxml

在这里插入图片描述

index.wxss

在这里插入图片描述
在这里插入图片描述
index.js

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.功能解析

首先在页面加载函数中调用wx.createContext函数,该函数需要提供参数,参数为video组件的id,并且调用该函数后会返回一个值VideoContext

在这里插入图片描述
在这里插入图片描述
此时我们将返回值赋给this.videoCtx,即可通过this.videoCtx操作对应的video组件
在这里插入图片描述
在视频列表点击对应视频时会调用playVideo函数,在该函数中定义了微信自带的停止视频和播放视频函数,并且该函数传入了事件对象e,以及事件参数data-url,通过传入的url可修改data中src地址,从而使video能够正常播放

在这里插入图片描述
首先在video组件中设置允许弹幕发送

在这里插入图片描述
在input组件中绑定得到弹幕函数,在button组件中绑定发送弹幕函数
在这里插入图片描述
在getDanmu函数中将得到的弹幕赋值给data中的danmuTxt变量
在这里插入图片描述
在sendDanmu函数中先将data中的变量danmuTxt赋值给变量text,原因是this不可以直接在wxAPI函数内部使用,然后调用微信自带的发送弹幕函数将弹幕值赋值给text,颜色值则是调用了提前准备好的得到随机颜色函数
在这里插入图片描述
在这里插入图片描述
此时发送弹幕功能则能在video组件里面使用了,并且在发送多条弹幕时能在屏幕上面看见各种不同的颜色

猜你喜欢

转载自blog.csdn.net/weixin_48683410/article/details/107688713
今日推荐