实验三

# 2022年夏季《移动软件开发》实验报告

<center>姓名：王鑫尧 学号：19040021039</center>

| 姓名和学号？ | 王鑫尧 19040021039 |
| -------------------- | -------------------------------- |
| 本实验属于哪门课程？ | 中国海洋大学22夏《移动软件开发》 |
| 实验名称？ | 实验3: 视频播放小程序 |
| 博客地址？ | XXXXXXX |
| Github仓库地址？ | XXXXXXX |

（备注：将实验报告发布在博客、代码公开至 github 是 **加分项**，不是必须做的）

## **一、实验目标**

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

## 二、实验步骤

列出实验的关键步骤、代码解析、截图。

1.项目创建

2.页面配置
2.1 创建页面文件
2.2删除和修改文件
2.3创建其他文件

3.视图设计

3.1导航栏设计
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#987938",
"navigationBarTitleText": "口述校史"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}

3.2页面设计
<!--index.wxml-->
<!-- 区域1：视频播放器 -->
<video id="myVideo" controls src="{{src}}" enable-danmu danmu-btn></video>

<!-- 区域2：弹幕控制区域 -->
<view class="danmuArea">
<!-- 2-1 弹幕输入框 -->
<input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>

<!-- 2-2 发送按钮 -->
<button bindtap="sendDanmu">发送弹幕</button>
</view>

<!-- 区域3：视频列表 -->
<view class="videoList">
<view class="videoBar" wx:for="{{list}}" wx:key="id" data-url="{{item.videoUrl}}" bindtap="playVideo">
<image src="/images/play.png"></image>
<text>{{item.title}}</text>
</view>
</view>

/**index.wxss**/
/* 区域1：视频组件样式 */
video{
width:100%;
}

/* 区域2：弹幕控制样式 */
/* 2-1 弹幕区域整体样式 */
.danmuArea{
display: flex;
flex-direction: row;
}

/* 2-2 文本输入框样式 */
input{
border: 1rpx solid #987938;
height: 100rpx;
flex-grow: 1;
}

/* 2-3 发送按钮样式 */
button{
color: white;
background-color: #987938;
}

/* 区域3：视频列表样式 */
/* 3-1 视频列表区域样式 */
.videoList{
width: 100%;
min-height: 400rpx;
}

/* 3-2 单行列表区域样式 */
.videoBar{
width: 95%;
display: flex;
flex-direction: row;
margin: 10rpx;
border-bottom: 1rpx solid #987938;
}

/* 3-3 播放图标样式 */
image{
width: 70rpx;
height: 70rpx;
margin: 20rpx;
}

/* 3-4 文本标题样式 */
text{
font-size: 45rpx;
color: #987938;
margin: 20rpx;
flex-grow: 1;
}****

4.逻辑实现
4.1更新播放列表
4.2点击播放视频
4.3发送弹幕

## 三、程序运行结果

列出程序的最终运行结果及截图。

## 四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。