移动软件开发实验三——视频播放小程序

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

一、实验目标

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

二、实验步骤

1. 项目结构

2.视图设计

2.1导航栏设计

2.2页面设计

在页面上将界面划分为三个区域，最后一个视频列表使用了for循环加载list，只需在for循环中写入每个listview不同的属性就可以现在重复的视图

3.逻辑设计

在逻辑设计的过程中，我们需要解决视频播放切换和发送弹幕这两个问题

3.1 视频切换

在视频切换中，我们使用了小程序自带的方法，首先为listview添加点击事件，将正在播放的视频停止并更新将要播放的视频

playVideo: function (e) {
      this.videoCtx.stop()
      // 停止播放之前正在播放的视频
      this.setData({
        src: e.currentTarget.dataset.url
      })
      // 更新视频地址
      this.videoCtx.play()
      // 播放新的视频
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      this.videoCtx=wx.createVideoContext('myVideo')
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.2 弹幕发送

为弹幕组件添加获取弹幕内容和点击弹幕按钮发送弹幕的点击事件，之后使用微信小程序自带的方法发送弹幕

   getDanmu:function(e){
      this.setData({
        danmuTxt:e.detail.value
      })
    },
    sendDanmu:function(e){
      let text=this.data.danmuTxt
      this.videoCtx.sendDanmu({
        text:text,
        color:getRandomColor()
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12

3.3 随机弹幕颜色

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('')
  }
1
2
3
4
5
6
7
8
9
10

通过随机数生成rgb颜色号

三、运行效果

运行正常

四、问题总结与体会

通过本次实验的学习，使得我对微信小程序中的video组件进一步了解，通过对for循环实现大量类似重复样式view的学习，在类比安卓开发中的recycleview等控件，使得我的运用相关组件的能力进一步加深，在该项目的过程，进一步理清了项目结构之间的关系，包括page的生命周期等等，并对解析json数据有了更深层次的理解与运用