首页 > 编程语言> > 微信小程序：常用功能7——小程序视频组件中的弹幕功能

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

2021-03-23 12:31:33 作者：互联网

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

  onl oad: 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)
      }
    })
  },

查询到了，并且成功放入danmu_array
在这里插入图片描述
这时页面中的弹幕却没了，我猜想应该弹幕属性不支持动态更改数据吧。

去百度查了一下没有找到结果，所以我觉得到这一步就觉得没有继续探索的必要了。有大神遇到过这个问题吗？教教：）

需要这个功能的朋友可以在微信开放文档微信小程序组件中研究一下，我想的是偷懒的方法，也研究不出结果的话建议大家使用其他方法吧，看有些大神利用css将查询到的弹幕在页面中显示了，查询方法跟我上边讲的基本类似，唯一不同的就是让文字动起来吧。

而且官方写的弹幕功能利用到了video组件中的id，我比较懒，跟我想的不一样我就不做研究了，大家可以详读一下，另外看其他教程也没有感觉到动态，就只有最初始设定的data，我觉得还是组件不纯属的原因0 0.。

我不是专业程序工作者，在这里是把我的小程序设计经验分享给大家。如果其中有用词不当的地方，请大家留言指正，我们共同学习。
更多设计、功能的学习经验，大家也可以去我的公众号查看！

————

标签：res,color,微信,程序,danmu,time,console,弹幕
来源： https://blog.csdn.net/m0_51592186/article/details/115114096