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

最新推荐文章于 2024-07-02 16:53:45 发布
最新推荐文章于 2024-07-02 16:53:45 发布
阅读量5.4k 收藏 7
点赞数 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)
  })
}
颜夕啊
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
微信小程序 弹幕
晏金煜的博客
04-09 4492
&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
微信小程序直播相关内容（实时通信、弹幕）——腾讯云IM
DuBanL的博客
11-30 1750
前言 小程序我现在懂得也不是很多 现在接触的小程序也是别人写的 此篇内容仅为总结自己看别人代码学习到的一些东西以及自己解决bug的一些方法 一、小程序的直播如何实现（用户端部分） 1.如何实现直播弹幕——腾讯云的IM (如果有图片什么的还需要腾讯云的COS) IM即时通信 对象存储 在直播组件onLoad里面 调用接口 获取IM的SDKAppID （这个SDKAppID一般都是后台给的吧 具体的我也不是很清楚） 备注：相关的东西自己看SDK吧（npm下载之后 完成相应功能 然后在微信开发
微信小程序 vidao实现视频播放和弹幕的功能
09-01
主要介绍了微信小程序 vidao实现视频播放和弹幕的功能的相关资料,这里提供实现代码及实现效果图，需要的朋友可以参考下
微信小程序弹幕Barrage_WeChat-master.zip
09-25
微信小程序弹幕Barrage_WeChat-master.zip
微信视频号直播弹幕抓取（python）
最新发布
marye_1325的博客
07-02 411
【代码】微信视频号直播弹幕抓取（python）
只需四个步骤几行代码，即可快速实现直播弹幕功能
heaven_1988的博客
10-18 2643
在视频直播中，互动是不可缺少、不容小觑的内容，主要包括发送弹幕、打赏、点赞等。想要快速实现这些功能，需要进行怎样的操作呢？ 其实，实现直播弹幕功能只需“四个步骤”和“几行代码”！ 现在，我们使用云巴 Javascript SDK ，手把手教你实现直播弹幕功能吧！ 步骤一：注册云巴账号 打开网址（https://yunba.io/），或直接搜索“云巴”，进行注册并登录。 步骤二：...
仿斗鱼直播的微信小程序源代码。此代码实现了首页和直播页面的开发。
05-30
1. **直播页面设计**：仿斗鱼直播的微信小程序源代码中，首页可能包含热门直播推荐、分类直播列表等元素，直播页面则可能包含主播头像、直播画面、聊天室、礼物按钮等核心功能。页面布局需符合微信小程序的设计规范...
微信直播小程序前端
09-20
微信小程序采用自有的WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheets）作为视图层的描述语言，它们分别负责结构和样式。同时，JavaScript作为逻辑层的语言，用于处理业务逻辑和数据管理。开发者需要...
微信小程序-仿斗鱼app源码
06-12
【微信小程序-仿斗鱼app源码】是一个用于学习和参考的项目，它展示了如何使用微信小程序技术构建一个类似斗鱼直播平台的应用。这个源码提供了实现类似功能的代码示例，包括用户登录、直播间浏览、直播观看、礼物赠送...
微信小程序-仿bilibili课程大作业
01-02
综上所述，这个“微信小程序-仿bilibili课程大作业”涵盖了微信小程序开发的诸多核心知识点，包括但不限于页面结构和样式设计、事件处理、视频播放与弹幕功能实现、动画效果、用户交互、响应式布局、网络请求、错误...
微信小程序设计-仿斗鱼直播小程序.zip
12-19
这个"微信小程序设计-仿斗鱼直播小程序"项目旨在模仿知名的斗鱼直播平台，为用户提供类似的功能，如观看直播、互动聊天、送礼物等。在本文中，我们将深入探讨微信小程序的开发过程、核心组件和功能实现。 1. 微信小...
微信小程序 弹幕功能简单实例
08-31
主要介绍了微信小程序 弹幕功能简单实例的相关资料,需要的朋友可以参考下
微信小程序开发之视频播放器带弹幕Video弹幕颜色自定义
12-08
微信小程序开发之视频播放器带弹幕Video弹幕颜色自定义
微信小程序看视频发弹幕功能
t1anH的博客
03-21 842
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 5961
指定WS_EX_LAYERED并使用UpdateLayeredWindow绘制窗口实现窗口透明
微信小程序之简单的发送弹幕操作
m0_74577714的博客
05-11 337
在我们微信小程序当中，我们可以十分简单的实现，接下来为大家介绍一下吧！大家看视频的时候是不是时不时会有弹幕飘过~我们使用微信官方给我们的一个视频链接。好，开始，步骤很简单。
小程序播放视频（弹幕案例）
huangbaokang的博客
07-19 2913
<!--index.wxml--> <video src="http://video.usr.cn/d77d809cabc24f759f9b973868aa5c37/8b431426ce2541449370a2c71dea25eb-S00000001-200000.mp4"></video> 使用video标签即可显示视频，src为视频地址。 video微信小...
开发实战教学视频｜快速实现微信小程序视频弹幕功能
cloud_minapp的博客
08-01 1143
知晓云正式上线于 2017 年 8 月 8 日，即将迎来三周年庆。 在这三年里，知晓云始终秉承「打造人人可用的后端云服务」的理念，在产品上进行了数百次迭代，闷声打磨产品，以更好的产品服务满足更多企业及开发者的需求。目前，知晓云已成功点亮各大主流小程序平台，同时也支持 Web 、iOS、Android 的开发，帮助企业将业务拓展至互联网的每一个角落。知晓云让小程序开发，轻松又简单，省时省力还省钱。 在 2020 的上半年，我们干了一件很重要的事情 —— 知晓云平台对 WebSocket 的支持。 实时数.
微信小程序购物车+PHP
02-26
微信小程序购物车是指在微信小程序中实现购物车功能，用户可以将商品添加到购物车中，进行数量的增减，结算等操作。而PHP是一种服务器端脚本语言，可以用来处理与数据库的交互、数据的处理和逻辑的实现。 在微信小程序中实现购物车功能，一般需要以下几个步骤： 1. 创建购物车页面：在小程序中创建一个购物车页面，用于展示用户已选择的商品列表和相关操作。 2. 添加商品到购物车：在商品详情页或列表页中，用户点击添加到购物车按钮时，将商品信息添加到购物车中。可以使用小程序的本地存储功能（如wx.setStorageSync）将商品信息保存到本地。 3. 购物车展示：在购物车页面中，通过获取本地存储的商品信息，展示用户已选择的商品列表。可以使用wx.getStorageSync获取本地存储的数据。 4. 购物车操作：用户可以对购物车中的商品进行数量的增减、删除等操作。通过修改本地存储的商品信息，更新购物车页面的展示。 5. 结算功能：用户点击结算按钮时，将购物车中的商品信息传递给后台服务器进行处理。可以使用小程序的网络请求功能（如wx.request）将数据发送给后台。 在PHP中处理微信小程序购物车功能，一般需要以下几个步骤： 1. 接收数据：在PHP中，可以通过$_POST或$_GET等全局变量接收小程序发送的数据，包括购物车中的商品信息。 2. 数据处理：根据接收到的数据，进行相应的处理，如将商品信息存储到数据库中，更新商品数量等操作。 3. 返回结果：根据处理结果，将相应的数据返回给小程序，如返回处理成功的消息或错误提示。 需要注意的是，以上只是一个简单的介绍，实际实现过程中还需要考虑安全性、数据验证、并发处理等方面的问题。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

颜夕啊

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

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

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

打赏作者

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

抵扣说明：

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

余额充值