移动软件开发（3）

一、实验目标

1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。

二、实验步骤

1.项目创建（详见实验1）

2.页面配置

2.1 创建页面文件

2.2 删除和修改文件

2.3 创建其他文件

创建一个images文件用来储存需要使用到的图片‘play.png’

3.视图设计

3.1 导航栏设计

小程序默认导航栏是黑底白字的效果，因此需要在app.json中自定义导航栏标题和背景颜色。app.json代码如下：

3.2 页面设计

页面上主要包括3个区域：视频播放器、弹幕发送区域、视频列表

区域1的index.wxml：

对应的index.wxss:

区域2的index.wxsl:

对应的wxss:

效果如下：

区域3的index.wxml:

对应的wxss：

效果如下：

4.逻辑实现

4.1 更新播放列表

对区域3进行修改：

在js文件的data中追加list数组，用于存放视频信息:

效果如下：

4.2 点击播放视频

在区域3=追加data-url属性和bindtap属性。其中data-url用于计入每行视频对应的播放地址，bindtap用于触发点击事件：

js更改如下：

运行效果：

4.3 发送弹幕

在区域1进行修改：

在区域2追加bindinput属性，用于获取弹幕文本内容；为按钮追加bindtao属性，用于触发点击事件:

js:

随机颜色弹幕：

最后运行结果如下：

三、程序运行结果

四、问题总结与体会

随机颜色函数RandomColor 使用时会出现无法返回数值的错误，之后将function中的功能转移至发送弹幕函数中才解决问题。

总结和体会：

这次实验是对于视频播放的使用，让我清晰的了解到了视频播放是如何实现以及背后需要用的条件等等，加深了我的知识。