La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修复ios h5录音失败的bug

master
xsx 1 year ago
parent
3634be2f55
commit
ba439f28b3
6 changed files with 225 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      im-uniapp/App.vue
  2. 8
      im-uniapp/common/recorder-app.js
  3. 52
      im-uniapp/common/recorder-h5.js
  4. 25
      im-uniapp/components/chat-message-item/chat-message-item.vue
  5. 23
      im-uniapp/components/chat-record/chat-record.vue
  6. 217
      im-uniapp/pages/chat/chat-box.vue

6
im-uniapp/App.vue
View File

@ -378,6 +378,12 @@ export default {
// 登录状态校验 // 登录状态校验
let loginInfo = uni.getStorageSync("loginInfo") let loginInfo = uni.getStorageSync("loginInfo")
this.refreshToken(loginInfo).then(() => { this.refreshToken(loginInfo).then(() => {
// #ifdef H5
// 跳转到聊天页
uni.switchTab({
url: "/pages/chat/chat"
})
// #endif
// 初始化 // 初始化
this.init(); this.init();
this.closeSplashscreen(0); this.closeSplashscreen(0);

8
im-uniapp/common/recorder-app.js
View File

@ -3,6 +3,9 @@ import UNI_APP from '@/.env.js';
const rc = uni.getRecorderManager(); const rc = uni.getRecorderManager();
// 录音开始时间 // 录音开始时间
let startTime = null; let startTime = null;
let checkIsEnable = ()=>{
return true;
}
let start = () => { let start = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -20,10 +23,6 @@ let start = () => {
}) })
} }
let pause = () => {
rc.stop();
}
let close = () => { let close = () => {
rc.stop(); rc.stop();
} }
@ -61,6 +60,7 @@ let upload = () => {
} }
export { export {
checkIsEnable,
start, start,
close, close,
upload upload

52
im-uniapp/common/recorder-h5.js
View File

@ -4,26 +4,39 @@ let rc = null;
let duration = 0; let duration = 0;
let chunks = []; let chunks = [];
let stream = null; let stream = null;
let startTime = null;
let checkIsEnable = () => {
if (origin.indexOf('https') === -1 && origin.indexOf('localhost') === -1 &&
origin.indexOf('127.0.0.1') === -1) {
uni.showToast({
title: '请在https环境中使用录音功能',
icon: 'error'
})
return false;
}
if (!navigator.mediaDevices || !window.MediaRecorder) {
uni.showToast({
title: '当前浏览器不支持录音',
icon: 'error'
})
return false;
}
return true;
}
let start = () => { let start = () => {
return navigator.mediaDevices.getUserMedia({ audio: true }).then(audioStream => { return navigator.mediaDevices.getUserMedia({ audio: true }).then(audioStream => {
const startTime = new Date().getTime(); console.log("start record")
startTime = new Date().getTime();
chunks = []; chunks = [];
stream = audioStream; stream = audioStream;
rc = new MediaRecorder(stream) rc = new MediaRecorder(stream)
rc.ondataavailable = (e) => {
console.log("ondataavailable")
chunks.push(e.data)
}
rc.onstop = () => {
duration = (new Date().getTime() - startTime) / 1000;
console.log("时长：", duration)
}
rc.start() rc.start()
}) })
} }
let close = () => { let close = () => {
console.log("stream:", stream)
stream.getTracks().forEach((track) => { stream.getTracks().forEach((track) => {
track.stop() track.stop()
}) })
@ -33,11 +46,23 @@ let close = () => {
let upload = () => { let upload = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
setTimeout(() => { rc.ondataavailable = (e) => {
console.log("ondataavailable:",e.data)
console.log("size:",e.data.size)
console.log("type:",e.data.type)
chunks.push(e.data)
}
rc.onstop = () => {
if(!chunks[0].size){
chunks = [];
return;
}
duration = (new Date().getTime() - startTime) / 1000;
console.log("时长：", duration)
console.log("上传,chunks:", chunks.length)
const newbolb = new Blob(chunks, { 'type': 'audio/mpeg' }); const newbolb = new Blob(chunks, { 'type': 'audio/mpeg' });
const name = new Date().getDate() + '.mp3'; const name = new Date().getDate() + '.mp3';
const file = new File([newbolb], name) const file = new File([newbolb], name)
console.log("upload")
uni.uploadFile({ uni.uploadFile({
url: UNI_APP.BASE_URL + '/file/upload', url: UNI_APP.BASE_URL + '/file/upload',
header: { header: {
@ -62,11 +87,12 @@ let upload = () => {
reject(e); reject(e);
} }
}) })
}, 100) }
}) })
} }
export { export {
checkIsEnable,
start, start,
close, close,
upload upload

25
im-uniapp/components/chat-message-item/chat-message-item.vue
View File

@ -17,7 +17,7 @@
<view class="chat-msg-bottom"> <view class="chat-msg-bottom">
<view v-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT"> <view v-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT">
<long-press-menu :items="menuItems" @select="onSelectMenu"> <long-press-menu :items="menuItems" @select="onSelectMenu">
<rich-text class="chat-msg-text" :nodes="$emo.transform(msgInfo.content, 'emoji-normal')"></rich-text> <rich-text class="chat-msg-text" :nodes="$emo.transform(msgInfo.content,'emoji-normal')"></rich-text>
</long-press-menu> </long-press-menu>
</view> </view>
<view class="chat-msg-image" v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE"> <view class="chat-msg-image" v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE">
@ -65,12 +65,12 @@
</view> </view>
</long-press-menu> </long-press-menu>
<view class="chat-msg-status" v-if="!isAction"> <view class="chat-msg-status" v-if="!isAction">
<text class="chat-readed" v-show="msgInfo.selfSend && !msgInfo.groupId <text class="chat-readed" v-if="msgInfo.selfSend && !msgInfo.groupId
&& msgInfo.status == $enums.MESSAGE_STATUS.READED">已读</text> && msgInfo.status == $enums.MESSAGE_STATUS.READED">已读</text>
<text class="chat-unread" v-show="msgInfo.selfSend && !msgInfo.groupId <text class="chat-unread" v-if="msgInfo.selfSend && !msgInfo.groupId
&& msgInfo.status != $enums.MESSAGE_STATUS.READED">未读</text> && msgInfo.status != $enums.MESSAGE_STATUS.READED">未读</text>
</view> </view>
<view class="chat-receipt" v-show="msgInfo.receipt" @click="onShowReadedBox"> <view class="chat-receipt" v-if="msgInfo.receipt" @click="onShowReadedBox">
<text v-if="msgInfo.receiptOk" class="tool-icon iconfont icon-ok"></text> <text v-if="msgInfo.receiptOk" class="tool-icon iconfont icon-ok"></text>
<text v-else>{{ msgInfo.readedCount }}人已读</text> <text v-else>{{ msgInfo.readedCount }}人已读</text>
</view> </view>
@ -125,14 +125,16 @@ export default {
this.innerAudioContext = uni.createInnerAudioContext(); this.innerAudioContext = uni.createInnerAudioContext();
let url = JSON.parse(this.msgInfo.content).url; let url = JSON.parse(this.msgInfo.content).url;
this.innerAudioContext.src = url; this.innerAudioContext.src = url;
console.log(url);
this.innerAudioContext.onEnded((e) => { this.innerAudioContext.onEnded((e) => {
console.log('停止') console.log('停止')
this.audioPlayState = "STOP" this.audioPlayState = "STOP"
this.emit();
}) })
this.innerAudioContext.onError((e) => { this.innerAudioContext.onError((e) => {
this.audioPlayState = "STOP"
console.log("播放音频出错"); console.log("播放音频出错");
console.log(e) console.log(e)
this.emit();
}); });
} }
if (this.audioPlayState == 'STOP') { if (this.audioPlayState == 'STOP') {
@ -145,6 +147,7 @@ export default {
this.innerAudioContext.play(); this.innerAudioContext.play();
this.audioPlayState = "PLAYING" this.audioPlayState = "PLAYING"
} }
this.emit();
}, },
onSelectMenu(item) { onSelectMenu(item) {
this.$emit(item.key.toLowerCase(), this.msgInfo); this.$emit(item.key.toLowerCase(), this.msgInfo);
@ -158,6 +161,16 @@ export default {
}, },
onShowReadedBox() { onShowReadedBox() {
this.$refs.chatGroupReaded.open(); this.$refs.chatGroupReaded.open();
},
emit(){
this.$emit("audioStateChange",this.audioPlayState,this.msgInfo);
},
stopPlayAudio(){
if (this.innerAudioContext) {
this.innerAudioContext.stop();
this.innerAudioContext = null;
this.audioPlayState = "STOP"
}
} }
}, },
computed: { computed: {
@ -262,6 +275,7 @@ export default {
.chat-msg-bottom { .chat-msg-bottom {
display: inline-block; display: inline-block;
padding-right: 80rpx; padding-right: 80rpx;
margin-top: 5rpx;
.chat-msg-text { .chat-msg-text {
position: relative; position: relative;
@ -289,7 +303,6 @@ export default {
border-color: $im-bg transparent transparent; border-color: $im-bg transparent transparent;
overflow: hidden; overflow: hidden;
border-width: 18rpx; border-width: 18rpx;
//box-shadow: $im-box-shadow-dark;
} }
} }

23
im-uniapp/components/chat-record/chat-record.vue
View File

@ -50,12 +50,14 @@ export default {
/* 用户第一次使用语音会唤醒录音权限请求，此时会导致@touchend失效， /* 用户第一次使用语音会唤醒录音权限请求，此时会导致@touchend失效，
一直处于录音状态，这里允许用户再次点击发送语音并结束录音 */ 一直处于录音状态，这里允许用户再次点击发送语音并结束录音 */
if (this.recording) { if (this.recording) {
this.onEndRecord();
return; return;
} }
console.log("开始录音") console.log("开始录音")
this.moveToCancel = false; this.moveToCancel = false;
this.initRecordBar(); this.initRecordBar();
if(!this.$rc.checkIsEnable()){
return;
}
this.$rc.start().then(() => { this.$rc.start().then(() => {
this.recording = true; this.recording = true;
console.log("开始录音成功") console.log("开始录音成功")
@ -70,9 +72,12 @@ export default {
}); });
}, },
onEndRecord() { onEndRecord() {
if(!this.recording){
return;
}
this.recording = false; this.recording = false;
// 停止计时 // 停止计时
this.StopTimer(); this.stopTimer();
// 停止录音 // 停止录音
this.$rc.close(); this.$rc.close();
// 触屏位置是否移动到了取消区域 // 触屏位置是否移动到了取消区域
@ -80,8 +85,8 @@ export default {
console.log("录音取消") console.log("录音取消")
return; return;
} }
// 小于1秒不发送 // 大于1秒才发送
if (this.druation == 0) { if (this.druation <= 1) {
uni.showToast({ uni.showToast({
title: "说话时间太短", title: "说话时间太短",
icon: 'none' icon: 'none'
@ -95,13 +100,11 @@ export default {
title: e, title: e,
icon: 'none' icon: 'none'
}) })
}).finally(() => {
this.$rc.close();
}) })
}, },
startTimer() { startTimer() {
this.druation = 0; this.druation = 0;
this.StopTimer(); this.stopTimer();
this.rcTimer = setInterval(() => { this.rcTimer = setInterval(() => {
this.druation++; this.druation++;
// 大于60s,直接结束 // 大于60s,直接结束
@ -110,7 +113,7 @@ export default {
} }
}, 1000) }, 1000)
}, },
StopTimer() { stopTimer() {
this.rcTimer && clearInterval(this.rcTimer); this.rcTimer && clearInterval(this.rcTimer);
this.rcTimer = null; this.rcTimer = null;
}, },
@ -134,6 +137,10 @@ export default {
} }
return `录音时长:${this.druation}s`; return `录音时长:${this.druation}s`;
} }
},
unmounted() {
this.stopTimer();
this.recording = false;
} }
} }

