微信小程序 - 选项卡切换 - 视频播放 - (图解+代码流程)

在微信小程序-首页制作的基础上制作今天的内容
首页制作 - 路径

一、选项卡切换效果图

1.选项卡切换 .wxml代码

"toplist">
  "toptext {{xztext==0?'active':''}}" bind:tap="topclik" data-index="0">最新资讯
  "toptext {{xztext==1?'active':''}}" bind:tap="topclik" data-index="1">基地新闻
  "toptext {{xztext==2?'active':''}}" bind:tap="topclik" data-index="2">就业新闻



"{{xztext}}" bindchange="neirclik" circular="true" class="newtext">
  0
  
    "height: {{screenHeight}}px;" bindscrolltolower="ctqis">
        "jdtext" wx:for="{{35}}" wx:key="index">
        "hopuo">厚浦数字成功入选湖南省产教融合企业
        "shijian">2024-7-9
      
    
  
  2

2.选项卡切换 .wxss代码

/* 头部选项卡切换区域布局 */
.toplist{
  display: flex;
  margin-top: 20rpx;
}
.toptext{
  width: 250rpx;
  text-align: center;
  border-bottom: 2rpx solid grey;
}
.active{
  border-bottom: 4rpx solid green;
}
/* 内容区域布局 */
.newtext{
  height: 980rpx;
}
.jdtext{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 15rpx 20rpx 15rpx;
  box-sizing: border-box;
  border-bottom:2rpx dashed gray;
}
.hopuo{
  font-size: 28rpx;
}
.shijian{
  font-size: 26rpx;
  color: gray;
}

3.选项卡切换 .js代码

