2023年夏季《移动软件开发》实验报告:实验三

一、实验目标

1、掌握视频API的操作方法；2、掌握如何发送随机颜色的弹幕。

二、实验步骤

1、创建微信小程序

首先输入项目名称，选择项目的存储目录，输入AppID，选择不使用云服务。

2.设计页面

首先设计导航栏，将导航栏颜色更改为”#FFDEAD”，并将标题改为”口述校史“。

然后设计视频界面，分成三个区域，第一个区域为“视频播放部分”，使用video组件，并在wxss内设置video组件的宽度占整个屏幕的宽度。

wxml:
<video id='myVideo' controls></video>

wxss:
video{
  width:100%;
}

 然后设计“弹幕部分”，使用view包裹整个弹幕区域，然后将弹幕区域再分成输入和发送区域，用input和button组成。并使用flex布局设计该区域，将danmu类的flex-direction属性改成row，组件水平放置，然后设计input的flex-grow属性为1，使得文本框占满除按钮以外的区域。

wxml:
<view class="danmu">
  <input type="text" placeholder="请输入弹幕内容"></input>
  <button style="width: 30vw;font-size: 33rpx;">发送弹幕</button>
</view>

wxss:
.danmu{
  display: flex;
  flex-direction: row;
}
input{
  border: 5rpx solid #FFDEAD;
  height: 70rpx;
  flex-grow: 1;/*扩张多余空间，使得文本占满多余空间*/
}
button{
  color: white;
  background-color: #FFDEAD;
}

最后是视频列表，使用两个view，第一个view用来包裹所有的视频列表区域，第二个view用来作为视频列表区域的子列表。并且使用image和text组件，分别用来美化视频列表和介绍视频名称。新建一个images文件夹，将播放图标放入文件夹内。然后在wxss内设计子列表的下端边界以及左右边界，并且将将文本flex-grow属性修改为1，占满多余部分。

wxml:
<view class="videoList">
  <view class="videoBar">
    <image src="/images/play.png"></image>
    <text>测试</text>
  </view>
</view>

wxss:
.videoList{
  width: 100%;
  min-height: 400rpx;/*最小高度*/
}
.videoBar{
  width: 95%;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #FFDEAD;
  margin: 10rpx;
}
image{
  width:70rpx;
  height: 70rpx;
  margin: 20rpx;
}
text{
  font-size: 45rpx;
  color: #FFDEAD;
  margin: 20rpx;
  flex-grow: 1;
}

设计完成后的界面如下：

3.逻辑实现

3-1视频列表实现

在videoBar组件内添加wx:for属性，循环视频数组，并将text组件的展示内容改成变量item.title。

并在index.js的data属性内加入list数组，储存视频的标题和地址，以及id(用于区分数组的内容)。

此时页面如下所示：

 

然后在videoBar内添加data-url和bindtap属性，分别用及记录每行视频的播放地址和绑定事件playVideo。然后编写palyVideo函数和onLoad函数，分别用于播放新视频和控制视频暂停与否。

视频播放如下：

 

js:
 onLoad:function (options) {
   this.videoCtx=wx.createVideoContext('myVideo')
 },
 playVideo:function (e) {
   //停止播放
   this.videoCtx.stop()
   //更新视频
   this.setData({
     src:e.currentTarget.dataset.url
   })
   //播放新的视频
   this.videoCtx.play()
 }

wxml:
<view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" bindtap="playVideo">

3-2发送弹幕实现

在video组件内添加enable-danmu和danmu-btn属性，用于在视频内显示弹幕。

然后在input组件内使用bindinput绑定getDanmu事件，在button内绑定sendDanmu事件，然后在index.js内实现这两个函数，getDanmu用于获取文本框的内容，sendDanmu用于设置弹幕的样式以及发送弹幕。

然后编写随机颜色函数，随机生成三个0-1的数字，扩大256倍，然后转换成16进制，若颜色位数不够，则在前面追加’0‘，然后生成三个十六进制的数，并连接起来，最后在前面连接“#”。

然后在sendDanmu内调用随机颜色生成函数，生成彩色弹幕。

演示如下：

三、程序运行结果

弹幕演示：

 

 

视频暂停演示： 

 

选择其他视频演示：

四、问题总结与体会

在实验过程中，在wxss内设计button的大小以及其内的文字大小时，无论将宽度和高度修改为多少，button的大小都不发生改变。转而在button组件内添加style属性，直接设置按钮宽度以及字体大小，成功改变button的样式。在学习新事物的过程中，我们或多或少会遇到一定的困难，和同学讨论以及上网查询资料是解决问题的有效方法。在此次实验中，学会了通过生成随机数生成彩色弹幕，以及组件绑定事件，使得对组件操作时，触发事件。