2022年夏季《移动软件开发》实验报告
一、实验目标
1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。
二、实验步骤
列出实验的关键步骤、代码解析、截图。
1、创建项目
填好项目名称、目录、AppID等信息后，点击确定即可创建项目了
创建好项目之后的初始界面如下：
2、页面配置
将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号，删除utils文件夹及其内部所有内容，删除pages文件夹下的logs目录及其内部所有内容，删除index.wxml和index.wxss中的全部代码，删除index.js中的全部代码，并且输人关键词page找到第二个选项按回车键让其自动补全函数，删除app.wxss中的全部代码，删除app.js中的全部代码，并且输人关键词app找到第一个选项按回车键让其自动补全函数
这些工作做好了之后，界面如图所示：
3、创建新文件夹存放微信小程序中用到的图片
创建新文件夹images，存放微信小程序中需要用到的图片play.png
4、导航栏设计
在app.json中修改导航栏标题和背景颜色。
app.json文件中需要修改的代码如下：
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#987938",
"navigationBarTitleText": "口述校史",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
其中"navigationBarBackgroundColor": “#987938”,是将背景颜色改为金棕色(#987938)，“navigationBarTitleText”: “口述校史”,是将所有页面的导航栏标题文本改为“口述校史”
此时微信小程序的预览效果如下图所示：
5、页面设计
我们在页面中总共有3个区域需要设计的，分别是区域1：视频播放器（用于播放指定的视频）、区域2：弹幕发送区域（包含文本输入框和发送按钮）、区域3：视频列表（垂直排列多个视频标题，点击不同的标题播放对应的视频内容。）
区域1（视频组件）需要使用组件来实现一个视频播放器。
在index.wxml中需要修改的代码片段如下：
<!--区域1：视频播放器-->
<video id ='myVideo' controls></video>
在index.wxss修改以下代码片段：
video{
width: 100%;
}
区域2（弹幕区域）需要使用组件实现一个单行区域，包括文本输入框和发送按钮。
在index.wxml文件中修改的代码片段如下：
<!-- 区域2：弹幕区域 -->
<view class='danmuArea'>
<input type='text' placeholder='请输入弹幕内容'></input>
<button>发送弹幕</button>
</view>
在index.wxss修改以下代码片段：
.danmuArea{
display: flex; /*flex模型布局*/
flex-direction: row; /*水平方向排列*/
}
input{
border: 1rpx solid #987938; /*1rpx宽的实线棕色边框*/
flex-grow: 1; /*扩张多余空间宽度*/
height: 100rpx; /*高度*/
}
button{
color: white; /*字体颜色*/
background-color: #987938; /*背景颜色*/
}
其中，display: flex;是设置flex模型布局，flex-direction: row;是设置水平方向排列，border: 1rpx solid #987938; 是设置1rpx宽的实线棕色边框，flex-grow: 1;是扩张多余空间宽度，height: 100rpx; 是设置高度，color: white;是设置字体颜色，background-color: #987938; 是设置背景颜色
此时微信小程序的预览效果如下图所示：
区域3（视频列表）需要使用组件实现一个可扩展的多行区域，每行包含一个播放图标和一个视频标题文本。当前先设计第一行效果，后续使用wx:for属性循环添加全部内容。
在index.wxml修改以下代码片段：
<!-- 第三个区域：视频列表 -->
<view class='videoList'>
<view class='videoBar'>
<image src='/images/play.png'></image>
<text>这是一个测试标题</text>
</view>
</view>
在index.wxss修改以下代码片段
.videoList{
width: 100%;/*宽度*/
min-height: 400rpx;/*最小高度*/
}
.videoBar{
width: 95%;/*宽度*/
display: flex;/*flex模型布局*/
flex-direction: row;/*水平方向布局*/
border-bottom: 1rpx solid #987938;/*1rpx宽的实线棕色边框*/
margin: 10rpx;/*外边距*/
}
image{
width: 70rpx;/*宽度*/
height: 70rpx;/*高度*/
margin: 20rpx;/*外边距关*/
}
text{
font-size: 45rpx;/*字体大小*/
color: #987938;/*字体颜色为棕色*/
margin: 20rpx;/*外边距*/
flex-grow: 1;/*扩张多余空间宽度*/
}
6、更新播放列表
在区域3对<view class='videoBar>组件添加wx:for属性，改写为循环展示列表。
在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'></image>
<text>{
{item.title}}</text>
</view>
</view>
然后在JS文件的data属性中追加list数组，用于存放视频信息。
在index.js修改以下代码片段：
Page({
data: {
list: [{
id: '299371',
title: '杨国宜先生口述校史实录',
videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
},
{
id: '299396',
title: '唐成伦先生口述校史实录',
videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
},
{
id: '299378',
title: '倪光明先生口述校史实录',
videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
},
{
id: '299392',
title: '吴仪兴先生口述校史实录',
videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
}
]
},
})
此时已经可以展示全部视频列表了，微信小程序的预览效果如下图所示：
7、点击播放视频
在区域3对组件添加data-url属性和bindtap属性。其中data-url用于记录每行视频对应的播放地址，bindtap用于触发点击事件。
在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'></image>
<text>{
{item.title}}</text>
</view>
</view>
然后在JS文件的onLoad函数中创建视频上下文，用于控制视频的播放和停止。
在index.js修改以下代码片段：
onLoad: function (options) {
this.videoCtx=wx.createVideoContext('myVideo')
},
接着添加自定义函数playVideo
在index.js文件中加入以下代码片段：
playVideo: function (e) {
this.videoCtx.stop()
// 停止播放之前正在播放的视频
this.setData({
src: e.currentTarget.dataset.url
})
// 更新视频地址
this.videoCtx.play()
// 播放新的视频
},
其中this.videoCtx.stop()是停止播放之前正在播放的视频，src: e.currentTarget.dataset.url是更新视频地址，this.videoCtx.play()是播放新的视频
运行效果如图所示：
8、发送弹幕
在区域1对组件添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示“发送弹幕”按钮。
在index.wxml文件中修改以下代码片段：
<!--区域 1：视频播放器-->
<video id='myVideo' controls src='{
{src}}' enable-danmu='true' danmu-btn='true'></video>
然后在区域2为文本输入框追加bindinput属性，用于获取弹幕文本内容；为按钮追加bindtap属性，用于触发点击事件。
在index.wxml中修改以下代码片段：
<!--区域 2：弹幕控制-->
<view class="danmuArea">
<input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
<button bindtap="sendDanmu">发送弹幕</button>
</view>
在对应的index.js文件中的data段中加入下面片段：
danmuTxt:''
此时可以发出红色文本的弹幕，运行效果如图6-13所示。
此时可见可以发送红色弹幕
如果希望发出随机颜色的弹幕内容，可以在JS文件中追加自定义函数getRandomColor
在index.js中加入以下代码片段：
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('')
}
上述代码可以随机生成一个十六进制的颜色，将其在原先需要录入color属性的地方调用即可实现彩色弹幕效果。
在index.js中修改以下代码片段：
sendDanmu:function(e){
let text=this.data.danmuTxt
this.videoCtx.sendDanmu({
text:text,
color:getRandomColor()
})
},
此时可以发出彩色文本的弹幕，微信小程序的运行效果如下图所示：
三、程序运行结果
列出程序的最终运行结果及截图。
这是发送红色弹幕的运行结果：
这是发送随机彩色弹幕的运行结果：
四、问题总结与体会
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。
1、实验过程中遇到的问题以及解决方法：
①问题1：在实验过程中，点击播放按钮没有反应
解决方法：后来知道是没有联网，连接上网络就可以播放了
②问题②：一开始我发现我只能播放一个视频，下面三个不能播放
解决方法：后来认真看代码才发现是我在index.wxml文件中忘了给视频播放地址src添加变量，添加上关于src的变量即可
2、收获和体会
①通过做这次的小实验，我掌握了视频列表的切换方法、视频自动播放方法和视频随机颜色弹幕效果的方法。
②这个实验很考验布局，就需要再wxss文件上话很长时间，所以在做完这个实验了之后，我对微信小程序的wxss文件有了很深刻的理解，也会熟练掌握了微信小程序的布局。
③这个实验和之前的两个实验有很大的区别就是逻辑事件变多了，例如点击切换播放视频，点击发送弹幕等等，所以通过这次的实验，我对.js文件有了更深的认识。
击播放按钮没有反应
解决方法：后来知道是没有联网，连接上网络就可以播放了
②问题②：一开始我发现我只能播放一个视频，下面三个不能播放
解决方法：后来认真看代码才发现是我在index.wxml文件中忘了给视频播放地址src添加变量，添加上关于src的变量即可
2、收获和体会
①通过做这次的小实验，我掌握了视频列表的切换方法、视频自动播放方法和视频随机颜色弹幕效果的方法。
②这个实验很考验布局，就需要再wxss文件上话很长时间，所以在做完这个实验了之后，我对微信小程序的wxss文件有了很深刻的理解，也会熟练掌握了微信小程序的布局。
③这个实验和之前的两个实验有很大的区别就是逻辑事件变多了，例如点击切换播放视频，点击发送弹幕等等，所以通过这次的实验，我对.js文件有了更深的认识。
3、对课程安排的建议：通过做了这三个实验，我觉得wxml文件是不难理解，不难写的，但是wxss和js文件就没有怎么容易懂了，所以如果老师能专门讲一下wxss和js文件的写法就更好了。