700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序直播相关内容(实时通信 弹幕)——腾讯云IM

微信小程序直播相关内容(实时通信 弹幕)——腾讯云IM

时间:2024-07-09 01:31:16

相关推荐

微信小程序直播相关内容(实时通信 弹幕)——腾讯云IM

前言

小程序我现在懂得也不是很多 现在接触的小程序也是别人写的 此篇内容仅为总结自己看别人代码学习到的一些东西以及自己解决bug的一些方法

一、小程序的直播如何实现(用户端部分)

1.如何实现直播弹幕——腾讯云的IM (如果有图片什么的还需要腾讯云的COS)

IM即时通信

对象存储

在直播组件onLoad里面 调用接口 获取IM的SDKAppID (这个SDKAppID一般都是后台给的吧 具体的我也不是很清楚)

备注:相关的东西自己看SDK吧(npm下载之后 完成相应功能 然后在微信开发者工具里面构建npm)

二、直播弹幕怎么做到实时响应(因为弹幕需要判断是否包含敏感词汇 以及用到setData渲染数据 以至于很慢 )

1.在app.js里面的onLaunch里面调用接口先拿到后台设置的敏感词

success: function(res) {let pattern = ''if(res.data.err_code == 0) {for(let i = 0 , len = res.data.err_msg.length; i < len; i ++) {if(res.data.err_msg[i].indexOf('*') ==-1) {if(i< res.data.err_msg.length-1) {pattern = pattern + res.data.err_msg[i] + '\.\*\?\|' //.*? 表示匹配任意数量的重复,但是在能使整个匹配成功的前提下使用最少的重复} else {pattern = pattern + res.data.err_msg[i] + '\.\*\?'}}}wx.setStorage({key:"pickImprot",data:pattern})}// var patterns = new RegExp(pattern,"gi");// setTimeout(() => {// console.log(wx.getStorageSync('pickImprot'))// var patterns = new RegExp(pattern,"gi");// console.log(patterns)// console.log(patterns.test(' 3d 18大 '))// },3000)// console.log(wx.getStorageSync('pickImprot').test('rrr'))}})

2.判断发送的弹幕是否含有敏感词(正则表达式匹配速度快)

// 验证发布内容testTxtFun: function (testTxt) {let that = this;// if(wx.getStorageSync('pickImprot')) {let pickImprotInfo = new RegExp(wx.getStorageSync('pickImprot'),"gi");let leg = falseif(pickImprotInfo.test(testTxt)) {leg = truethis.setData({inputText:testTxt,leg:leg})this.testTxtData()return}this.setData({inputText:testTxt,leg:leg})this.testTxtData()}},

3.将可以发送的弹幕渲染到页面上

that.setData({['barrageArr[' + that.data.barrageArr.length + ']']: objMsg //设置数组最后一条数据的值});

备注:这样可以只渲染当前这条数据 提高页面渲染速度 现在这种方法 是我目前能写出来的速度最快的方案 如果有更好的方法 后期会持续更新

三、直播弹幕输入框与键盘不同步问题

前提 :输入框不是定位定过去的吗?? 所以只要动态获取键盘的高度 再把这个高度设置为输入框距离底部的距离 输入框不就正好和键盘连接到一块了吗? 但是这样有个问题 就是输入框聚焦的时候 才能拿到键盘的高度 拿到键盘的高度 再设置输入框距离底部的距离 输入框会有个效果(就是先显示出来 然后往下掉——如果设置的高度偏大的话)

我现在的解决方案是: 在不聚焦的时候 设置输入框距离底部的距离为0 这样键盘就是从下往上出现的 而不是从上往下出现的

最后的最后 暂时就先分享这么多吧 我自己懂得还不是很多 后期会优化这篇博客

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。