您的位置:58编程 > 微信小程序弹幕功能 微信小程序 扩展组件·小程序弹幕组件

微信小程序弹幕功能 微信小程序 扩展组件·小程序弹幕组件

2023-03-13 16:33

微信小程序弹幕功能 微信小程序 扩展组件·小程序弹幕组件

微信小程序弹幕功能

微信小程序弹幕功能是一种新型的交互方式,它可以让用户在小程序中发送弹幕,从而更好地与其他用户进行交流。

微信小程序弹幕功能的实现原理是将用户发送的弹幕信息存储到服务器上,然后将这些信息传递到小程序客户端,最后在小程序中显示出来。

// 向服务器发送弹幕数据
wx.request({
  url: 'https://www.example.com/sendBarrage', // 弹幕发送接口
  data: {
    content: barrageContent // 弹幕内容
  },
  success (res) {
    console.log(res.data) // 返回数据,根据业务需要处理。
  }
})

 // 接收服务器返回的弹幕数据  
wx.onSocketMessage(function (res) {  
  let data = JSON.parse(res.data);  
  if (data && data.type === 'barrage') {  
    let barrageList = that.data.barrageList;  
    barrageList.push(data);  
    that.setData({  
      barrageList: barrageList  
    });  
  }  
});  

微信小程序弹幕功能不仅能够让用户之间进行交流,而且还能够带来一定的增值服务。例如,当用户在小程序中发布一条新闻时,其他用户也可以在该新闻下面留言评论;当电影、电视剧、体育赛事直播时,也可以使用弹幕来表达对话题的看法。

此外,微信小程序弹幕功能还能够带来一定的增益效益。例如,当文章、视频、直播内容出现时,使用者之间的互助性评论会使内容得到快速传播、快速流传、快速传承。此外,使用者之间的互助性评论也会使内容得到快速回馈、快速反馈、快速回复。

微信小程序 扩展组件·小程序弹幕组件

Barrage for MiniProgram

小程序弹幕组件。通过 view 的 transform 移动弹幕,覆盖在 原生组件上时,请确保组件已经同层化。参考用例

使用方法

  1. npm 安装
npm install --save miniprogram-barrage
  1. JSON 组件声明
{
  "usingComponents": {
    "barrage": "miniprogram-barrage",
  }
}

  1. wxml 引入弹幕组件
<video class="video" src="{{src}}">
  <barrage class="barrage"></barrage>
</video>
  1. js 获取实例
 Page({
  onReady() {
    this.addBarrage()
  },
  addBarrage() {
    const barrageComp = this.selectComponent(".barrage")
    this.barrage = barrageComp.getBarrageInstance({
      font: "bold 16px sans-serif",
      duration: 10,
      lineHeight: 2,
      mode: "separate",
      padding: [10, 0, 10, 0],
      tunnelShow: false
    })
    this.barrage.open()
    this.barrage.addData(data)
  }
 })

配置

Barrage 默认配置

{
  duration: 10, // 弹幕动画时长 (移动 2000px 所需时长)
  lineHeight: 1.2, // 弹幕行高
  padding: [0, 0, 0, 0], // 弹幕区四周留白
  alpha: 1, // 全局透明度
  font: "10px sans-serif", // 全局字体
  mode: "separate", // 弹幕重叠 overlap  不重叠 separate
  range: [0, 1], // 弹幕显示的垂直范围,支持两个值。[0,1]表示弹幕整个随机分布,
  tunnelShow: false, // 显示轨道线
  tunnelMaxNum: 30, // 隧道最大缓冲长度
  maxLength: 30, // 弹幕最大字节长度,汉字算双字节
  safeGap: 4, // 发送时的安全间隔
  enableTap: false, // 点击弹幕停止动画高亮显示
}

弹幕数据配置

{
  color: "#000000", // 默认黑色
  content: "", // 弹幕内容
  image: {
    head: {src, width, height}, // 弹幕头部添加图片
    tail: {src, width, height}, // 弹幕尾部添加图片
    gap: 4 // 图片与文本间隔
  }
  
}

接口

barrage.open() // 开启弹幕功能
barrage.close() // 关闭弹幕功能,清空弹幕
barrage.addData() // 添加弹幕数据
barrage.setRange() // 设置垂直方向显示范围
barrage.setFont() // 设置全局字体
barrage.setAlpha() // 设置全局透明度
barrage.showTunnel() // 显示弹幕轨道
barrage.hideTunnel() // 隐藏弹幕轨道

说明

  1. 通过 canvas 实现弹幕组件时,对于低版本基础库由于缺失 raf 接口,动画效果不够流畅。
  2. 2.9.0 起小程序新的 canvas 接口可替代 view 的实现。


阅读全文
以上是58编程为你收集整理的微信小程序弹幕功能 微信小程序 扩展组件·小程序弹幕组件全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58编程 58biancheng.com 版权所有 联系我们
桂ICP备12005667号-32 Powered by CMS