微信小程序：常用功能8——小程序视频组件中的弹幕功能

最新推荐文章于 2024-08-15 23:03:45 发布

最强的森

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量5.1k

点赞数 2

分类专栏：小程序微信小程序云开发文章标签：小程序 javascript 数据库

本文链接：https://blog.csdn.net/m0_51592186/article/details/115114096

版权

小程序同时被 2 个专栏收录

20 篇文章 21 订阅

订阅专栏

微信小程序云开发

4 篇文章 0 订阅

订阅专栏

微信小程序：常用功能8——小程序视频组件中的弹幕功能

昨天我们刚说了微信小程序的视频组件和分享功能微信小程序：常用功能8——在小程序添加视频组件，并将页面分享到朋友圈，今天想把弹幕功能说一下，但是感觉弹幕功能跟我想的不一样，我想把弹幕信息放在云数据库中实现动态更新，但是事与愿违，我觉得是这个功能还不太纯熟，大家有什么解决方法可以在评论教教我。
下面就说一下简单的实现方法和我的问题。

视频组件中的弹幕功能

在这里插入图片描述
弹幕功能主要需要的属性就是 danmu-list弹幕列表、danmu-btn弹幕显示按钮和 enable-danmu是否显示弹幕。

  <video 
      id="myVideo" 
      src="视频链接" 
      style="width:100%;margin-top:20px;"
      autoplay danmu-list="{{danmu_array}}" danmu-btn enable-danmu bindtimeupdate="getTime" >
  </video>

加上这三个属性，页面中就可以有弹幕功能了。
在这里插入图片描述
此时，我们在js页面data中给danmu-list属性中danmu_array添加数据


Page({

  /**
   * 页面的初始数据
   */
  data: {
    img: 'cloud://dfht-z0r2u.6466-dfht-z0r2u-1303909242/wenzhang/qingxujiluguan_content.jpg',
    danmu_array: [
      {
        text: '1111', // 出现的文字
        time: 1, // 出现的时间
        color: '#ddd', // 出现文字的颜色
      },
      {
        text: '1211222', // 出现的文字
        time: 3, // 出现的时间
        color: '#ddd', // 出现文字的颜色
      }
    ],
  },

这样，弹幕就出现了
在这里插入图片描述
所谓弹幕功能不就是动态发送弹幕并显示出来吗，于是我利用云数据库建了个表，用来存放弹幕。

利用云函数向表中插入数据。

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init();
const db = cloud.database();//注意，不是wx.cloud.database()，这种是小程序端操作数据库的写法。云端没有“wx.”

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()//目的：获取_openid

  try {
    return await db.collection("danmu").add({
      data: {
        openid: wxContext.OPENID,// 获取用户openid
        text: event.inputValue,
        color: event.color,
        time: event.time,
      }
    })
  } catch (e) {
    console.log(e)
  }
}

其中字体颜色color的值用了官方提供的随机颜色获取函数，成功

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('')
  },

视频时间节点time的值用了bindtimeupdate属性实时获取弹幕的时间节点，并且在js页面动态获取，成功
在这里插入图片描述
html

js

 getTime(e){
    // console.log(e.detail.currentTime)
    this.time = e.detail.currentTime
    // console.log(this.time)
  },

然后文字在前端输入，js接收并将获取到的color和time利用云函数写到数据库

  <video 
      id="myVideo" 
      src="https://6466-dfht-z0r2u-1303909242.tcb.qcloud.la/wenzhang/qingxujiluguan.mp4?sign=3081503c8473cef22d8b5d0d7f303ba2&t=1615345286" 
      style="width:100%;margin-top:20px;"
      autoplay danmu-list="{{danmu_array}}" danmu-btn enable-danmu bindtimeupdate="getTime" 
    ></video>
  <input bindinput="bindInputBlur" type="text" placeholder="  在此处输入弹幕内容" style="margin-top:20px;border:1px solid #ddd;height:30px;border-radius:2px;" />
  <button style="margin: 30rpx auto"  bindtap="bindSendDanmu" type="primary">发送弹幕</button>


  bindInputBlur(e) {
    this.inputValue = e.detail.value
    console.log(this.inputValue)
  },
  bindSendDanmu() {
    this.color = this.getRandomColor()
    var that = this
    wx.cloud.callFunction({
      name: 'danmu',
      data: {
        inputValue: this.inputValue,
        color: this.color,
        time: this.time,
      },
      //data字段表示新建的JSON数据
      success(res) {
        console.log("云函数调用成功", res)
        that.getDanmu()
      },
      fail(res) {
        console.log("云函数调用失败", res)
        wx.showToast({
          icon: 'none',
          title: '请检查网络',
        })
      },
    })
  },

到这里完全没问题，现在只剩下在进入页面时查询弹幕列表并且放入data了

  onLoad: function (options) {
    this.getDanmu();
  },
  
  getDanmu(){
    var that = this;
    wx.cloud.callFunction({
      name: "select_danmu",
      success(res){
        console.log("弹幕查询成功",res)
        that.setData({
          danmu_array: res.result.data
        })
        // console.log(that.danmu_array)
      },
      fail(res){
        console.log("请检查网络",res)
      }
    })
  },