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

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

最强的森

5330人浏览 · 2021-03-23 12:22:35

最强的森 · 2021-03-23 12:22:35 发布

微信小程序：常用功能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)
      }
    })
  },