My Fourth Miniprogram~-CSDN博客

本文链接：https://blog.csdn.net/m0_74134526/article/details/141608436

一、实验目标

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

二、实验步骤

1、寻找可在线播放的视频

首先寻找可以在线播放的视频并复制视频链接作为视频调用接口。如下。

2、页面排版

在此我们想实现包含四个视频的列表，因此可将整体页面分为视频播放区域、弹幕编辑区域和视频列表区域。

/*index.wxml*/
<video id='myvideo' controls src='{{src}}' enable-danmu danmu-btn></video>

<view class="danmu">
  <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
  <button bindtap="sendDanmu">发送弹幕</button>
</view>

<view class="videolist">
  <view class="videobar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.myurl}}" bindtap="playVideo">
  <image src="/images/on.png" class="icon"></image>
  <text>{{item.title}}</text>
</view>
</view>

在此解释视频列表中多个视频行的简便排版方式。当列表中的元素数量较多时，采用一个一个view复制定义的方式极其冗杂，因此我们采用wx:for="{{list}}"和wx:key="video{{index}}"的方式进行重复循环排布/前者是实现了将list数组中的数据进行循环排置，后置实现了index的递增，每循环一次，index自动加1。

同时，item是小程序开发内置函数，为循环时所在循环区域里的数据主体，可利用item指向引用主体数据中的各个元素。

3、页面美化

在index.wxss文件中对页面中各组件的位置、属性等进行重新安排，保证页面美观。

/* pages/index.wxss */
.videobar{
  width: 95%;
  display: flex;
  flex-direction: row;
  margin:10rpx;
  border-bottom: 1rpx solid #987938;
  color: goldenrod;

}
.videolist{
  width: 100%;
  min-height: 400rpx;
  display: flex;
  flex-direction: column;
  justify-content: left;
}
video{
  width: 100%;
}
.danmu{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: space-around;
}
input{
  height: 100rpx;
  border:1px solid #987938;
  flex-grow: 1;
}
button{
  height: 100rpx;
  color: #ffffff;
  background-color: #987938;
}
.icon{
  width:70rpx;
  height: 70rpx;
  margin:20rpx;
}
text{
  font-size: 45rpx;
  color:#987938;
  margin:20rpx;
  flex-grow:1;
}

在此着重解释flex-grow属性。flex-grow:1;用于在同一行中，在其他组件的大小属性不变的情况下，使目标组件占据此行中其他剩余空间。

4、逻辑实现

（1）点击视频列表对应播放

在上述index.wxml代码中已经展现bindtap等点击后牵扯的相关操作，因此，此处直接分析实现相关操作的逻辑代码。

/*index.js*/
playVideo:function(e){
  // console.log(e.currentTarget.dataset.url);
  this.videoCtx.stop()
  this.setData({
    src:e.currentTarget.dataset.url
  })
    this.videoCtx.play()
  },

  onLoad:function(options) {
    this.videoCtx=wx.createVideoContext("myvideo")
  },

onLoad为用于监听页面功能的生命周期函数，此处用于监听视频区域变化。

playVideo函数为自定义的用于进行视频播放函数。首先用VideoCtx自带的stop函数停止原有视频播放。之后利用setData进行对应myurl对src的赋值（src为用于传递视频src的动态随机变量）并进行视频的播放。

其中值得一提的是，不要打错单词！！！！（本人深受此问题的荼毒，找了一个半小时的bug发现是由于把setData写成setDate导致！！！！）

（2）发送多彩弹幕功能

/*index.js*/
  getDanmu: function(e){
    this.setData({
      danmuTxt: e.detail.value
    })
  },

//  sendDanmu: function(e){
//    let text = this.data.danmuTxt;
//    this.videoCtx.sendDanmu({
//      text:text,
//      color:'red'
//    })
//  },

 sendDanmu: function(e){
  let text = this.data.danmuTxt;
  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('')
   }
  this.videoCtx.sendDanmu({
    text:text,
    color:getRandomColor()
  })
},

getDanmu函数实现了从文本获取框中获取用户输入的弹幕内容的功能，代码中注释掉的sendDanmu函数实现了发送指定颜色的弹幕内容至视频页面的功能。为了追求更丰富多彩的弹幕，我们在sendDanmu函数中定义了getRandomColor函数。由于界定颜色的rgb编码由#加六位数字实现，一二位、三四位、五六位分别表示红黄蓝三原色的比例数，用十六进制进行表示。因此通过rgb编码原理我们可以随机生成各种颜色用于实现随即色彩弹幕的发送。