前言
小程序我现在懂得也不是很多 现在接触的小程序也是别人写的 此篇内容仅为总结自己看别人代码学习到的一些东西以及自己解决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 这样键盘就是从下往上出现的 而不是从上往下出现的
最后的最后 暂时就先分享这么多吧 我自己懂得还不是很多 后期会优化这篇博客