217
im-uniapp/pages/chat/chat-box.vue
View File

@ -6,10 +6,11 @@
<scroll-view class="scroll-box" scroll-y="true" upper-threshold="200" @scrolltoupper="onScrollToTop" <scroll-view class="scroll-box" scroll-y="true" upper-threshold="200" @scrolltoupper="onScrollToTop"
:scroll-into-view="'chat-item-' + scrollMsgIdx"> :scroll-into-view="'chat-item-' + scrollMsgIdx">
<view v-if="chat" v-for="(msgInfo, idx) in chat.messages" :key="idx"> <view v-if="chat" v-for="(msgInfo, idx) in chat.messages" :key="idx">
<chat-message-item v-if="idx >= showMinIdx" :headImage="headImage(msgInfo)" <chat-message-item :ref="'message'+msgInfo.id" v-if="idx >= showMinIdx"
@call="onRtCall(msgInfo)" :showName="showName(msgInfo)" @recall="onRecallMessage" :headImage="headImage(msgInfo)" @call="onRtCall(msgInfo)" :showName="showName(msgInfo)"
@copy="onCopyMessage" @delete="onDeleteMessage" @longPressHead="onLongPressHead(msgInfo)" @recall="onRecallMessage" @delete="onDeleteMessage" @copy="onCopyMessage"
@download="onDownloadFile" :id="'chat-item-' + idx" :msgInfo="msgInfo" @longPressHead="onLongPressHead(msgInfo)" @download="onDownloadFile"
@audioStateChange="onAudioStateChange" :id="'chat-item-' + idx" :msgInfo="msgInfo"
:groupMembers="groupMembers"> :groupMembers="groupMembers">
</chat-message-item> </chat-message-item>
</view> </view>
@ -19,7 +20,7 @@
<view class="iconfont icon-at">:&nbsp;</view> <view class="iconfont icon-at">:&nbsp;</view>
<scroll-view v-if="atUserIds.length > 0" class="chat-at-scroll-box" scroll-x="true" scroll-left="120"> <scroll-view v-if="atUserIds.length > 0" class="chat-at-scroll-box" scroll-x="true" scroll-left="120">
<view class="chat-at-items"> <view class="chat-at-items">
<view v-for="m in atUserItems" class="chat-at-item"> <view v-for="m in atUserItems" class="chat-at-item" :key="m.userId">
<head-image :name="m.showNickName" :url="m.headImage" size="minier"></head-image> <head-image :name="m.showNickName" :url="m.headImage" size="minier"></head-image>
</view> </view>
</view> </view>
@ -31,24 +32,26 @@
<chat-record v-if="showRecord" class="chat-record" @send="onSendRecord"></chat-record> <chat-record v-if="showRecord" class="chat-record" @send="onSendRecord"></chat-record>
<view v-else class="send-text"> <view v-else class="send-text">
<editor id="editor" class="send-text-area" :placeholder="isReceipt ? '[回执消息]' : ''" <editor id="editor" class="send-text-area" :placeholder="isReceipt ? '[回执消息]' : ''"
:read-only="isReadOnly" @focus="onEditorFocus" @blur="onEditorBlur" @ready="onEditorReady" :read-only="isReadOnly" @focus="onEditorFocus" @blur="onEditorBlur" @ready="onEditorReady" @input="onTextInput">
@input="onTextInput">
</editor> </editor>
<!-- <textarea class="send-text-area" v-model="sendText" auto-height :show-confirm-bar="false"
:placeholder="isReceipt ? '[回执消息]' : ''" :adjust-position="false" @confirm="sendTextMessage()"
@keyboardheightchange="onKeyboardheightchange" @input="onTextInput" confirm-type="send"
confirm-hold :hold-keyboard="true"></textarea> -->
</view> </view>
<view v-if="chat && chat.type == 'GROUP'" class="iconfont icon-at" @click="openAtBox()"></view> <view v-if="chat && chat.type == 'GROUP'" class="iconfont icon-at" @click="openAtBox()"></view>
<view class="iconfont icon-icon_emoji" @click="onShowEmoChatTab()"></view> <view class="iconfont icon-icon_emoji" @click="onShowEmoChatTab()"></view>
<view v-if="isEmpty" class="iconfont icon-add" @click="onShowToolsChatTab()"> <view v-if="isEmpty" class="iconfont icon-add" @click="onShowToolsChatTab()">
</view> </view>
<button v-if="!isEmpty || atUserIds.length > 0" class="btn-send" type="primary" <button v-if="!isEmpty || atUserIds.length" class="btn-send" type="primary"
@touchend.prevent="sendTextMessage()" size="mini">发送</button> @touchend.prevent="sendTextMessage()" size="mini">发送</button>
</view> </view>
</view> </view>
<view class="chat-tab-bar"> <view class="chat-tab-bar">
<view v-if="chatTabBox == 'tools'" class="chat-tools" :style="{height: keyboardHeight+'px'}"> <view v-if="chatTabBox == 'tools'" class="chat-tools" :style="{height: keyboardHeight+'px'}">
<view class="chat-tools-item">
<file-upload ref="fileUpload" :onBefore="onUploadFileBefore" :onSuccess="onUploadFileSuccess"
:onError="onUploadFileFail">
<view class="tool-icon iconfont icon-folder"></view>
</file-upload>
<view class="tool-name">文件</view>
</view>
<view class="chat-tools-item"> <view class="chat-tools-item">
<image-upload :maxCount="9" sourceType="album" :onBefore="onUploadImageBefore" <image-upload :maxCount="9" sourceType="album" :onBefore="onUploadImageBefore"
:onSuccess="onUploadImageSuccess" :onError="onUploadImageFail"> :onSuccess="onUploadImageSuccess" :onError="onUploadImageFail">
@ -63,15 +66,6 @@
</image-upload> </image-upload>
<view class="tool-name">拍摄</view> <view class="tool-name">拍摄</view>
</view> </view>
<view class="chat-tools-item">
<file-upload ref="fileUpload" :onBefore="onUploadFileBefore" :onSuccess="onUploadFileSuccess"
:onError="onUploadFileFail">
<view class="tool-icon iconfont icon-folder"></view>
</file-upload>
<view class="tool-name">文件</view>
</view>
<view class="chat-tools-item" @click="onRecorderInput()"> <view class="chat-tools-item" @click="onRecorderInput()">
<view class="tool-icon iconfont icon-microphone"></view> <view class="tool-icon iconfont icon-microphone"></view>
<view class="tool-name">语音消息</view> <view class="tool-name">语音消息</view>
@ -131,8 +125,10 @@ export default {
scrollMsgIdx: 0, // 滚动条定位为到哪条消息 scrollMsgIdx: 0, // 滚动条定位为到哪条消息
chatTabBox: 'none', chatTabBox: 'none',
showRecord: false, showRecord: false,
keyboardHeight: 300,
chatMainHeight: 0, // 聊天窗口高度 chatMainHeight: 0, // 聊天窗口高度
keyboardHeight: 290, // 键盘高度
windowHeight: 1000, // 窗口高度
initHeight: 1000, // h5初始高度
atUserIds: [], atUserIds: [],
needScrollToBottom: false, // 需要滚动到底部 needScrollToBottom: false, // 需要滚动到底部
showMinIdx: 0, // 下标小于showMinIdx的消息不显示，否则可能很卡 showMinIdx: 0, // 下标小于showMinIdx的消息不显示，否则可能很卡
@ -142,7 +138,8 @@ export default {
editorCtx: null, // 编辑器上下文 editorCtx: null, // 编辑器上下文
isEmpty: true, // 编辑器是否为空 isEmpty: true, // 编辑器是否为空
isFocus: false, // 编辑器是否焦点 isFocus: false, // 编辑器是否焦点
isReadOnly: false // 编辑器是否只读 isReadOnly: false, // 编辑器是否只读
playingAudio: null // 当前正在播放的录音消息
} }
}, },
methods: { methods: {
@ -265,7 +262,6 @@ export default {
sendTextMessage() { sendTextMessage() {
this.editorCtx.getContents({ this.editorCtx.getContents({
success: (e) => { success: (e) => {
// 清空编辑框数据 // 清空编辑框数据
this.editorCtx.clear(); this.editorCtx.clear();
this.atUserIds = []; this.atUserIds = [];
@ -275,7 +271,6 @@ export default {
this.showBannedTip(); this.showBannedTip();
return; return;
} }
let sendText = this.isReceipt ? "【回执消息】" : ""; let sendText = this.isReceipt ? "【回执消息】" : "";
e.delta.ops.forEach((op) => { e.delta.ops.forEach((op) => {
if (op.insert.image) { if (op.insert.image) {
@ -302,7 +297,6 @@ export default {
} }
// 填充对方id // 填充对方id
this.fillTargetId(msgInfo, this.chat.targetId); this.fillTargetId(msgInfo, this.chat.targetId);
this.sendMessageRequest(msgInfo).then((m) => { this.sendMessageRequest(msgInfo).then((m) => {
m.selfSend = true; m.selfSend = true;
this.chatStore.insertMessage(m, this.chat); this.chatStore.insertMessage(m, this.chat);
@ -314,6 +308,7 @@ export default {
}); });
} }
}) })
}, },
createAtText() { createAtText() {
let atText = ""; let atText = "";
@ -356,7 +351,6 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollMsgIdx = idx; this.scrollMsgIdx = idx;
}); });
}, },
onShowEmoChatTab() { onShowEmoChatTab() {
this.showRecord = false; this.showRecord = false;
@ -538,7 +532,7 @@ export default {
uni.setClipboardData({ uni.setClipboardData({
data: msgInfo.content, data: msgInfo.content,
success: () => { success: () => {
uni.showToast({ title: '已复制', icon: 'none' }); uni.showToast({ title: '复制成功' });
}, },
fail: () => { fail: () => {
uni.showToast({ title: '复制失败', icon: 'none' }); uni.showToast({ title: '复制失败', icon: 'none' });
@ -575,7 +569,7 @@ export default {
// 防止滚动条定格在顶部，不能一直往上滚 // 防止滚动条定格在顶部，不能一直往上滚
this.scrollToMsgIdx(this.showMinIdx); this.scrollToMsgIdx(this.showMinIdx);
// #endif // #endif
// 多展示0条信息 // 多展示20条信息
this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0; this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0;
}, },
onShowMore() { onShowMore() {
@ -607,6 +601,15 @@ export default {
onEditorBlur(e) { onEditorBlur(e) {
this.isFocus = false; this.isFocus = false;
}, },
onAudioStateChange(state, msgInfo) {
const playingAudio = this.$refs['message' + msgInfo.id][0]
if (state == 'PLAYING' && playingAudio != this.playingAudio) {
// 停止之前的录音
this.playingAudio && this.playingAudio.stopPlayAudio();
// 记录当前正在播放的消息
this.playingAudio = playingAudio;
}
},
loadReaded(fid) { loadReaded(fid) {
this.$http({ this.$http({
url: `/message/private/maxReadedId?friendId=${fid}`, url: `/message/private/maxReadedId?friendId=${fid}`,
@ -665,7 +668,7 @@ export default {
}) })
}, },
rpxTopx(rpx) { rpxTopx(rpx) {
// px转换成rpx // rpx转换成px
let info = uni.getSystemInfoSync() let info = uni.getSystemInfoSync()
let px = info.windowWidth * rpx / 750; let px = info.windowWidth * rpx / 750;
return Math.floor(rpx); return Math.floor(rpx);
@ -696,30 +699,104 @@ export default {
}) })
} }
}, },
reCalChatMainHeight() {
setTimeout(() => {
let h = this.windowHeight;
// 减去标题栏高度
h -= 50;
// 减去键盘高度
if (this.isShowKeyBoard || this.chatTabBox != 'none') {
console.log("减去键盘高度:", this.keyboardHeight)
h -= this.keyboardHeight;
this.scrollToBottom();
}
// #ifndef H5
// h5需要减去状态栏高度
h -= uni.getSystemInfoSync().statusBarHeight;
// #endif
this.chatMainHeight = h;
console.log("窗口高度:", this.chatMainHeight)
if (this.isShowKeyBoard || this.chatTabBox != 'none') {
this.scrollToBottom();
}
// ios浏览器键盘把页面顶起后，页面长度不会变化，这里把页面拉到顶部适配一下
// #ifdef H5
if (uni.getSystemInfoSync().platform == 'ios') {
// 不同手机需要的延时时间不一致，采用分段延时的方式处理
const delays = [50, 100, 500];
delays.forEach((delay) => {
setTimeout(() => {
uni.pageScrollTo({
scrollTop: 0,
duration: 10
});
}, delay);
})
}
// #endif
}, 30)
},
listenKeyBoard() { listenKeyBoard() {
// #ifdef H5
const userAgent = navigator.userAgent;
const regex = /(macintosh|windows)/i;
if (regex.test(userAgent)) {
// 电脑端不需要弹出键盘
console.log("userAgent:", userAgent)
return;
}
if (uni.getSystemInfoSync().platform == 'ios') {
// ios h5实现键盘监听
window.addEventListener('focusin', this.focusInListener);
window.addEventListener('focusout', this.focusOutListener);
} else {
// 安卓h5实现键盘监听
let initHeight = window.innerHeight;
window.addEventListener('resize', this.resizeListener);
}
// #endif
// #ifndef H5
// app实现键盘监听
uni.onKeyboardHeightChange(this.keyBoardListener);
// #endif
},
unListenKeyboard() {
// #ifdef H5 // #ifdef H5
// 由于H5无法触发TextArea的@keyboardheightchange事件，所以通过 // 安卓h5实现键盘监听
// 监听屏幕高度变化来实现键盘监听 window.removeEventListener('resize', this.resizeListener);
let initHeight = window.innerHeight; window.removeEventListener('focusin', this.focusInListener);
window.addEventListener('resize', () => { window.removeEventListener('focusout', this.focusOutListener);
let keyboardHeight = initHeight - window.innerHeight;
this.isShowKeyBoard = keyboardHeight > 0;
if (this.isShowKeyBoard) {
this.keyboardHeight = keyboardHeight;
}
this.reCalChatMainHeight();
});
// #endif // #endif
// #ifndef H5 // #ifndef H5
uni.onKeyboardHeightChange((res) => { uni.offKeyboardHeightChange(this.keyBoardListener);
this.isShowKeyBoard = res.height > 0;
if (this.isShowKeyBoard) {
this.keyboardHeight = res.height; // 获取并保存键盘高度
}
this.reCalChatMainHeight();
});
// #endif // #endif
}, },
keyBoardListener(res) {
this.isShowKeyBoard = res.height > 0;
if (this.isShowKeyBoard) {
this.keyboardHeight = res.height; // 获取并保存键盘高度
}
this.reCalChatMainHeight();
},
resizeListener() {
console.log("resize")
let keyboardHeight = this.initHeight - window.innerHeight;
this.isShowKeyBoard = keyboardHeight > 150;
if (this.isShowKeyBoard) {
this.keyboardHeight = keyboardHeight;
}
this.reCalChatMainHeight();
},
focusInListener() {
console.log("focusInListener")
this.isShowKeyBoard = true;
this.reCalChatMainHeight();
},
focusOutListener() {
console.log("focusOutListener")
this.isShowKeyBoard = false;
this.reCalChatMainHeight();
},
showBannedTip() { showBannedTip() {
let msgInfo = { let msgInfo = {
tmpId: this.generateId(), tmpId: this.generateId(),
@ -736,29 +813,8 @@ export default {
} }
this.chatStore.insertMessage(msgInfo, this.chat); this.chatStore.insertMessage(msgInfo, this.chat);
}, },
reCalChatMainHeight() {
const sysInfo = uni.getSystemInfoSync();
let h = sysInfo.windowHeight;
// 减去标题栏高度
h -= 50;
// #ifdef H5
// h5的sysInfo.windowHeight默认就已经减去键盘高度了
if (this.chatTabBox != 'none') {
h -= this.keyboardHeight;
}
// #endif
// #ifndef H5
// 减去状态栏高度
h -= sysInfo.statusBarHeight;
if (this.isShowKeyBoard || this.chatTabBox != 'none') {
h -= this.keyboardHeight;
}
// #endif
console.log("h:", h)
this.chatMainHeight = h;
},
generateId() { generateId() {
// 生成临时id // 生成临时id
return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000)); return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
} }
}, },
@ -858,7 +914,20 @@ export default {
// 监听键盘高度 // 监听键盘高度
this.listenKeyBoard(); this.listenKeyBoard();
// 计算聊天窗口高度 // 计算聊天窗口高度
this.$nextTick(() => this.reCalChatMainHeight()) this.$nextTick(() => {
this.windowHeight = uni.getSystemInfoSync().windowHeight;
this.reCalChatMainHeight()
// 兼容ios h5:禁止页面滚动
// #ifdef H5
this.initHeight = window.innerHeight;
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
// #endif
});
},
onUnload() {
this.unListenKeyboard();
}, },
onShow() { onShow() {
if (this.needScrollToBottom) { if (this.needScrollToBottom) {
@ -870,14 +939,12 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.chat-box { .chat-box {
$icon-color: rgba(0, 0, 0, 0.88); $icon-color: rgba(0, 0, 0, 0.88);
position: relative; position: relative;
background-color: #fafafa; background-color: #fafafa;
.header { .header {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -912,7 +979,7 @@ export default {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
z-index: 9; z-index: 2;
.chat-msg { .chat-msg {
flex: 1; flex: 1;

Write Preview
Loading…
Cancel
Save