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.danmuTxt
this.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 : color
rgb.push(color)
}
return '#' + rgb.join('')
}
通过随机数生成rgb颜色号
三、运行效果
运行正常
四、问题总结与体会
通过本次实验的学习,使得我对微信小程序中的video组件进一步了解,通过对for循环实现大量类似重复样式view的学习,在类比安卓开发中的recycleview等控件,使得我的运用相关组件的能力进一步加深,在该项目的过程,进一步理清了项目结构之间的关系,包括page的生命周期等等,并对解析json数据有了更深层次的理解与运用