一、实验目标

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

二、实验步骤

2.1 导航栏设计

将导航栏标题改为口述校史，颜色改为金棕色。代码即图片如下。

"window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "口述校史",
    "navigationBarBackgroundColor": "#987938"
  }

2.2 视频组件设计

在pages/index/index.wxml文件中添加<video id='myVideo'controls></video>，并且在pages/index/index.wxss中设置视频组件样式，将组件宽度设计为100%。

video{
  width:100%;
}

2.3 弹幕区域设计

设计弹幕发送区域，包含文本输入框和发送按钮，并且把其颜色设计为金棕色，和导航栏颜色相对应。

2.4视频列表设计

使用<view>组件是心啊一个可扩展的多行区域，每行包含一个播放图标和要给视频标题文本，先设计第一行效果。

2.5 更新播放列表

在<view class=’videoBar’>组件中添加wx:for属性，改写为循环列表。并且在index.js中追加list数组，将数据存放到代码中。

<!-- 视频列表  -->
<view class='videoList'>
  <view class='videoBar' wx:for='{{list}}' wx:key='video{{index}}' >
    <image src='/images/play.png'></image>
    <text>{{item.title}}</text>
  </view>
</view>

2.6 点击播放视频

在<view class=’videoBar’>组件中添加添加data-url属性和bindtap属性，记录每行视频的播放地址和进行点击触发视频播放。在index.js中添加自定义函数playVideo，该函数用于视频的播放与暂停。

<!-- 视频列表  -->
<view class='videoList'>
  <view class='videoBar' wx:for='{{list}}' wx:key='video{{index}}' data-url='{{item.videoUrl}}' bindtap='playVideo'>
    <image src='/images/play.png'></image>
    <text>{{item.title}}</text>
  </view>
</view>

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

2.7 添加彩色弹幕

在index.wxml中的区域一视频播放器<view>组件添加enable-danmu和danmu-btn属性，允许发送弹幕和显示“发送弹幕”的按钮。在文本输入框中追加bindput属性，用于获取文本内容。并且为了生成随机颜色的弹幕，我们添加一个getRandonColor函数。

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:color
    rgb.push(color)
  }
  return '#'+rgb.join('')
}

三、程序运行结果

真机调试，一切进程正常。

四、问题总结与体会

问题与解决方案

在编辑区域三视频列表代码时，我忘记了在.wxss文件中类名前面要加.，代表是类名选择器。在与模板代码对比和询问AI后发现了这出错误。会出现并错变量，导致程序无法运行，或者运行没有结果的问题。这种情况通过查看编译器的报错，再返回到模板代码，与其进行对比，从而发现问题。

收获

通过本次实验，我学会了使用微信开发工具的循环结构wx:for，循环可以帮助我们快速的进行重复或相似工作，节约时间。与此同时，我也反思自己，在编写代码时，一定要细心，不要为了速度而忽略正确性，导致很多时间都花费在检查错误上。