《移动软件开发》实验3
实验介绍：
**本实验来自于周文洁老师的《微信小程序开发实战》第六章。**主要内容是使用小程序媒体API制作一个视频播放小程序，视频素材来自于某高校档案馆的《口述校史》栏目，它录制了多位耄耋之年的老教工回忆工作时期对大学的印象。
一、实验目标
1、掌握视频列表的切换方法；
2、掌握视频自动播放方法；
3、掌握视频随机颜色弹幕效果。
二、实验步骤
1.项目创建及准备
1.1创建项目
按之前的步骤，创建新的项目
1.2删除无关文件和路径
1.3准备素材
创建一个images文件夹，用于存放实验会用到的图片素材
本次实验会使用到的四个视频地址：
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.视图设计
2.1导航栏设计
在app.json里进行导航栏的设计
2.2页面设计
按此页面设计图，对index.wxml进行页面设计，本次实验会使用到组件；
2.2.1 视频播放器
使用video组件，controls属性提供对视频的播放、暂停、音量等组件
在wxss中设置对video的属性，因为此页面仅有一个video组件，所以不需要额外设计样式类，直接对video设计；
2.2.2弹幕区域
使用view组件实现一个单行的文本框，用于弹幕的输入和发送；
使用了样式danmuArea，所以要在wxss中进行定义；
2.2.3视频列表
使用view组件实现一个可扩展的多行区域，每行包含一个播放图标和一个视频标题文本，后续使用wx：for循环添加内容；
wxss中具体设计：
3.逻辑设计
3.1更新播放列表
对播放列表的组件增加wx：for属性，用于渲染展示列表；
此处的list是循环的内容，将1.3中准备的list放在index.js的data中；
为组件增加src属性；
3.2点击播放视频
对于之前的视频列表，需要为其增加data-url属性和bintap属性，分别用来记录视频的地址和绑定发送弹幕的函数。
先在js文件的onLoad函数中创建视频上下文，用于控制视频的播放和停止。
其中 wx.createVideoContext ：创建并返回 video 上下文 videoContext 对象。
videoCtx应该就为该页面的一个对象，myVedio是wxml中组件使用的id，这样进行了绑定；
有如下操作：
videoCtx.play() 播放视频
videoCtx.pause() 暂停视频
videoCtx.stop() 停止视频
videoCtx.seek(number position)跳转到指定位置
videoCtx.sendDanmu(Object data)发送弹幕
videoCtx.playbackRate(number rate)设置倍速播放
videoCtx.requestFullScreen(Object object)进入全屏
videoCtx.exitFullScreen()退出全屏
在index.js中自定义playVideo函数
视频的播放：
3.3弹幕的发送
对组件添加enable-danmu 和danmu-btn属性，用于允许发送弹幕和显示“发送弹幕”按钮。
为文本输入框朱家bindinput属性，用于获取弹幕文本内容；
为按钮增加bindtap属性，用于触发点击事件；
在js的data中加入变量danmuTxt: ‘’
用于记录得到的弹幕文本
编写两个函数
此时小程序里可以发送红色的弹幕：
可以为弹幕的颜色进行随机，编写一个函数产生随机颜色：
注意：此函数写在js文件的page外部
再修改发送弹幕的函数即可；
三、程序运行结果
可以正常的播放和发送、显示彩色弹幕；
可以切换视频，进行播放
四、问题总结与体会
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。
1.在3.1步时使用wx：for循环会出现该warning
在网络上查找原因后，发现官方更新了写法，改为wx:key='index’即可
2.在3.2步，进行视频播放和切换时，出现[渲染层错误]的报错，
按网上的解决方法将调试基础库的版本调高，出现了更多的错误。。
在多次切换的情况下，会有更多的报错，可能是视频的加载具有延迟，不能瞬间响应；
但不会影响视频的播放和切换，在网络上还没有找到问题的解决方式；
PS:本次博客对图片大小进行了调整,排版上更加美观了!