微信小程序直播+聊天+弹幕页面展示

最新推荐文章于 2024-05-11 10:23:55 发布
最新推荐文章于 2024-05-11 10:23:55 发布
阅读量5.5k 收藏 8
点赞数 1
分类专栏： PHP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49490052/article/details/117773013
版权

不大方便展示视频哈~~

在这里插入图片描述

<!--pages/contact/contact.wxml-->

<view>
  <view class="live-box">
    <video id="myVideo" class="live-video" controls src="我用的是直播回放，由于微信小程序的直播暂时只支持商家的" enable-danmu danmu-btn></video>
  </view>
  <view class="sc">
    <scroll-view scroll-y scroll-into-view='{{toView}}' >
  <!-- <view class='scrollMsg'> -->
  <block wx:key="keys" wx:for='{{msgList}}' wx:for-index="index" >

    <!-- 单个消息1 客服发出（左） -->
    <view wx:if='{{item.style=="bubble you"}}' id='msg-{{index}}' style='display: flex; padding: 3vw 11vw 2vw 2vw;'>
      <view style='width: 11vw; height: 11vw;'>
        <image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1031084171,3750714591&fm=26&gp=0.jpg'></image>
      </view>
      <view style='width: 4vw; height: 11vw; margin-left: 0.5vw; display: flex; align-items: center; z-index: 9;'>
      </view>
      <view class='leftMsg'>{{item.data}}</view>
    </view>

    <!-- 单个消息2 用户发出（右） -->
    <view wx:else id='msg-{{index}}' style='display: flex; justify-content: flex-end; padding: 2vw 2vw 2vw 11vw;'>
      <view class='rightMsg'>{{item.data}}</view>
      <view style='width: 4vw; height: 11vw; margin-right: 0.5vw; display: flex; align-items: center; z-index: 9;'>
      </view>
      <view style='width: 11vw; height: 11vw;'>
        <image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1031084171,3750714591&fm=26&gp=0.jpg'></image>
      </view>
    </view>

  </block>
  <!-- </view> -->

  <!-- 占位 -->
  <view style='width: 100%; height: 18vw;'></view>
</scroll-view>

<view class='inputRoom' style='bottom: {{inputBottom}}'>
  <!-- <image style='width: 7vw; margin-left: 3.2vw;' src='' mode='widthFix'></image> -->
  <input bindconfirm='sendClick' adjust-position='{{false}}' value='{{inputVal}}' confirm-type='send' bindfocus='focus' bindblur='blur'  bindinput="getDanmu"></input>
  
  <view class="button" bindtap="sendDanmu">发送弹幕</view>
</view>
</view>
  </view>

wxss

/* pages/live/live.wxss */
page {
  background-color: #f1f1f1;
}

.inputRoom {
  width: 100vw;
  height: 16vw;
  border-top: 1px solid #cdcdcd;
  background-color: #f1f1f1;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  z-index: 20;
}

input {
  width: 76vw;
  height: 9.33vw;
  background-color: #fff;
  border-radius: 40rpx;
  margin-left: 2vw;
  padding: 0 3vw;
  font-size: 28rpx;
  color: #444;
}

.leftMsg {
  font-size: 35rpx;
  color: #444;
  line-height: 7vw;
  padding: 2vw 2.5vw;
  background-color: #fff;
  margin-left: -1.6vw;
  border-radius: 10rpx;
  z-index: 10;
}

.rightMsg {
  font-size: 35rpx;
  color: #444;
  line-height: 7vw;
  padding: 2vw 2.5vw;
  background-color: #96EB6A;
  margin-right: -1.6vw;
  border-radius: 10rpx;
  z-index: 10;
}

.live-box {
  width: 100%;
  height: 400rpx;
  background: #000;
}

.live-video {
  width: 100%;
  height: 400rpx;
}

.button {
  text-align: center;
  width: 170rpx;
  height: 66rpx;
  line-height: 66rpx;
  margin-left: 10rpx;
  border-radius: 10rpx;
  background-color: #3478F7;
  color: azure;
  font-size: 28rpx;
}
/* .sc{
  position: absolute;
  top: 700rpx;
  bottom: 0rpx;
  opacity: 0.40;
} */

