实验准备工作

实验启动前，务必预先备妥四个视频素材的定位。这些视频将充当小程序播放清单的素材来源。视频定位必须以规范格式存入程序，供后续调用和运用。

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' 
            }
        ]

项目初始化步骤

开发微信小程序工程时，必须实施若干预备步骤。开头需在微信构造师里建立工程，接下来要开展以下整理事务：

1. 删除无用的默认文件夹和文件

2. 清空所有自动生成的示例代码

3. 在js文件中使用page关键词自动生成页面框架

4. 在app.js中使用app关键词生成应用框架

5. 新建专门的资源文件夹用于存放播放器相关图标

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#987939",
    "navigationBarTitleText": "口述校史"
  }
}

界面设计实现

调整导航栏的形态需借助app.json配置文档实施，用以确立小程序的初始视觉形态，WXML部分负责构建视频播放界面，涵盖播放窗口、操控装置以及弹幕交互空间，WXSS部分致力于制定页面视觉规范，旨在提升播放工具的视觉吸引力与操作便捷度。

核心功能开发

    
    发送弹幕



    
        
        这是一个测试标题
    

1. 视频列表功能

/**index.wxss**/
/*视频组件*/
video{
    width:100%;
}
/*弹幕区域样式*/
.danmuArea{
    display: flex;
    flex-direction: row;
}
/*文本输入框*/
input{
    border:1rpx solid #987938;
    flex-grow: 1;
    height: 100rpx;
}
/*按钮*/
button{
    color:white;
    background-color: #987938;
}
/*视频列标*/
.videoList{
    width: 100%;
    min-height: 400rpx;
}
.videoBar{
    width:95%;
    display: flex;
    flex-direction: row;
    border-bottom: 1rpx solid #987938;
    margin: 10rpx;
}
/*播放图标*/
image{
    width:70rpx;
    height:70rpx;
    margin:20rpx;
}
/*文本标题*/
text{
    font-size:45rpx;
    color: #987938;
    margin:20rpx;
    flex-grow:1;
}

在程序模块的脚本部分设定视频素材库，把预备好的影像链接载入播放次序表。另外调整页面布局文件，达成播放次序表的呈现与转换作用。

2. 视频播放控制

增加视频播放的相关代码，达成点击播放的目的。涉及视频载入、播放状态转换等核心功能实现。

3. 弹幕系统实现

先开发基本的红色滚动文字效果。调整WXML增加文字发送区域，在JS文件里设计文字发送的流程。接着增加新功能，制作随机色彩滚动文字，务必保证专门设计的程序要放在页面代码之外。

        ·······


    {list}}'wx:key='video{{index}}'>
        
        {{item.title}}
    

程序运行效果

该小程序在开发工作告一段落后，应当可以正常展示视频清单、播放选定的视频，并且能够发送色彩缤纷的弹幕信息。用户在进行视频间的切换时，能够顺畅进行，同时享受弹幕互动带来的乐趣。

Page({
    /*页面初始化*/
    data:{
        danmuTxt:'',
        list:···
        ······
    }
}）

实验总结与心得

实验期间，碰到的一个关键障碍是随机弹幕色彩代码安放位置错误。起初，把代码放在了页面内部，造成功能失效。调试后找出症结，把代码挪到恰当位置，问题便得到解决。

本次实验收获：

    {list}}'wx:key='video{{index}}'data-url='{{item.videoUrl}}' bindtap='playVideo'>
        
        {{item.title}}
    

1. 掌握了微信小程序视频播放器的开发流程

2. 学会了视频列表的加载和切换方法

Page({
    ···
    playVideo:function(e){
        this.videoCtx.stop()
        this.setData({src:e.currentTarget.dataset.url})
        this.videoCtx.play()
    },
})

3. 实现了视频自动播放功能

4. 完成了随机颜色弹幕效果开发

整个实验流程显著提升了关于微信小程序开发的认识，尤其对于媒体组件的应用和事件处理方式有了更深的理解。这些掌握的知识和掌握的技能，为将来开展更复杂的小程序项目打下了坚实的基础。

    
    发送弹幕