# 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发送弹幕
## 三、程序运行结果
列出程序的最终运行结果及截图。
## 四、问题总结与体会
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。
标签：987938,flex,样式,##,实验,弹幕 来源： https://www.cnblogs.com/yaoxiaowang/p/16608454.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。