项目三：视频播放器

目标#

重点#

for循环数组#

　　在组件上使用“wx:for”控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为“index”，数组当前项的变量名默认为“item”

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    array:[
      {name:"狗一"},
      {name:"狗二"},
      {name:"狗三"}
    ]
  },
。。。。。
<!--pages/index/index.wxml-->
<view wx:for="{{array}}">
  {{index}}:{{item.name}}
</view>

取别名：使用“wx:for-index”可以指定数组当前下标的变量名，使用“wx:for-item”可以指定数组当前元素的变量名；

<!--pages/index/index.wxml-->
<view wx:for="{{array}}" wx:for-index="a" wx:for-item="b">
  {{a}}:{{b.name}}
</view>
。。。。

　　wx:for进行嵌套：

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    array:[
      1,2,3
    ]
  },
。。。。。。。
<!--pages/index/index.wxml-->
<view wx:for="{{array}}"  wx:for-item="a">
  <view wx:for="{{array}}"  wx:for-item="b">
    <view wx:if="a <= b">
      {{a}} * {{b}} = {{a*b}}
    </view>
  </view>
</view>

　　wx:key 的使用：

在不使用 wx:key的情况下, 如果 array 内的数据发生改变，则会重新创建每个Item对象然后渲染列表（费时费力）
在使用 wx:key的情况下，如果array中的数据发生改变，只是将对应的对象重新排序。未发生变化的对象，不会重新创建

使用情况：

　　第一种：wk:key="字符串"，代表在for循环的array中的item的某个property，该property的值（不是property）需要是列表中唯一的字符串或者或者数字

　　第二种：wk:key="*this",代表在for循环中的item自身，这种表示需要item本身就是一个唯一的字符串或者数字

input组件 #

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

用到的属性：

　　value：输入框的初始内容

　　placeholder：输入框为空时占位符

　　bindinput：键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，处理函数可以直接 return 一个字符串，将替换输入框的内容。

vide组件 #

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/video.html

　　<video>是视频组件，可用于播放本地或网络视频资源，其默认宽度为300rpx、高度为225rpx

用到的属性：

　　src：要播放视频的资源地址，支持网络路径、本地临时路径、云文件ID

　　controls：是否显示默认播放控件（播放/暂停按钮、播放进度、时间）

　　enable-danmu：是否展示弹幕，只在初始化时有效，不能动态变更

　　danmu-btn：是否显示弹幕按钮，只在初始化时有效，不能动态变更

生成随机颜色的函数#

//生成随机颜色
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("")
}

代码#

<!-- pages/index/index.wxml -->
<!--视频播放器-->
<video id="myVideo" controls src='{{src}}' enable-danmu danmu-btn></video>
<!--弹幕区域-->
<view  class="danmuArea">
  <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.videoUrl}}" bindtap="playVideo">
    <image src="/images/play.jpg"></image>
    <text>{{item.title}}</text>
  </view>
</view>

/* pages/index/index.wxss */
video{
  width: 100%;
}
.danmuArea{
  display: flex;
  flex-direction: row;
}
input{
  border: 1rpx solid #987938;
  height: 100rpx;
  flex-grow: 1; /*扩展多余空间*/
}
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: 10rpx;
}
text{
  font-size: 45rpx;
  color: #987938;
  margin: 10rpx;
  flex-grow: 1;
}

// pages/index/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:color
    rgb.push(color)
  }
  return "#"+rgb.join("")
}
Page({
  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {
        id:"111",
        title:"第一个视频",
        videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
      },    //腾讯大学视频地址
      {
        id:"222",
        title:"第二个视频",
        videoUrl:"http://***.mp4"    我用的是自己服务器上的视频
      },
      {
        id:"333",
        title:"第三个视频",
        videoUrl:"http://*****.mp4"
      },
      {
        id:"444",
        title:"第四个视频",
        videoUrl:"http://****.mp4"
      }
    ],
    src:"",
    danmuTxt:""
  },
  getDanmu: function (e) {
    this.setData({
      danmuTxt: e.detail.value
    })
  },
  sendDanmu: function (e) {
    let text = this.data.danmuTxt
    this.videoCtx.sendDanmu({
      text: text,
      color: getRandomColor()
    })
  },
  playVideo: function (e) {
    this.videoCtx.stop()
    // 停止播放之前正在播放的视频
    this.setData({
      src: e.currentTarget.dataset.url
    })
    // 更新视频地址
    this.videoCtx.play()
    // 播放新的视频
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')  //创建 video 上下文 VideoContext 对象
},
。。。。。。。