ouc-exp3-blog

seeleyuan

已于 2022-08-20 21:17:46 修改

阅读量318

点赞数

文章标签：小程序

于 2022-08-20 21:12:49 首次发布

本文链接：https://blog.csdn.net/yuanyulin6/article/details/126444472

版权

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

一、实验目标

1.完成视频播放查询小程序

二、实验步骤

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

1.准备工作

下载一个播放的图片play.png，图片地址为https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip。

下载完成后，将其放到根目录的images文件夹下（没有需要创建，或者直接下载到此程序同目录下）。

本次实验锁需要的四个视频的地址，如下：

list: [{
        id: '1001',
        title: '杨国宜先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
      },
      {
        id: '1002',
        title: '唐成伦先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
      },
      {
        id: '1003',
        title: '倪光明先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
      },
      {
        id: '1004',
        title: '吴仪兴先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
      }
    ]

完成项目基本创建工作后，我们继续实验。

2.视图设计

2.1导航栏设计

更改app.json，实现导航栏文本和导航栏的颜色效果。

文件代码如下：

 "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#987938",
        "navigationBarTitleText": "口述历史",
        "navigationBarTextStyle": "black"
    }

2.2页面设计

我们需要设计一个如下图所示的页面。

请添加图片描述

主要包含了3个区域，这三个区域我们需要摆放：

区域1：视频播放器

区域2：弹幕发送装置，包括文本发送框和发送按钮

区域3：视频列表，垂直排列多个视频的标题

使用到的组件后续会补充

2.2.1视频组件设计

这个区域我们需要用组件来实现一个视频的播放器，

其中这个视频组件的宽度需要占整个容器的全部。

wxml代码实现如下：

<view class="container">
  <video id="mVideo" controls ></video>
</view>

/*视频组件样式*/
video{
    width:100%;
}

2.2.2弹幕区域设计

根据界面的构思，首先我们需要一个view组件实现一个单行的区域，然后在这个组件里面放上一个输入框和一个发送按钮。

wxss代码如下：

.danmuArea{
    display:flex;
    flex-direction:row;
}
input{
    border:1rpx solid #987938;
    flex-grow: 1;
    height: 100rpx;
    
}
button{
    color:white;
    background-color:#987938;
}

效果如下：

请添加图片描述

2.2.3视频列表设计

编写wxml代码如下：

<view class='videoList'>
    <view class = "videoBar">
        <image src='/images/play.png'></image>
        <text>This is a test header</text>
    </view>
</view>

wxss

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

预览效果如下：

请添加图片描述

这样我们的界面设计就基本完成了。

3.逻辑实现

3.1更新播放列表

我们通过wx：for来循环展示列表，并且在data属性中加上list列表（前面有给），用来存放视频信息。

wxml代码如下：

<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代码更新：

Page({
    data:{
        list: [{
            id: '1001',
            title: '杨国宜先生口述校史实录',
            videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
          },
          {
            id: '1002',
            title: '唐成伦先生口述校史实录',
            videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
          },
          {
            id: '1003',
            title: '倪光明先生口述校史实录',
            videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
          },
          {
            id: '1004',
            title: '吴仪兴先生口述校史实录',
            videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
          }
        ],
       
    }

})

成功预览效果如下：

请添加图片描述

3.2点击播放视频

这里需要我们在区域3的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')
    },
    playVideo:function(e){
        this.videoCtx.stop
        this.setData({src:e.currentTarget.dataset.url})
        this.videoCtx.play()
    }

实现效果如下：

请添加图片描述

3.3发送弹幕

在区域1组件中添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示弹幕按钮。

wxml代码如下：

<video id="mVideo" 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'
            })
        }

同时根据文档，可以发送彩色的随机弹幕。

实现如下：

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('')
}
Page({
    ...
    
    getDanmu:function(e){
        //console.log(e.detail)
        this.setData({
            danmuTxt:e.detail.value
        })
    },
    sendDanmu:function(e){
        
        let text = this.data.danmuTxt;
        console.log(text)
        this.videoCtx.sendDanmu({
            text:text,
            color:getRandomColor()
        })
    },
    
    

})