diff --git a/im-uniapp/App.vue b/im-uniapp/App.vue index a2eea21..de5c4bc 100644 --- a/im-uniapp/App.vue +++ b/im-uniapp/App.vue @@ -492,6 +492,9 @@ uni-page-head { } // #endif +page { + background-color: $im-bg; +} .tab-page { position: relative; @@ -502,9 +505,15 @@ uni-page-head { top: $im-nav-bar-height; // #endif - // #ifndef H5 + // #ifdef APP-PLUS height: calc(100vh - var(--status-bar-height) - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度 top: calc($im-nav-bar-height + var(--status-bar-height)); + // #endif + + // #ifdef MP-WEIXIN + height: calc(100vh - $im-nav-bar-height); + top: $im-nav-bar-height; + // #endif color: $im-text-color; background-color: $im-bg; @@ -515,13 +524,20 @@ uni-page-head { .page { position: relative; // #ifdef H5 - height: calc(100vh - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度 + height: calc(100vh - $im-nav-bar-height); // h5平台100vh是包含了底部高度，需要减去 top: $im-nav-bar-height; // #endif - // #ifndef H5 + + // #ifdef APP-PLUS height: calc(100vh - var(--status-bar-height) - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度 top: calc($im-nav-bar-height + var(--status-bar-height)); // #endif + + // #ifdef MP-WEIXIN + height: calc(100vh - $im-nav-bar-height); + top: $im-nav-bar-height; + // #endif + color: $im-text-color; background-color: $im-bg; font-size: $im-font-size; diff --git a/im-uniapp/components/chat-message-item/chat-message-item.vue b/im-uniapp/components/chat-message-item/chat-message-item.vue index f95e34a..5b1a43d 100644 --- a/im-uniapp/components/chat-message-item/chat-message-item.vue +++ b/im-uniapp/components/chat-message-item/chat-message-item.vue @@ -56,21 +56,21 @@ + + + + + {{ msgInfo.content }} + + - - - - - {{ msgInfo.content }} - - 已读 未读 diff --git a/im-uniapp/components/nav-bar/nav-bar.vue b/im-uniapp/components/nav-bar/nav-bar.vue index b2fb631..71963ce 100644 --- a/im-uniapp/components/nav-bar/nav-bar.vue +++ b/im-uniapp/components/nav-bar/nav-bar.vue @@ -1,119 +1,122 @@ \ No newline at end of file diff --git a/im-uniapp/main.js b/im-uniapp/main.js index cbf6ae5..8fa350a 100644 --- a/im-uniapp/main.js +++ b/im-uniapp/main.js @@ -23,7 +23,6 @@ import switchBar from '@/components/bar/switch-bar' import * as recorder from './common/recorder-h5'; import ImageResize from "quill-image-resize-mp"; import Quill from "quill"; -import 'default-passive-events'; // 以下组件用于兼容部分手机聊天边框无法输入的问题 window.Quill = Quill; window.ImageResize = { default: ImageResize }; diff --git a/im-uniapp/package.json b/im-uniapp/package.json index 38770b3..602b736 100644 --- a/im-uniapp/package.json +++ b/im-uniapp/package.json @@ -4,7 +4,6 @@ "scripts": {} }, "dependencies": { - "default-passive-events": "^4.0.0", "pinyin-pro": "^3.23.1", "quill": "^1.3.7", "quill-image-resize-mp": "^3.0.1", diff --git a/im-uniapp/pages.json b/im-uniapp/pages.json index 68c9b75..e4df795 100644 --- a/im-uniapp/pages.json +++ b/im-uniapp/pages.json @@ -30,7 +30,9 @@ { "path": "pages/chat/chat-box", "style": { - "navigationStyle": "custom", + "mp-weixin": { + "disableScroll": true + }, "app-plus": { // adjustPan窗体高度不变，但窗体上推、adjustResize屏幕高度=webview窗体高度+软键盘高度 "softinputMode": "adjustResize" @@ -67,7 +69,13 @@ ], "globalStyle": { "navigationBarTitleText": "盒子IM", + "navigationBarTextStyle": "black", + /* #ifndef MP-WEIXIN */ "navigationStyle": "custom", + /* #endif */ + /* #ifdef MP-WEIXIN */ + "navigationStyle": "default", + /* #endif */ "navigationBarBackgroundColor": "#f7f7f7", "backgroundColor": "#f7f7f7" }, diff --git a/im-uniapp/pages/chat/chat-box.vue b/im-uniapp/pages/chat/chat-box.vue index 52fa4a2..d646007 100644 --- a/im-uniapp/pages/chat/chat-box.vue +++ b/im-uniapp/pages/chat/chat-box.vue @@ -50,52 +50,55 @@ - - - - - - 文件 - - - - - - 相册 - - - - - - 拍摄 - - - - 语音消息 - - - - 回执消息 - - - - - - 视频通话 - - - - 语音通话 - - - - 语音通话 + + + + + + + 文件 + + + + + + 相册 + + + + + + 拍摄 + + + + 语音消息 + + + + 回执消息 + + + + + + 视频通话 + + + + 语音通话 + + + + 语音通话 + + - - + @@ -133,6 +136,7 @@ export default { showRecord: false, chatMainHeight: 800, // 聊天窗口高度 keyboardHeight: 290, // 键盘高度 + screenHeight: 1000, // 屏幕高度 windowHeight: 1000, // 窗口高度 initHeight: 1000, // h5初始高度 atUserIds: [], @@ -184,7 +188,7 @@ export default { // 更新消息 tmpMessage.id = m.id; tmpMessage.status = m.status; - this.chatStore.insertMessage(tmpMessage, chat); + this.chatStore.updateMessage(tmpMessage, chat); // 会话置顶 this.moveChatToTop(); // 滚动到底部 @@ -331,12 +335,12 @@ export default { tmpMessage.id = m.id; tmpMessage.status = m.status; tmpMessage.content = m.content; - this.chatStore.insertMessage(tmpMessage, chat); + this.chatStore.updateMessage(tmpMessage, chat); }).catch(() => { // 更新消息 tmpMessage = JSON.parse(JSON.stringify(tmpMessage)); tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED; - this.chatStore.insertMessage(tmpMessage, chat); + this.chatStore.updateMessage(tmpMessage, chat); }) } }) @@ -393,10 +397,12 @@ export default { this.switchChatTabBox('tools') }, switchChatTabBox(chatTabBox) { - this.chatTabBox = chatTabBox; - this.reCalChatMainHeight(); - if (chatTabBox != 'tools' && this.$refs.fileUpload) { - this.$refs.fileUpload.hide() + if (this.chatTabBox != chatTabBox) { + this.chatTabBox = chatTabBox; + if (chatTabBox != 'tools' && this.$refs.fileUpload) { + this.$refs.fileUpload.hide() + } + setTimeout(() => this.reCalChatMainHeight(), 30); } }, selectEmoji(emoText) { @@ -454,7 +460,7 @@ export default { data.width = size.width; data.height = size.height; msgInfo.content = JSON.stringify(data) - this.chatStore.insertMessage(msgInfo, chat); + this.chatStore.updateMessage(msgInfo, chat); this.scrollToBottom(); }) return true; @@ -467,13 +473,13 @@ export default { msgInfo.id = m.id; msgInfo.status = m.status; this.isReceipt = false; - this.chatStore.insertMessage(msgInfo, file.chat); + this.chatStore.updateMessage(msgInfo, file.chat); }) }, onUploadImageFail(file, err) { let msgInfo = JSON.parse(JSON.stringify(file.msgInfo)); msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED; - this.chatStore.insertMessage(msgInfo, file.chat); + this.chatStore.updateMessage(msgInfo, file.chat); }, onUploadFileBefore(file) { // 检查是否被封禁 @@ -520,13 +526,13 @@ export default { msgInfo.id = m.id; msgInfo.status = m.status; this.isReceipt = false; - this.chatStore.insertMessage(msgInfo, file.chat); + this.chatStore.updateMessage(msgInfo, file.chat); }) }, onUploadFileFail(file, res) { let msgInfo = JSON.parse(JSON.stringify(file.msgInfo)); msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED; - this.chatStore.insertMessage(msgInfo, file.chat); + this.chatStore.updateMessage(msgInfo, file.chat); }, onResendMessage(msgInfo) { if (msgInfo.type != this.$enums.MESSAGE_TYPE.TEXT) { @@ -551,12 +557,12 @@ export default { tmpMessage.id = m.id; tmpMessage.status = m.status; tmpMessage.content = m.content; - this.chatStore.insertMessage(tmpMessage, chat); + this.chatStore.updateMessage(tmpMessage, chat); }).catch(() => { // 更新消息 tmpMessage = JSON.parse(JSON.stringify(tmpMessage)); tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED; - this.chatStore.insertMessage(tmpMessage, chat); + this.chatStore.updateMessage(tmpMessage, chat); }) }, onDeleteMessage(msgInfo) { @@ -670,9 +676,13 @@ export default { if (this.scrollTop < 10) { // 未渲染完成，重试一次 this.holdingScrollBar(); + } else { + // 让页面再滚动一下，解决部分ios手机出现白屏问题 + const delays = [100, 300, 1000]; + delays.forEach(delay => setTimeout(() => this.scrollTop += 5, delay)) } }); - }, 50) + }, 10) }, onShowMore() { if (this.isGroup) { @@ -815,39 +825,42 @@ export default { } }, reCalChatMainHeight() { - setTimeout(() => { - let h = this.windowHeight; - // 减去标题栏高度 - h -= 50; - // 减去键盘高度 - if (this.isShowKeyBoard || this.chatTabBox != 'none') { - h -= this.keyboardHeight; - this.scrollToBottom(); - } - // #ifndef H5 - // h5需要减去状态栏高度 - h -= uni.getSystemInfoSync().statusBarHeight; - // #endif - this.chatMainHeight = h; - 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); - }) + let sysInfo = uni.getSystemInfoSync(); + let h = this.windowHeight; + // 减去标题栏高度 + h -= 50; + // 减去键盘高度 + if (this.isShowKeyBoard || this.chatTabBox != 'none') { + // ios app的键盘高度不准，需要减去屏幕和窗口差 + // #ifdef APP-PLUS + if (sysInfo.platform == 'ios') { + h += this.screenHeight - this.windowHeight; } // #endif - }, 30) + h -= this.keyboardHeight; + this.scrollToBottom(); + } + + // APP需要减去状态栏高度 + // #ifdef APP-PLUS + h -= sysInfo.statusBarHeight; + // #endif + this.chatMainHeight = h; + // #ifndef APP + // ios浏览器键盘把页面顶起后，页面长度不会变化，这里把页面拉到顶部适配一下 + if (uni.getSystemInfoSync().platform == 'ios') { + // 不同手机需要的延时时间不一致，采用分段延时的方式处理 + const delays = [50, 100, 500]; + delays.forEach((delay) => { + setTimeout(() => { + uni.pageScrollTo({ + scrollTop: 0, + duration: 10 + }); + }, delay); + }) + } + // #endif }, listenKeyBoard() { // #ifdef H5 @@ -857,12 +870,13 @@ export default { return; } if (uni.getSystemInfoSync().platform == 'ios') { - // ios h5实现键盘监听 - window.addEventListener('focusin', this.focusInListener); - window.addEventListener('focusout', this.focusOutListener); // 监听键盘高度，ios13以上开始支持 if (window.visualViewport) { window.visualViewport.addEventListener('resize', this.resizeListener); + } else { + // ios h5实现键盘监听 + window.addEventListener('focusin', this.focusInListener); + window.addEventListener('focusout', this.focusOutListener); } } else { // 安卓h5实现键盘监听 @@ -876,9 +890,12 @@ export default { }, unListenKeyboard() { // #ifdef H5 - window.removeEventListener('resize', this.resizeListener); window.removeEventListener('focusin', this.focusInListener); window.removeEventListener('focusout', this.focusOutListener); + window.removeEventListener('resize', this.resizeListener); + if (window.visualViewport) { + window.visualViewport.removeEventListener('resize', this.resizeListener); + } // #endif // #ifndef H5 uni.offKeyboardHeightChange(this.keyBoardListener); @@ -889,7 +906,7 @@ export default { if (this.isShowKeyBoard) { this.keyboardHeight = res.height; // 获取并保存键盘高度 } - this.reCalChatMainHeight(); + setTimeout(() => this.reCalChatMainHeight(), 30); }, resizeListener() { let keyboardHeight = this.initHeight - window.innerHeight; @@ -897,20 +914,22 @@ export default { if (window.visualViewport && uni.getSystemInfoSync().platform == 'ios') { keyboardHeight = this.initHeight - window.visualViewport.height; } - console.log("resizeListener:", window.visualViewport.height) - this.isShowKeyBoard = keyboardHeight > 150; - if (this.isShowKeyBoard) { + let isShowKeyBoard = keyboardHeight > 150; + if (isShowKeyBoard) { this.keyboardHeight = keyboardHeight; } - this.reCalChatMainHeight(); + if (this.isShowKeyBoard != isShowKeyBoard) { + this.isShowKeyBoard = isShowKeyBoard; + setTimeout(() => this.reCalChatMainHeight(), 30); + } }, focusInListener() { this.isShowKeyBoard = true; - this.reCalChatMainHeight(); + setTimeout(() => this.reCalChatMainHeight(), 30); }, focusOutListener() { this.isShowKeyBoard = false; - this.reCalChatMainHeight(); + setTimeout(() => this.reCalChatMainHeight(), 30); }, showBannedTip() { let msgInfo = { @@ -1082,7 +1101,11 @@ export default { // 监听键盘高度 this.listenKeyBoard(); // 计算聊天窗口高度 + this.windowHeight = uni.getSystemInfoSync().windowHeight; + this.screenHeight = uni.getSystemInfoSync().screenHeight; + this.reCalChatMainHeight(); this.$nextTick(() => { + // 上面获取的windowHeight可能不准，重新计算一次聊天窗口高度 this.windowHeight = uni.getSystemInfoSync().windowHeight; this.reCalChatMainHeight(); this.scrollToBottom(); @@ -1132,10 +1155,10 @@ export default { } .chat-main-box { - // #ifdef H5 + // #ifndef APP-PLUS top: $im-nav-bar-height; // #endif - // #ifndef H5 + // #ifdef APP-PLUS top: calc($im-nav-bar-height + var(--status-bar-height)); // #endif position: fixed; @@ -1206,7 +1229,7 @@ export default { border-top: $im-border solid 1px; background-color: $im-bg; min-height: 80rpx; - margin-bottom: 14rpx; + padding-bottom: 14rpx; .iconfont { font-size: 60rpx; @@ -1250,44 +1273,45 @@ export default { background-color: $im-bg; .chat-tools { - display: flex; - flex-wrap: wrap; - align-items: top; - height: 310px; padding: 40rpx; box-sizing: border-box; - .chat-tools-item { - width: 25%; - padding: 16rpx; - box-sizing: border-box; + .chat-tools-list { display: flex; - flex-direction: column; - align-items: center; + flex-wrap: wrap; + align-content: center; + + .chat-tools-item { + width: 25%; + padding: 16rpx; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; - .tool-icon { - padding: 26rpx; - font-size: 54rpx; - border-radius: 20%; - background-color: white; - color: $icon-color; + .tool-icon { + padding: 26rpx; + font-size: 54rpx; + border-radius: 20%; + background-color: white; + color: $icon-color; - &:active { - background-color: $im-bg-active; + &:active { + background-color: $im-bg-active; + } } - } - .tool-name { - height: 60rpx; - line-height: 60rpx; - font-size: 28rpx; + .tool-name { + height: 60rpx; + line-height: 60rpx; + font-size: 28rpx; + } } } } .chat-emotion { - height: 310px; - padding: 20rpx; + padding: 40rpx; box-sizing: border-box; .emotion-item-list { diff --git a/im-uniapp/pages/friend/friend.vue b/im-uniapp/pages/friend/friend.vue index 8db42a5..fe416aa 100644 --- a/im-uniapp/pages/friend/friend.vue +++ b/im-uniapp/pages/friend/friend.vue @@ -12,7 +12,7 @@ 温馨提示：您现在还没有任何好友，快点击右上方'+'按钮添加好友吧~ - +