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组件里面使用了，并且在发送多条弹幕时能在屏幕上面看见各种不同的颜色