2022夏中国海洋大学《移动软件开发》实验三

2022年夏季《移动软件开发》实验报告

​

姓名：XXXX 学号：XXXX

​

姓名和学号？	XXXX，XXXXXX
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称？	实验3：视频播放小程序
博客地址？	XXXXXXX
Github仓库地址？	XXXXXXX

一、实验目标

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

二、实验步骤

1.项目创建

本次项目命名为Videodemo。

2.页面配置

2.1创建页面文件

具体操作如下：

(1)将app. json文件内 pages属性中的“pages/logs/logs”删除﹐并删除上一行末尾的逗号。 (2)按快捷键Ctrl＋S保存当前修改。

2.2删除和修改文件

具体操作如下：

(1）删除utils 文件夹及其内部所有内容。 (2〉删除 pages文件夹下的 logs目录及其内部所有内容。

(3）删除index. wxml 和 index. wxss 中的全部代码。 (4）删除 index.js 中的全部代码,并且输入关键词page找到第二个选项按回车键让其自动补全函数。 index.js (5）删除app. wxss 中的全部代码。 (6）删除 app.js中的全部代码,并且输人关键词app找到第一个选项按回车键让其自动补全函数。

2.3创建其他文件

创建Images文件夹，将播放图标存入其中。

3.视图设计

3.1导航栏设计

在app.json中自定义导航栏标题和背景颜色。

3.2页面设计

页面上主要包含3个区域,具体内容解释如下。

·区域1:视频播放器,用于播放指定的视频;

·区域2:弹幕发送区域,包含文本输入框和发送按钮;

·区域3:视频列表,垂直排列多个视频标题,点击不同的标题播放对应的视频内容。 面板之间需要有一定的间隔距离,。计划使用如下组件。

·区域1:<video >组件;

·区域2:<view >组件,并定义class='danmuArea ' ;

·区域2内部:<input >和<button>组件﹔

·区域3:<view >组件,并定义class= 'videoList ';

·区域3内单元行:<view>组件,并定义class= 'videoBar';·区域3单元行内:每行一个<image >组件用于显示播放图标、一个<tcxt >组件用于显示视频标题。

4.逻辑实现

4.1更新播放列表

在区域3对<view class— 'videoBar '>组件添加wx:for属性,改写为循环展示列表。 然后在JS文件的 data属性中追加 list数组,用于存放视频信息。

4.2点击播放视频

在区域3对<view class = 'videoBar '>组件添加data-url属性和 bindtap属性。其中data-url用于记录每行视频对应的播放地址, bindtap用于触发点击事件。然后在JS文件的onLoad函数中创建视频上下文,用于控制视频的播放和停止。接着添加自定义函数playVideo。

4.3发送弹幕

在区域1对<video >组件添加enable-danmu和 danmu-btn 属性,用于允许发送弹幕和显示“发送弹幕”按钮。 然后在区域2为文本输入框追加 bindinput 属性,用于获取弹幕文本内容﹔为按钮追加bindtap属性,用于触发点击事件。此时可以发出红色文本的弹幕。如果希望发出随机颜色的弹幕内容,可以在JS文件中追加自定义函数 getRandomColor。

程序最终代码如下：

index.js文件代码如下：

 

 

 

index.wxml文件代码如下：

 index.wxss文件代码如下：

 

 

 

三、程序运行结果

 

四、问题总结与体会

在实现随机颜色弹幕函数时，发现仅依照文档所给函数书写会报错，无法成功获得随机颜色的弹幕，最后依据给定的函数体，重新定义并引用函数，实现了对彩色弹幕的获取和输出。

通过本次实验，我掌握了视频列表的切换方法，掌握了视频自动播放的方法，以及视频随机颜色弹幕效果的生成，为我后续完成个人项目实验继续打下基础。