即时聊天逻辑思路

1,聊天列表向上滚动的距离
原理:
1 先获取该设备的高度并复值给滚动容器(scroll-view)的高度
2 获取滚动容器(scroll-view)中所有子元素的高度
3 判断子元素的高度是否大于滚动容器(scroll-view)的高度,如果大于就把 (子元素的高度 - 容器的高度 = 滚动的距离)

注意:由于vue采用虚拟dom,我每次生成新的消息时获取到的div的scrollHeight的值是生成新消息之前的值,所以造成每次都是最新的那条消息被隐藏掉了

scrollViewBottom(){
	let that = this
	// 因为vue的虚拟DOM 每次生成的新消息都是之前的,所以采用异步setTimeout
	setTimeout(()=>{
		let query = uni.createSelectorQuery()
		query.selectAll('.height_JS').boundingClientRect()
		query.select('#scrollview').boundingClientRect()
		query.exec((res)=>{
			that.mitemHeight = 0

			res[0].forEach(rest=>{
				that.mitemHeight = that.mitemHeight+rest.height
			})
			
			if(that.mitemHeight > that.scrollHeight){
				that.scrollTop = that.mitemHeight-that.scrollHeight+10
			}
		})
	},100)
},

2,表情文字转换成表情

// 处理聊天内容中带有表情的数据
_HandleEmoji(paramsObj){
	return new Promise((resolve,reject)=>{
		if(paramsObj.content){
			let HandleEmoji = paramsObj.content.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
				for (let i = 0; i < parameter.emojiList.length; i++) {
					let row = parameter.emojiList[i];
						if (row.alt == item) {
							//在线表情路径,图文混排必须使用网络路径,请上传一份表情到你的服务器后再替换此路径
							//比如你上传服务器后,你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
							let onlinePath = 'https://kizent.oss-cn-shenzhen.aliyuncs.com/zhendeaini/emoji/';
							let imgstr = `<img src="${onlinePath}${row.url}">`;
							return imgstr;
						}
				}
			});
			resolve(HandleEmoji)
		}
	})
}

3,获取录音数据
授权录音最好要先调用 uni.authorize() 询问一下用户是否授权过,如果授权过则调用全局唯一的录音管理器 uni.getRecorderManager(),如果没授权过则调起客户端小程序设置界面 uni.openSetting()
开始录音(start)和停止录音(stop)都会询问是否授权过录音(scope)
做完授权判断之后会出现一个问题,当用户快速的触摸屏幕并快速离开屏幕时,touchend事件执行完后,touchstart事件还没执行完

以下是没完成的代码

// 长按录制语音 (录音开始)
async longPressRecording(e){
	console.log(e)
	console.log('长按录音')
	let that = this
	
	// 判断几指触发录音
	if(e.touches.length > 1){
		console.log('两指操作了')
		return false
	}				
	
	// 授权录音最好要先调用 uni.authorize() 询问一下用户是否授权过,如果授权过则调用全局唯一的录音管理器 uni.getRecorderManager(),如果没授权过则调起客户端小程序设置界面 uni.openSetting() 
	// 开始录音(start)和停止录音(stop)都会询问是否授权过录音(scope)
	// 做完授权判断之后会出现一个问题,当用户快速的触摸屏幕并快速离开屏幕时,touchend事件执行完后,touchstart事件还没执行完

	try{
		let isAuthRecord = uni.getStorageSync('isAuthRecord')
		let auth = await Auth.authorize('scope.record')					
		if(!isAuthRecord && auth){
			that.RECORDER = uni.getRecorderManager()
			uni.setStorageSync('isAuthRecord',true)
		}else{
			that.RECORDER = uni.getRecorderManager()
			that.isRecording = true
			that.isShouRecord = true
			that.voiceText = '松开&nbsp;结束'
			that.cancelRecordingY = e.touches[0].clientY    // 往上滑取消录音
			that.RECORDER.start({format:'mp3',frameSize:50})
		}
		
	}catch(e){
		console.log(e)
		uni.showModal({
			title:'提示',
			content:'为了更好的聊天,请打开麦克风',
			cancelColor:'#000000',
			confirmColor:'',
			confirmText:'确认',
			showCancel:true,
			success: async (res) => {
				if(res.confirm){
					let openSetting = Setting.openSetting()
					console.log(openSetting.authSetting["scope.record"] )
					
					if(!openSetting.authSetting["scope.record"]){
						//未设置录音授权
						 wx.showModal({
							title: '提示',
							content: '您未授权录音,功能将无法使用',
							showCancel: false,
							success: function (res) {
	
							},
						 })
					}else{
						uni.setStorageSync('recordAuthState',1)
					}
					
				}else if(res.cancel){
					console.log('用户点击了取消')
				}
			}	
		})
	}
},
// 录音被打断或中断
cancelRecording(e){
	console.log('录音被打断或中断')
	let that = this 
	let isAuthRecord = uni.getStorageSync('isAuthRecord')
	isAuthRecord &&  that.RECORDER.stop(); //录音结束
	that.isRecording = false
	that.isShowCancel = false
	that.isCancel = false
	that.isShouRecord = false
	that.recordTip = '手指上滑 取消发送'
	that.voiceText = '按住&nbsp;说话'	
},
// 松开录音
async releaseRecording(e){
	console.log(e)
	console.log('松开录音')
	
	let that = this
	let isAuthRecord = uni.getStorageSync('isAuthRecord')
	isAuthRecord && await that.RECORDER.stop(); //录音结束
	console.log('----------stop-----------')
	that.isRecording = false
	that.isShowCancel = false
	that.isCancel = false
	that.isShouRecord = false
	that.recordTip = '手指上滑 取消发送'
	that.voiceText = '按住&nbsp;说话'
	
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值