中国海洋大学2023年夏季《移动软件开发》实验报告3

中国海洋大学2023年夏季《移动软件开发》实验报告3

Info: 韩翔 21020007023

Date: 2023-08-28

页面配置

需要导入图标素材，并按照与之前实验中相同的方法，对于文件列表中的文件进行处理。

导航栏设计

通过修改导航栏的属性，调整导航栏的背景颜色和文字内容。调整后的效果如图：

页面设计

通过使用<view>组件，插入视频播放器：

但是在插入后会发现，其宽度并不符合要求。此时需要借助在WXSS中的调整，对其样式进行设计：

video {
	width: 100%;
}

经过此改变后可以让播放区域的大小调整为合适的样子。

此外，还要对弹幕区域进行设计。代码如下：

<view class='danmuArea'>
    <input type='text' placeholder='请输入弹幕内容'></input>
	<button>发送弹幕</button>
</view>

WXSS代码片段如下：

.danmuArea {
    display: flex;
    flex-direction: row;
}

input {
    border: 1rpx solid #987938;
    flex-grow: 1;
    height: 100rpx;
}

button {
    color: white;
    background-color: #987938;
}

当前的效果如图所示（应当不包含下部的按钮和测试标题）：

在此之后，添加播放按钮和标题，并设置其样式：

WXML:

<view class='videoList'>
	<view class='videoBar'>
    	<image src='/images/play.png'></image>
    </view>
</view>

WXSS:

.videoList {
    width: 100%;
    min-height: 400rpx;
}

.videoBar {
    width: 95%;
    display: flex;
    flex-direction: row;
    border-bottom: 1rpx solid #987938;
    margin: 10rpx;
}

image {
    width: 70rpx;
    height: 70rpx;
    margin: 20rpx;
}

text {
    font-size: 45rpx;
    color: #987938;
    margin: 20rpx;
    flex-grow: 1;
}

此时的样式如下：

逻辑实现

为<view class=‘videoBar’>组件添加wx:for属性，此属性具有循环的作用。代码如下：

WXML:

<video id="myVideo" controls src="{{src}}"></video>

<view class='videoList'>
	<view class='videoBar' wx:for = '{{list}}' wx:key='video{{index}}'>
    	<image src='/images/play.png'></image>
        <text>{{item.title}}</text>
    </view>
</view>

通过在JS文件的data属性中追加list数组，用于存放视频信息。

至此，可以展示视频列表啦！（此时并不能加载出来视频）

对<view class=‘videoBar’>组件添加data-url属性和bindtap属性。其中data-url用于记录视频的播放地址，bindtap用于触发点击事件。

WXML:

<view class='videoList'>
	<view class='videoBar' wx:for='{{list}}' wx:key='video{{index}}' data-url='{{item.videoUrl}}' bindtap='playVideo'>
    	<image src-'/images/play.png'></image>
        <text>{{item.title}}</text>
    </view>
</view>

JS:

onLoad: function(options) {
    this.videoCtx = wx.createVideoContext('myVideo')
}

继续在JS文件中添加自定义函数playVideo:

playVideo: function(e) {
    this.videoCtx.stop()
    this.setData({
        src: e.currentTarget.dataset.url
    })
    this.videoCtx.play()
}

运行效果如图：

下一步将实现弹幕的功能。

通过向组件添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示“发送弹幕”按钮。

WXML:

<video id='myVideo' src='{{src}}' controls enable-danmu danmu-btn></video>

<view class='danmuArea'>
    <input type='text' placeholder='请输入弹幕内容' bindinput='getDanmu'></input>
	<button bindtap='sendDanmu'>发送弹幕</button>
</view>

JS:

getDanmu: function(e) {
    this.setData({
        danmuTxt: e.detail.value
    })
},

sendDanmu: function(e) {
    let text = this.data.danmuTxt;
    this.videoCtx.sendDanmu({
        text:text,
        color:'red'
    })
}

此时能够生成红色的弹幕。运行效果如图：

可以通过追加自定义函数getRandomColor，实现随机颜色弹幕的功能。

JS:

// 生成随机颜色
function getRandomColor() {
    let rgb=[]
    for (let i = 0; i < 3; i ++ ) {
        let color = Math.floor(Math.random()*256).toString(16)
        color = color.length == 1 ? '0' + color : color
        
        rgb.push(color)
    }
    return '#' + rgb.join('')
}

并修改部分代码：

sendDanmu: function(e) {
    let text = this.data.danmuTxt;
    this.videoCtx.sendDanmu({
        text: text,
        color: getRandomColor()
    })
}

此时可以发送彩色弹幕，如图所示：