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

不大方便展示视频哈~~

<!--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;
} */

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 : colorrgb.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.danmuTxtthis.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 () {// 创建SocketSocketTask = 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.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
微信小程序直播前端实现
目前微信推出了公测版微信小程序直播,无需页面开发,只需接入文档即可最新文档:https://blog.csdn.net/hql1024/article/details/104697973 <l ...
***腾讯云直播（含微信小程序直播）研究资料汇总-原创
***腾讯云直播(含微信小程序直播)研究资料汇总-原创原文: ***腾讯云直播(含微信小程序直播)研究资料汇总-原创这段时间抽空研究了下直播技术,综合比较了下腾讯云直播的技术和文档方面最齐全,现把 ...
微信小程序直播功能来了，然后呢？
这是小胖的第129篇文章. 也是小胖2020年100文章的第04篇. « 腾讯小程序直播功能,弄啥来? » 很荣幸2月14日自家的小程序收到了腾讯小程序直播功能的内测邀请,今天闲下来把这个功能的前后端 ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
微信小程序不能跳转页面跳转不生效
微信小程序不能跳转页面跳转不生效 ,可能是用法不正确哦 wx.navigateTo(Object object) 保留当前页面,跳转到应用内的某个页面.但是不能跳到 tabbar 页面.使用 wx ...
网上商城建设：微信小程序直播申请开通流程及开通方法
自从微信官方开放了小程序直播功能,第一时间成为了行业热点话题,网上直播间购物也成了消费者购物渠道之一.与此同时,商家们都在通过不同渠道尝试开通小程序直播,但又不清楚微信小程序直播申请开通流程,无从下手 ...
微信小程序直播二三事
去年蘑菇街首推超级购物台,率先实现了小程序端边看边聊边买的网购新模式, ,蘑菇街想做的不仅仅是依托于网红的电商直播,而是想要借直播之势渗透到整个网红生态 .uni 负责人郑慈航表示: uni 会 ...
CRMEB商城直播功能-微信小程序直播
首先需要登陆微信公众平台,小程序管理,申请开通直播功能,小程序准入要求如下图; 小程序直播配置完成上线后,进入微信小程序官方后台,点击创建直播间,选择直播方式:可以手机上进行直播,也可以OBS直播软件 ...

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

不大方便展示视频哈~~

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

最新文章

热门文章