微信小程序开发3

一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1、创建项目

创建一个空白项目

 

2、 页面配置

删除其他不用的页面文件，只留index文件夹，创建images文件夹用来放图片

3、视图设计

 

3.1 导航栏设计

在app.json中加入以下代码将导航栏设置成白字、棕底。

 

 

3.2 视图设计

3.2.1页面设计图

预计设计如下的界面

 

3.2.2 视频播放栏

设置视频播放框和其样式。video标签表示视频播放器，controls表示播放器中的组件

 

 

3.2.3 弹幕发送栏

弹幕发射栏由输入框和发送按钮两部分组成，其中文字框用input组件

 

 

下面是完成第一、二部分后的效果图

 

3.2.4 视频列表栏

视频列表栏是一个大的view组件，其中每一个视频又是一个小的view组件。

 

 

效果图如下图所示

 

 

4、逻辑实现

4.1 更新视频播放列表

视频播放列表我们用wx:for加载到页面中，可以使用item找到每一个循环的元素。

 

 

在index .js中加入list来存放视频的信息

 

 

4.2 点击播放视频

在视频播放页加入src表示视频的地址，enable-danmu和danmu-btn 表示允许发送弹幕和显示弹幕

 

在视频列表栏加入点击事件playcideo并传递参数data-url

 

在onload中创建视频的上下文本，用来控制视频的暂停和播放。

设置playvideo函数，停止之前播放的视频，播放当前的视频，并将相应的视频播放地址传递给src变量

4.3 点击发送弹幕

 

为文字框添加事件getdanmu获取内容，为按钮添加事件senddanmu发送弹幕

 

在index.js中加入变量记录弹幕

 

设置getdanmu函数更新danmutxt变量

 

设置senddanmu函数调用videoCtx的senDanmu接口将弹幕内容发送。注意函数前8行是用来获取随机颜色的语句。

 

三、程序运行结果

1、打开程序

 

2、点击一个视频

 

3、播放视频并发送弹幕