js

const app = getApp();
var socketOpen = false;
var frameBuffer_Data, session, SocketTask;
var url = 'ws://49.？？？.？？.？？？:9501';//我调用的宝塔的聊天demo
var upload_url ='请填写您的图片上传接口地址';
var inputVal = '';
var msgList = [];
var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
var keyHeight = 0;


/**
 * 初始化数据
 */
function initData(that) {
  inputVal = '';

  msgList = [{
      style: 'bubble you',
      contentType: 'text',
      data: '欢迎来到王者农药，敌军还有30秒到达战场，请做好准备！'
    },
    {
      style: 'bubble me',
      contentType: 'text',
      data: '我怕是走错片场了...'
    }
  ]
  that.setData({
    msgList,//敌军的聊天
    inputVal//我的聊天
  })
}

/**
 * 计算msg总高度
 */
// function calScrollHeight(that, keyHeight) {
//   var query = wx.createSelectorQuery();
//   query.select('.scrollMsg').boundingClientRect(function(rect) {
//   }).exec();
// }

   //生成随机颜色
   function getRandomColor() {
    let 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('')
  }

Page({

  /**
   * 页面的初始数据
   */
  data: {
    scrollHeight: '100vh',
    inputBottom: 0
  },

  getDanmu:function(event){
   
    this.setData({
      danmuTxt:event.detail.value,
      
    })
  },
  sendDanmu:function(event){
    let text = this.data.danmuTxt
    this.setData({
      inputVal : ''
    })
    this.videoCtx.sendDanmu({
    text:text,
    
      color:getRandomColor()
    })
  },
  playVideo:function(event){
    this.videoCtx.stop()
    //停止播放之前正在播放的视频
    this.setData({
      src:event.currentTarget.dataset.url
    })
    //更新视频地址
    this.videoCtx.play()
    //播放新的视频
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    initData(this);
    this.videoCtx = wx.createVideoContext('myVideo')
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    if (!socketOpen) {
      this.webSocket()
    }
  },

   // 页面加载完成
   onReady: function () {
    var that = this;
    SocketTask.onOpen(res => {
      socketOpen = true;
      console.log('监听 WebSocket 连接打开事件。', res)
    })
    SocketTask.onClose(onClose => {
      console.log('监听 WebSocket 连接关闭事件。', onClose)
      socketOpen = false;
      this.webSocket()
    })
    SocketTask.onError(onError => {
      console.log('监听 WebSocket 错误。错误信息', onError)
      socketOpen = false
    })
    SocketTask.onMessage(onMessage => {
      console.log(onMessage)
      this.data.msgList.push(JSON.parse( onMessage.data))
      
      console.log(this.data.msgList)
     this.setData({
       msgList:this.data.msgList
     })
    })
  },

  webSocket: function () {
    // 创建Socket
    SocketTask = wx.connectSocket({
      url: url,
      data: 'data',
      header: {
        'content-type': 'application/json'
      },
      method: 'post',
      success: function (res) {
        console.log('WebSocket连接创建', res)
      },
      fail: function (err) {
        wx.showToast({
          title: '网络异常！',
        })
        console.log(err)
      },
    })
  },

  // 提交文字
  submitTo: function (e) {
    let that = this;
    var data = {
      body: that.data.inputValue,
    }
    if (socketOpen) {
      // 如果打开了socket就发送数据给服务器
      console.log(data)
      sendSocketMessage(data)
    
      this.setData({
        msgList: this.data.msgList,
        inputValue: ''
      })
 
      that.bottom()
    }
  },
  bindKeyInput: function (e) {
    
    this.setData({
      inputValue: e.detail.value
    })
  },
 
  onHide: function () {
    SocketTask.close(function (close) {
      console.log('关闭 WebSocket 连接。', close)
    })
  },
 
  addImg: function () {
    this.setData({
      addImg: !this.data.addImg
    })
 
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 获取聚焦
   */
  focus: function(e) {
    keyHeight = e.detail.height;
    this.setData({
      scrollHeight: (windowHeight - keyHeight) + 'px'
    });
    this.setData({
      toView: 'msg-' + (msgList.length - 1),
      inputBottom: keyHeight + 'px'
    })
    //计算msg高度
    // calScrollHeight(this, keyHeight);

  },

  //失去聚焦(软键盘消失)
  blur: function(e) {
    this.setData({
      scrollHeight: '100vh',
      inputBottom: 0
    })
    this.setData({
      toView: 'msg-' + (msgList.length - 1)
    })

  },

  /**
   * 发送点击监听
   */
  sendClick: function(e) {
    var data = {
      body: e.detail.value,
    }
    if (socketOpen) {
      // 如果打开了socket就发送数据给服务器
      console.log(data)
      sendSocketMessage(data)
    }
   
    inputVal = '';
    this.setData({
      msgList: this.data.msgList,
      inputVal
    })
    // this.setData({
    //   msgList,
    //   inputVal
    // });


  },

  /**
   * 退回上一页
   */
  toBackClick: function() {
    wx.navigateBack({})
  }
  

})

//通过 WebSocket 连接发送数据，需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。
function sendSocketMessage(msg) {
  var that = this;
  console.log('通过 WebSocket 连接发送数据', JSON.stringify(msg))
  
  var body=JSON.stringify(msg.body)
  console.log(body.replace(/\"/g, ""))
  SocketTask.send({
    data: body.replace(/\"/g, "")
  }, function (res) {
    console.log('已发送', res)
  })
}
微信小程序直播相关内容（实时通信、弹幕）——腾讯云IM
DuBanL的博客
11-30 1859
前言 小程序我现在懂得也不是很多 现在接触的小程序也是别人写的 此篇内容仅为总结自己看别人代码学习到的一些东西以及自己解决bug的一些方法 一、小程序的直播如何实现（用户端部分） 1.如何实现直播弹幕——腾讯云的IM (如果有图片什么的还需要腾讯云的COS) IM即时通信 对象存储 在直播组件onLoad里面 调用接口 获取IM的SDKAppID （这个SDKAppID一般都是后台给的吧 具体的我也不是很清楚） 备注：相关的东西自己看SDK吧（npm下载之后 完成相应功能 然后在微信开发
微信小程序 弹幕
晏金煜的博客
04-09 4533
&lt;!--index.wxml--&gt; &lt;view class="container"&gt; &lt;view class="doommview"&gt; &lt;view style="position: absolute;width:100%;height:100rpx;background:red;top:0rpx;"&gt; &l
微信小程序 vidao实现视频播放和弹幕的功能
09-01
主要介绍了微信小程序 vidao实现视频播放和弹幕的功能的相关资料,这里提供实现代码及实现效果图，需要的朋友可以参考下
微信小程序弹幕Barrage_WeChat-master.zip
09-25
微信小程序弹幕Barrage_WeChat-master.zip
只需四个步骤几行代码，即可快速实现直播弹幕功能
heaven_1988的博客
10-18 2700
在视频直播中，互动是不可缺少、不容小觑的内容，主要包括发送弹幕、打赏、点赞等。想要快速实现这些功能，需要进行怎样的操作呢？ 其实，实现直播弹幕功能只需“四个步骤”和“几行代码”！ 现在，我们使用云巴 Javascript SDK ，手把手教你实现直播弹幕功能吧！ 步骤一：注册云巴账号 打开网址（https://yunba.io/），或直接搜索“云巴”，进行注册并登录。 步骤二：...
仿斗鱼直播的微信小程序源代码。此代码实现了首页和直播页面的开发。
05-30
1. **直播页面设计**：仿斗鱼直播的微信小程序源代码中，首页可能包含热门直播推荐、分类直播列表等元素，直播页面则可能包含主播头像、直播画面、聊天室、礼物按钮等核心功能。页面布局需符合微信小程序的设计规范...
微信小程序简易弹幕组件(uniapp)
qiansitong的博客
03-03 4280
uniapp 、弹幕组件、弹幕重叠问题
微信直播小程序前端
09-20
微信小程序采用自有的WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheets）作为视图层的描述语言，它们分别负责结构和样式。同时，JavaScript作为逻辑层的语言，用于处理业务逻辑和数据管理。开发者需要...
微信小程序-仿斗鱼app源码
06-12
【微信小程序-仿斗鱼app源码】是一个用于学习和参考的项目，它展示了如何使用微信小程序技术构建一个类似斗鱼直播平台的应用。这个源码提供了实现类似功能的代码示例，包括用户登录、直播间浏览、直播观看、礼物赠送...
049-微信小程序-仿斗鱼直播小程序.zip
最新发布
06-11
【标题】"049-微信小程序-仿斗鱼直播小程序.zip" 提供的是一个关于微信小程序开发的项目，目标是构建一个类似斗鱼直播平台的应用。这个项目可以帮助开发者了解和掌握微信小程序在实现直播功能时的具体技术与设计思路...
微信小程序开发之视频播放器带弹幕Video弹幕颜色自定义
12-08
微信小程序开发之视频播放器带弹幕Video弹幕颜色自定义
微信小程序看视频发弹幕功能
t1anH的博客
03-21 882
1. 目录结构 2.wxml <video src="cloud://cloud1-7gm9mk795e0ad905.636c-cloud1-7gm9mk795e0ad905-1310047972/digi.mp4" danmu-list="{{danmu}}" id="myVideo"></video> <input type="text" placeholder="请输入弹幕" bindinput="getcon"/> <button type=.
一个显示弹幕的小程序
El Psy Congroo
10-23 5983
指定WS_EX_LAYERED并使用UpdateLayeredWindow绘制窗口实现窗口透明
微信小程序之简单的发送弹幕操作
m0_74577714的博客
05-11 532
在我们微信小程序当中，我们可以十分简单的实现，接下来为大家介绍一下吧！大家看视频的时候是不是时不时会有弹幕飘过~我们使用微信官方给我们的一个视频链接。好，开始，步骤很简单。
小程序播放视频（弹幕案例）
huangbaokang的博客
07-19 2942
<!--index.wxml--> <video src="http://video.usr.cn/d77d809cabc24f759f9b973868aa5c37/8b431426ce2541449370a2c71dea25eb-S00000001-200000.mp4"></video> 使用video标签即可显示视频，src为视频地址。 video微信小...
开发实战教学视频｜快速实现微信小程序视频弹幕功能
cloud_minapp的博客
08-01 1221
知晓云正式上线于 2017 年 8 月 8 日，即将迎来三周年庆。 在这三年里，知晓云始终秉承「打造人人可用的后端云服务」的理念，在产品上进行了数百次迭代，闷声打磨产品，以更好的产品服务满足更多企业及开发者的需求。目前，知晓云已成功点亮各大主流小程序平台，同时也支持 Web 、iOS、Android 的开发，帮助企业将业务拓展至互联网的每一个角落。知晓云让小程序开发，轻松又简单，省时省力还省钱。 在 2020 的上半年，我们干了一件很重要的事情 —— 知晓云平台对 WebSocket 的支持。 实时数.
微信小程序入门三 播放视频+弹幕实现
weixin_44685781的博客
03-12 1843
和以前一样 先看结果 实现弹幕随机生成颜色，切换播放视频的功能 写博客的原因是好记性不如烂笔头，加上对知识了解得不够，写好也是逼自己去学习的过程！ 开始分享代码前 先分享一个大佬的个性签名，我就是个小菜鸡！！！ 好了，废话不多说 index.wxml <!-- 视频播放器 --> <video id="myVideo" controls src="{{src}}"...
微信小程序创客+功能实现及源码解析
在"微信小程序——创客+"项目中，我们可以学习到微信小程序的基本框架，包括页面布局、数据绑定、事件处理等。我们还可以学习到微信小程序的一些高级特性，如自定义组件、API调用、云开发等。此外，我们还可以从该...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

颜夕啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值