一、视图设计

（一）导航栏设计

# app.json——导航栏设置
{"pages":["pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#000080","navigationBarTitleText": "口述校史","navigationBarTextStyle":"white"},"style": "v2","sitemapLocation": "sitemap.json"
}

在这里插入图片描述

（二）页面设计

1.视频组件

# pages/index.wxml
<!--区域一：视频播放器-->
<video id='myVideo'controls></video># pages/index.wxss
/*视频组件样式*/
video{width:100%; /*视频组件宽度为100%*/
}

在这里插入图片描述

2.弹幕区域

# pages/index.wxml
<!--区域2∶弹幕控制-->
<view class='danmuArea'><input type='text'placeholder='请输入弹幕内容'></input><button>发送弹幕</button>
</view># pages/index.wxss
/*区域2∶弹幕控制样式*/
/*2-1弹幕区域样式*/
.danmuArea {display: flex; /*flex模型布局*/flex-direction:row; /*水平方向排列*/
}/*2-2文本输入框样式*/
input {border:1rpx solid #987938; /*1rpx宽的实线棕色边框*/flex-grow:1; /*扩张多余空间宽度*/height:100rpx; /*高度*/ 
}/*2-3按钮样式*/
button {color:white; /*字体颜色*/background-color:#987938; /*背景颜色*/
}

在这里插入图片描述

3.视频列表

# pages/index.wxml
<!--区域3∶视频列表-->
<view class='videoList'><view class='videoBar'><image src='/image/play.png'></image><text>这是一个测试标题</text></view>
</view># pages/index.wxss
/*区域3∶视频列表样式*/
/*3-1视频列表区域样式*/
.videoList {width:100%; /*宽度*/min-height:400rpx; /*最小高度*/
}/*3-2单行列表区域样式*/
.videoBar {width:95%; /*宽度*/display: flex; /*flex模型布局*/flex-direction:row; /*水平方向布局*/border-bottom:1rpx solid #987938; /*1rpx宽的实线棕色边框*/margin:10rpx; /*外边距*/
}/*3-3播放图标样式*/
image {width:70rpx; /*宽度*/height:70rpx; /*高度*/margin: 20rpx; /*外边距*/
}/*3-4文本标题样式*/
text {font-size:45rpx; /*字体大小*/color: #987938; /*字体颜色为棕色*/margin: 20rpx; /*外边距*/flex-grow:1; /*扩张多余空间宽度*/
}

在这里插入图片描述

二.逻辑实现

1.更新播放列表

# pages/index.wxml
<!--区域一：视频播放器-->
<video id='myVideo'controls src="{{src}}"></video>
...
<!--区域3∶视频列表-->
<view class='videoList'><view class='videoBar'wx:for='{{list}}'wx:key='video{{index}}'><image src='/image/play.png'></image><text>{{item.title}}</text></view>
</view># pages/index.js
/*** 页面的初始数据*/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'}]},

在这里插入图片描述

2.点击播放视频

# pages/index.wxml
<!--区域3∶视频列表-->
<view class='videoList'><view class='videoBar'wx:for='{{list}}'wx:key='video{{index}}'data-url='{{item.videoUrl}}'bindtap='playVideo'><image src='/image/play.png'></image><text>{{item.title}}</text></view>
</view># pages/index.js
Page({
/**
* 播放视频
*/playVideo: function(e) {//停止之前正在播放的视频this. videoCtx. stop()//更新视频地址this.setData({src:e.currentTarget.dataset.url })//播放新的视频this.videoCtx.play()}, 
.../*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.videoCtx = wx.createVideoContext('myVideo')},

在这里插入图片描述

3.发送弹幕

# pages/index.wxml
<!--区域一：视频播放器-->
<video id='myVideo' controls autoplay src="{{src}}" enable-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='/image/play.png'></image><text>{{item.title}}</text></view>
</view># pages/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:colorrgb.push(color)}return '#'+rgb.join('')
}/*** 更新弹幕内容*/
getDanmu: function(e){this.setData({danmuTxt:e.detail.value})
},/*** 发送弹幕*/
sendDanmu: function(e){let text = this.data.danmuTxt;this.videoCtx.sendDanmu({text:text,color:getRandomColor()})
},