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

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

作者:互联网

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