/**
   * 页面的初始数据
   */
  data: {
    xztext:0,/*初始化时，选中的选项卡索引为0*/ 
    screenHeight:''/*屏幕高度，这里初始化为空字符串，可能用于后续动态设置屏幕高度*//**/
  },
  //选项卡点击切换
  topclik:function (e) {
    // console.log(e);
    if (e.currentTarget.dataset.index==this.data.xztext) {
      return false;/*如果点击的选项卡就是当前选中的，则不执行任何操作（防止重复点击同一选项卡时的不必要的处理）*/ 
    } else {
      this.setData({
        xztext:e.currentTarget.dataset.index/*更新选中的选项卡索引*/ 
      })
    }
  },
  //滑动选项卡内容跟着滑动
  neirclik:function (e) {
    // console.log(e);
    if (e.detail.current==this.data.xztext) {
      return false;
    } else {
      this.setData({
        xztext:e.detail.current
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const windowInfo = wx.getWindowInfo()
    console.log(windowInfo.screenHeight)
    this.setData({
      screenHeight:windowInfo.screenHeight
    })
  },
  ctqis:function(e){
    wx.showToast({
      title: '到底没有了~'
    })
  },

neirclik 函数

功能描述：
此函数处理滑动事件，当滑动内容区域时触发。目的是使顶部的选项卡跟随内容区域的滑动而变化选中状态。
e.detail.current：
表示当前滑动到的页面索引或位置，这是从滑动事件的细节(detail)中获取的信息。
如果当前滑动到的索引与顶部选项卡当前选中的索引(this.data.xztext)相同，则直接返回false，避免重复处理。
否则，通过setData方法更新xztext的值，使得顶部选项卡的选中状态与滑动内容同步。

onLoad 函数

功能描述： 这是小程序页面的生命周期函数，当页面加载时会被调用。
wx.getWindowInfo()：
调用微信API获取窗口信息，包括屏幕高度、宽度等。
通过console.log打印出屏幕的高度。
使用setData将获取到的屏幕高度设置到screenHeight数据字段中，这可用于动态设置页面元素的样式，确保良好的适配性。

ctqis 函数

功能描述：
该函数展示了一个提示信息，通常用于告知用户已经滑动到了列表的底部，没有更多内容可加载。
wx.showToast()：
调用微信API显示一个短暂的提示框，参数title定义了提示的内容，在这里是“到底没有了~”。

二、视频播放效果图

1.视频播放 .wxml代码

微信小程序中的视频组件 (< video>) 是用于在小程序页面中嵌入和控制视频播放的功能模块。它支持多种格式的视频文件播放，并提供了丰富的属性来自定义播放行为和界面。以下是一些关键属性和方法的概览：了解更多组件

视频组件

autoplay 含义： 布尔值，设置视频是否自动播放。

说明： 如果设置为true，视频在页面加载完成后将立即开始播放（需注意，由于浏览器策略限制，某些情况下 autoplay 可能不会生效，例如用户未与页面进行过交互）。

show-fullscreen-btn 含义： 布尔值，是否显示全屏按钮。

说明： 如果设置为true，视频右下角会显示一个按钮，允许用户点击后全屏观看视频。

show-play-btn 含义： 布尔值，是否显示播放按钮。

说明： 当视频暂停或初始加载时，若此属性设为true，则会在视频封面或暂停状态下显示播放按钮，提示用户点击播放。

enable-auto-rotation 含义： 布尔值，是否允许视频随手机旋转自动调整方向。

说明： 如果设为true，视频播放时会根据手机的物理方向自动调整播放画面的方向，如横屏或竖屏播放。

danmu-btn 含义： 布尔值，是否显示弹幕开关按钮。

说明： 开启后（设为true），视频下方会有一个按钮，允许用户开启或关闭弹幕功能，适用于支持弹幕互动的视频内容。

enable-danmu 含义： 布尔值，是否启用弹幕功能。

说明： 即使danmu-btn显示了弹幕按钮，也需要通过此属性（设为true）来实际启用弹幕发送和显示的功能。用户可以在视频播放时发送和查看弹幕。

其他常用属性：

loop: 布尔值，是否循环播放。
muted: 布尔值，是否静音播放。
object-fit: 设置视频的缩放方式，如 “contain”
或 “cover”。 poster: 设置视频封面的图片URL。

事件：

bindplay: 播放开始时触发。
bindpause: 暂停时触发。
bindended: 播放结束时触发。
bindfullscreenchange: 全屏状态发生变化时触发。

  
  
    请文明发言：
  
  发送弹幕
  
  
    
    {{item.title}}
  

1.视频播放 .wxss代码

/* 发送弹幕区域布局 */
.dmtext{
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}
.dmtext input{
  height: 80rpx;
  width: 500rpx;
  border: 2rpx solid goldenrod;
  padding-left: 15rpx;
  box-sizing: border-box;
}
.dmbtn{
  margin-top: 20rpx;
  background-color: rgb(207, 149, 0);
  color: white;
}
/* 切换视频播放区域布局 */
.videolist{
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx 20rpx 20rpx;
  box-sizing: border-box;
  border-bottom: 2rpx dashed grey;
}
.videolist image{
  width: 90rpx;
  margin-right: 20rpx;
}

3.视频播放 .js代码

主要实现以下功能：

1.动态发送用户输入的弹幕到视频上，并且每个弹幕颜色随机。
2.允许用户点击切换视频源，
3.停止当前播放，更换视频URL后重新播放新视频。页面加载和渲染的生命周期管理，包括视频上下文的初始化。

function getRandomColor() {
  const 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({

  /**
   * 页面的初始数据
   */
  srz:"",
  data: {
    vurl:"https:视频路径.mp4",
    list:[{
      title:"河南厚溥有限公司企业发展历程",
      videoUrl:"https:视频路径.mp4"
    },{
      title:"河南厚溥学生学习团建视频",
      videoUrl:"https:视频路径.mp4"
    },{
      title:"河南厚溥学员点点滴滴的记忆",
      videoUrl:"https:视频路径.mp4"
    }]
  },

  srdanmu:function (e) {
    // console.log(e);
    this.srz=e.detail.value;
  },
  fsdanmu:function () {

    //将文本框最后输入的完整内容输出到 id为myvideo的播放器上
    this.videoContext.sendDanmu({
      text:this.srz,
      color:getRandomColor()
    })
  },
  qieclick:function (e) {
    // console.log(e);
    //暂停视频
    this.videoContext.stop();
    //当前点击的视频源地址
    this.setData({
      vurl:e.currentTarget.dataset.url
    })
    //重新播放新的视频
    this.videoContext.play();
  },
    /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.videoContext=wx.createVideoContext('myvideo')
  },

随机颜色生成函数 getRandomColor()

这个函数用于生成一个随机的十六进制颜色码。它通过生成三个0-255之间的随机数（分别对应RGB三原色），并将每个数值转换成十六进制表示，不足两位的前面补0，最后拼接成"#RRGGBB"格式的颜色字符串。

页面初始数据

srz： 一个空字符串，可能用于存放用户输入的弹幕文本。
data： 包含页面渲染所需的数据，包括：
vurl： 默认视频播放的URL。
list： 一个数组，包含多个视频信息对象，每个对象有标题(title)和视频链接(videoUrl)。

弹幕相关函数

srdanmu(e)： 处理用户在弹幕输入框中输入内容的事件，将输入值赋给变量srz。
fsdanmu()： 发送弹幕的功能实现。它从srz获取用户输入的弹幕文本，并调用getRandomColor()获取随机颜色，然后通过videoContext.sendDanmu()方法将弹幕发送到ID为’myvideo’的视频播放器上。

视频切换函数 qieclick(e)

根据用户点击事件(e)，暂停当前播放的视频(stop()),更新视频播放地址(vurl)为点击的视频源地址，然后重新开始播放新视频(play()). 生命周期函数

生命周期函数

onLoad(options)： 页面加载时触发的生命周期函数，此处未实现具体逻辑。
onReady()： 页面初次渲染完成时触发。在此函数中，通过wx.createVideoContext(‘myvideo’)创建了一个指向ID为’myvideo’的视频上下文对象，并将其存储在this.videoContext中，以便在其他函数中控制视频播放。