2022年夏季《移动软件开发》实验报告
本实验属于哪门课程? | 中国海洋大学23夏《移动软件开发》 |
实验名称? | 实验3:小程序媒体API:口述校史 |
博客地址? | m0_63773979_-CSDN博客 |
Github仓库地址? | XXXXXXX |
(备注:将实验报告发布在博客、代码公开至 github 是 加分项,不是必须做的)
一、实验目标
1、掌握视频列表的切换方法;2、掌握视频自动播放方法;3、掌握视频随机颜色弹幕效果。
二、实验步骤
1.首先按照快速启动模板创建小程序的步骤得到一个小程序模板
2.创建页面文件并删除和修改其他文件
将app. json文件内 pages属性中的“pages/logs/logs”删除,并删除上一行末尾的逗号。 按快捷键Ctrl+S保存当前修改。
删除 utils文件夹及其内部所有内容。 删除 pages文件夹下的 logs目录及其内部所有内容。 删除 index. wxml和 index. wxss中的全部代码。 删除 index. js中的全部代码,并且输入关键词“page”找到第二个选项按回车键让其自动补全函数
删除 app. wxss中的全部代码。 删除 app. js中的全部代码,并且输入关键词“app”找到第一个选项按回车键让其自动补全函数
3.视图设计
(1)导航栏设计
在app.json中自定义导航栏标题和背景颜色,文件代码如下
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#987938", "navigationBarTitleText": "口述校史", "navigationBarTextStyle":"black" },
上述代码可以更改所有页面的导航栏标题为“口述校史”、背景颜色为金棕色
(2)页面设计:页面主要包括3个区域
1)区域1(视频组件):这里需要使用<video>组件来实现视频播放器,其中controls属性用于显示播放、暂停、音量等控制组件
2)区域2(弹幕区域)设计:需要使用<view>组件实现一个单行区域,包括文本输入框(<input>组件)和发送按钮(<button>组件),还需定义class='danmuArea'
3)区域3(视频列表)设计:需要使用<view>组件实现一个可以扩展的多行区域,每行包括一个播放图标和一个视频标题文本,为方便,先设计第一行效果,后续使用wx:for属性循环添加全部的内容
index.wxml文件全部代码如下:
<!--区域1:视频播放器--> <video id='Video' controls src="{{src}}" <!--区域2:弹幕区域--> <view class='danmuArea'> <input type='text' placeholder=‘请输入弹幕内容’></input> <button>发送弹幕</button> </view> <!--区域3:视频列表--> <view class="videoList"> <view class="videoBar" > <image src="/image/play.png"></image> <text>这是一个测试标题</text> </view> </view>
index.wxss全部代码如下:
video{ width:100%; } .danmuArea{ display:flex; flex-direction:row; } input{ border:1rpx solid #987938; height:100rpx; flex-grow:1; } button{ color:white; background-color: #987938; } .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; } wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}"bindtap="playVideo"
效果图如下:
4.逻辑实现
(1)更新播放列表:在区域3对组件添加wx:for属性,采用循环展示列表,在js文件中的data属性中追加list数组,用于存放视频信息
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)点击播放视频:在区域3对其中的组件添加data-url属性和bindtap属性,分别用于记录每行视频对应的播放地址和触发点击事件
<!--区域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'></image> <text>{{item.title}}</text> </view> </view>
然后在JS文件的onLoad函数中创建视频上下文,用于控制视频的播放和停止
onLoad: function (options) { this.videoCtx=wx.createVideoContext('myVideo') },
接着添加自定义函数playVideo
playVideo:function(e){ this.videoCtx.stop() this.setData({ src:e.currentTarget.dataset.url }) this.videoCtx.play() },
(3)发送弹幕:在区域1中对<video>组件添加enable-danmu和danmu-btn属性,用来允许发送弹幕和显示“发送弹幕”按钮,区域2为文本框追加bindinput属性,用于获取弹幕文本内容;为按钮追加bindtap属性,用于触发点击事件。
<!--区域1:视频播放器--> <video id='Video' controls src="{{src}}" enable-danmu danmu-btn></video> <!--区域2:弹幕区域--> <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: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('') }
三、程序运行结果
四、问题总结与体会
实验过程比较顺利,不过在最后弹幕发送这一步出现了一点问题,经查资料找到了解决办法,只需要重新编译一下就可以了,通过此次实验,学会了随机颜色的生成方法,同时也对小程序的编写有了新的认识