2024年夏季《移动软件开发》实验报告
一、实验目标
1、掌握视频列表的切换方法;2、掌握视频自动播放方法;3、掌握视频随机颜色弹幕效果。
二、实验步骤
1. 项目创建
填写名称、目录、选择AppID,选择不使用云服务,模板选择JS基础模板
2. 页面配置
2.1 创建页面文件
(1)将app.json中pages属性中的“pages/logs/logs"删除
2.2 删除和修改文件
(1)删除utils文件夹及其内部所有内容
(2)删除pages文件夹下的logs目录及其内部所有内容
(3)删除index.wxml和index.wxss中的所有代码
(4)删除index.js中的所有代码,并且输入关键词”page“找到第二个选项按回车键让其自动补全函数
(5)删除app.wxss中的所有代码
(6)删除app.js中的全部代码,并且输入关键词”app“找到第二个选项按回车键让其自动补全函数
列出实验的关键步骤、代码解析、截图。
2.3 创建其它文件
在主文件夹下创建images,再添加play.png
实验所需的播放器图片play.png,图片下载地址
https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip
3.视图设计
3.1 导航栏设计
更改导航栏标题和背景颜色
{ "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "口述校史", "navigationBarBackgroundColor": "#987938" } }
3.2 页面设计
-
区域1:视频播放器
-
区域2:弹幕发送区域
-
区域3:视频列表
pages/index/index.wxml
<!-- 区域1:视频播放器 --> <video id="myVideo" controls></video> <!-- 区域2:弹幕控制 --> <view class="danmuArea"> <input type="text" placeholder="请输入弹幕内容"></input> <button>发送弹幕</button> </view> <!-- 区域3:视频列表 --> <view class='videoList'> <view class="videoBar"> <image src="/images/play.png"/> <text>这是测试标题</text> </view> </view>
pages/index/index.wxss
/* 区域1:视频播放器 */ /* 视频组件样式 */ video{ width: 100%; } /* 区域2:弹幕控制 */ /* 弹幕区域样式 */ .danmuArea{ display: flex; flex-direction: row; } /* 文本输入框形式 */ input{ border: lrpx solid #987938; flex-grow: 1; height: 100rpx; } /* 按钮样式 */ button{ color: white; background-color: #987938; } /* 区域3:视频列表样式 */ /* 视频播放列表区域样式 */ .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; }
4. 逻辑实现
4.1 更新播放列表
pages/index/index.wxml
<!-- 区域1:视频播放器 --> <video id="myVideo"src='{{src}}'></video> <!-- 区域2:弹幕控制(略) --> <!-- 区域3:视频列表 --> <view class='videoList'> <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}"> <image src="/images/play.png"/> <text>{{item.title}}</text> </view> </view>
pages/index/index.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' } ] } })
4.2 点击播放视频
区域3堆<view class='videoBar'>组件添加data-url属性和bindtap属性,data-url记录播放地址,bindtap用于触发点击事件
pages/index/index.wxml中修改部分
<!-- 区域3:视频列表 --> <view class='videoList'> <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}"bindtap="playVideo"> <image src="/images/play.png"/> <text>{{item.title}}</text> </view> </view>
pages/index/index.js中修改部分
Page({ /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.videoCtx=wx.createVideoContext('myVideo') }, // 播放视频 playVideo:function(e){ //停止之前播放视频 this.videoCtx.stop() //更新视频地址 this.setData({ src:e.currentTarget.dataset.url }) //播放新的视频 this.videoCtx.play() } })
4.3 发送弹幕
pages/index/index.wxml中修改部分
<!-- 区域1:视频播放器 --> <video id="myVideo"src='{{src}}'controls enable-danmu danmu-btn></video> <!-- 区域2:弹幕控制 --> <view class="danmuArea"> <input type="text" placeholder="请输入弹幕内容" bindinput='getDanmu'></input> <button bindtap="sendDanmu">发送弹幕</button> </view>
pages/index/index.js中修改部分
Page({ /** * 页面的初始数据 */ data: { danmuTxt:'', list: [...] }, // 更新弹幕内容 getDanmu:function(e){ this.setData({ danmuTxt:e.detail.value }) }, //发送弹幕 sendDanmu:function(e){ let text = this.data.danmuTxt; this.videoCtx.sendDanmu({ text:text, color:getRandomColor() }) }, }) //生成随机颜色 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('') }
5. 项目部分文件完整代码
pages/index/index.wxml
<!-- 区域1:视频播放器 --> <video id="myVideo"src='{{src}}'controls enable-danmu danmu-btn></video> <!-- 区域2:弹幕控制 --> <view class="danmuArea"> <input type="text" placeholder="请输入弹幕内容" bindinput='getDanmu'></input> <button bindtap="sendDanmu">发送弹幕</button> </view> <!-- 区域3:视频列表 --> <view class='videoList'> <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}"bindtap="playVideo"> <image src="/images/play.png"/> <text>{{item.title}}</text> </view> </view>
pages/index/index.wxss
/* 区域1:视频播放器 */ /* 视频组件样式 */ video{ width: 100%; } /* 区域2:弹幕控制 */ /* 弹幕区域样式 */ .danmuArea{ display: flex; flex-direction: row; } /* 文本输入框形式 */ input{ border: lrpx solid #987938; flex-grow: 1; height: 100rpx; } /* 按钮样式 */ button{ color: white; background-color: #987938; } /* 区域3:视频列表样式 */ /* 视频播放列表区域样式 */ .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; }
pages/index/index.wxml
Page({ /** * 页面的初始数据 */ data: { danmuTxt:'', 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' } ] }, // 更新弹幕内容 getDanmu:function(e){ this.setData({ danmuTxt:e.detail.value }) }, sendDanmu:function(e){ let text = this.data.danmuTxt; this.videoCtx.sendDanmu({ text:text, color:getRandomColor() }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.videoCtx=wx.createVideoContext('myVideo') }, // 播放视频 playVideo:function(e){ //停止之前播放视频 this.videoCtx.stop() //更新视频地址 this.setData({ src:e.currentTarget.dataset.url }) //播放新的视频 this.videoCtx.play() } }) //生成随机颜色 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('') }
app.json
{ "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "口述校史", "navigationBarBackgroundColor": "#987938" }, "style": "v2", "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }
三、程序运行结果
列出程序的最终运行结果及截图。
四、问题总结与体会
问题总结与解决
在实验过程中,我遇到了几个主要问题,但通过不断尝试和探索,最终成功解决了这些问题。
-
视频加载问题
-
问题:在初次加载视频时,视频无法正常播放,显示加载失败。
-
解决:首先,我检查了视频URL是否正确,发现URL中包含特殊字符,如空格和问号,这些字符在URL中需要被正确编码。我将URL中的空格替换为
%20
,问号替换为%3F
,并在URL末尾添加了必要的查询字符串参数(如?e=.mp4
)。修改后,视频可以正常加载和播放。
-
-
弹幕颜色显示问题
-
问题:在发送弹幕时,弹幕的颜色有时无法正常显示,或显示的颜色与预期不符。
-
解决:我检查了弹幕颜色生成的代码,发现颜色值生成函数
getRandomColor
中的border: lrpx solid#987938;
中的lrpx
应为1rpx
,这是一个笔误。更正后,弹幕颜色显示正常。同时,我也检查了getRandomColor
函数生成的颜色值是否符合CSS颜色格式(#RRGGBB
),确保颜色值格式正确无误。
-
-
页面布局调整
-
问题:页面布局在某些设备上显示不够美观,特别是弹幕输入框和视频列表之间的间距问题。
-
解决:通过调整
index.wxss
文件中的样式,特别是使用flex
布局来控制输入框、按钮和视频列表的间距和布局,使页面在不同设备上都能显示得更加美观和协调。
-
收获与体会
通过这次实验,我收获颇丰:
-
技能提升:掌握了视频列表的切换方法、视频自动播放方法及视频随机颜色弹幕效果的实现。这些技能对于开发具有视频播放和互动功能的小程序非常有用。
-
问题解决能力:在实验过程中,我遇到了不少问题,但通过查阅资料、尝试多种方法,最终都成功解决了。这锻炼了我的问题解决能力和耐心。
-
团队协作:虽然这次实验是个人项目,但我也意识到在软件开发中团队协作的重要性。在未来的学习和工作中,我会更加注重与他人的合作和交流。
总的来说,这次实验让我受益匪浅,不仅提升了我的技能水平,还增强了我的问题解决能力和团队协作能力。我期待在未来的学习和工作中能够继续运用这些知识和技能,取得更多的成果。