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

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')},

3.2 弹幕发送

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

   getDanmu:function(e){this.setData({danmuTxt:e.detail.value})},sendDanmu:function(e){let text=this.data.danmuTxtthis.videoCtx.sendDanmu({text:text,color:getRandomColor()})},

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 : colorrgb.push(color)}return '#' + rgb.join('')}

通过随机数生成rgb颜色号

三、运行效果

运行正常

四、问题总结与体会

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！