diff --git a/im-uniapp/common/emotion.js b/im-uniapp/common/emotion.js
index 8937732..7e301e0 100644
--- a/im-uniapp/common/emotion.js
+++ b/im-uniapp/common/emotion.js
@@ -7,25 +7,21 @@ const emoTextList = ['憨笑', '媚眼', '开心', '坏笑', '可怜', '爱心',
];
-
-let transform = (content) => {
- return content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, textToImg);
+let transform = (content, extClass) => {
+ return content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, (emoText)=>{
+ // 将匹配结果替换表情图片
+ let word = emoText.replace(/\#|\;/gi, '');
+ let idx = emoTextList.indexOf(word);
+ if (idx == -1) {
+ return emoText;
+ }
+ let path = textToPath(emoText);
+ let img = `
`;
+ return img;
+ });
}
-// 将匹配结果替换表情图片
-let textToImg = (emoText) => {
- let word = emoText.replace(/\#|\;/gi, '');
- let idx = emoTextList.indexOf(word);
- if (idx == -1) {
- return emoText;
- }
- let path = textToPath(emoText);
- let img = ``;
- return img;
-}
-
let textToPath = (emoText) => {
let word = emoText.replace(/\#|\;/gi, '');
@@ -38,6 +34,5 @@ let textToPath = (emoText) => {
export default {
emoTextList,
transform,
- textToImg,
textToPath
}
\ No newline at end of file
diff --git a/im-uniapp/components/chat-item/chat-item.vue b/im-uniapp/components/chat-item/chat-item.vue
index 47131c8..ed985f6 100644
--- a/im-uniapp/components/chat-item/chat-item.vue
+++ b/im-uniapp/components/chat-item/chat-item.vue
@@ -16,7 +16,7 @@
{{ atText }}
{{ chat.sendNickName + ': ' }}
-
+
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 2f43b00..71ab643 100644
--- a/im-uniapp/components/chat-message-item/chat-message-item.vue
+++ b/im-uniapp/components/chat-message-item/chat-message-item.vue
@@ -17,7 +17,7 @@
-
+
diff --git a/im-uniapp/components/file-upload/file-upload.vue b/im-uniapp/components/file-upload/file-upload.vue
index f204243..c364ffd 100644
--- a/im-uniapp/components/file-upload/file-upload.vue
+++ b/im-uniapp/components/file-upload/file-upload.vue
@@ -43,6 +43,12 @@ export default {
}
},
methods: {
+ show() {
+ this.$refs.lsjUpload.show();
+ },
+ hide() {
+ this.$refs.lsjUpload.hide();
+ },
onUploadEnd(item) {
let file = this.fileMap.get(item.path);
if (item.type == 'fail') {
diff --git a/im-uniapp/im.scss b/im-uniapp/im.scss
index 53bd6c6..f6d4dd6 100644
--- a/im-uniapp/im.scss
+++ b/im-uniapp/im.scss
@@ -171,4 +171,22 @@ button[size='mini'] {
uni-button + uni-button {
margin-top: 20rpx;
}
+}
+
+.emoji-large {
+ width: 64rpx;
+ height: 64rpx;
+ vertical-align: bottom;
+}
+
+.emoji-normal {
+ width: 54rpx;
+ height: 54rpx;
+ vertical-align: bottom;
+}
+
+.emoji-small {
+ width: 36rpx;
+ height: 36rpx;
+ vertical-align: bottom;
}
\ No newline at end of file
diff --git a/im-uniapp/manifest.json b/im-uniapp/manifest.json
index a0ed444..36b75c1 100644
--- a/im-uniapp/manifest.json
+++ b/im-uniapp/manifest.json
@@ -22,6 +22,9 @@
"Record" : {},
"Bluetooth" : {}
},
+ "softinput" : {
+ "mode" : "adjustResize"
+ },
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
diff --git a/im-uniapp/pages.json b/im-uniapp/pages.json
index 6a499e6..a17086a 100644
--- a/im-uniapp/pages.json
+++ b/im-uniapp/pages.json
@@ -7,8 +7,7 @@
"^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
}
},
- "pages": [
- {
+ "pages": [{
"path": "pages/login/login"
},
{
@@ -30,7 +29,14 @@
"path": "pages/common/user-info"
},
{
- "path": "pages/chat/chat-box"
+ "path": "pages/chat/chat-box",
+ "style": {
+ "navigationStyle": "custom",
+ "app-plus": {
+ // adjustPan窗体高度不变，但窗体上推、adjustResize屏幕高度=webview窗体高度+软键盘高度
+ "softinputMode": "adjustResize"
+ }
+ }
},
{
"path": "pages/chat/chat-private-video"
@@ -71,8 +77,7 @@
"selectedColor": "#587ff0",
"borderStyle": "black",
"backgroundColor": "#ffffff",
- "list": [
- {
+ "list": [{
"pagePath": "pages/chat/chat",
"iconPath": "static/tarbar/chat.png",
"selectedIconPath": "static/tarbar/chat_active.png",
diff --git a/im-uniapp/pages/chat/chat-box.vue b/im-uniapp/pages/chat/chat-box.vue
index add8199..0f2f015 100644
--- a/im-uniapp/pages/chat/chat-box.vue
+++ b/im-uniapp/pages/chat/chat-box.vue
@@ -1,49 +1,54 @@
{{ title }}
-
-
-
-
-
-
-
-
-
- :
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
-
-
-
+
+ :
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
@@ -60,7 +65,7 @@
-
@@ -91,9 +96,10 @@
-
+
-
@@ -122,29 +128,31 @@ export default {
friend: {},
group: {},
groupMembers: [],
- sendText: "",
isReceipt: false, // 是否回执消息
scrollMsgIdx: 0, // 滚动条定位为到哪条消息
chatTabBox: 'none',
- showKeyBoard: false,
showRecord: false,
- keyboardHeight: 322,
+ keyboardHeight: 300,
atUserIds: [],
needScrollToBottom: false, // 需要滚动到底部
showMinIdx: 0, // 下标小于showMinIdx的消息不显示，否则可能很卡
reqQueue: [], // 请求队列
isSending: false, // 是否正在发送请求
- isH5: false // h5键盘会强制推起页面，有些地方要区别对待
+ isShowKeyBoard: false, // 键盘是否正在弹起
+ editorCtx: null, // 编辑器上下文
+ isEmpty: true, // 编辑器是否为空
+ isFocus: false, // 编辑器是否焦点
+ isReadOnly: false // 编辑器是否只读
}
},
methods: {
onRecorderInput() {
this.showRecord = true;
- this.switchChatTabBox('none', true);
+ this.switchChatTabBox('none');
},
onKeyboardInput() {
this.showRecord = false;
- this.switchChatTabBox('none', false);
+ this.switchChatTabBox('none');
},
onSendRecord(data) {
let msgInfo = {
@@ -250,35 +258,49 @@ export default {
}
},
sendTextMessage() {
- if (!this.sendText.trim() && this.atUserIds.length == 0) {
- return uni.showToast({
- title: "不能发送空白信息",
- icon: "none"
- });
- }
- let receiptText = this.isReceipt ? "【回执消息】" : "";
- let atText = this.createAtText();
- let msgInfo = {
- content: receiptText + this.sendText + atText,
- atUserIds: this.atUserIds,
- receipt: this.isReceipt,
- type: 0
- }
- this.sendText = "";
- // 填充对方id
- this.fillTargetId(msgInfo, this.chat.targetId);
- this.sendMessageRequest(msgInfo).then((m) => {
- m.selfSend = true;
- this.chatStore.insertMessage(m);
- // 会话置顶
- this.moveChatToTop();
- }).finally(() => {
- // 滚动到底部
- this.scrollToBottom();
- // 清空@用户列表
- this.atUserIds = [];
- this.isReceipt = false;
- });
+ this.editorCtx.getContents({
+ success: (e) => {
+ let sendText = this.isReceipt ? "【回执消息】" : "";
+ e.delta.ops.forEach((op) => {
+ if (op.insert.image) {
+ // emo表情
+ sendText += `#${op.attributes.alt};`
+ } else(
+ // 文字
+ sendText += op.insert
+ )
+ })
+ if (!sendText.trim() && this.atUserIds.length == 0) {
+ return uni.showToast({
+ title: "不能发送空白信息",
+ icon: "none"
+ });
+ }
+ let receiptText = this.isReceipt ? "【回执消息】" : "";
+ let atText = this.createAtText();
+ let msgInfo = {
+ content: receiptText + sendText + atText,
+ atUserIds: this.atUserIds,
+ receipt: this.isReceipt,
+ type: 0
+ }
+ // 填充对方id
+ this.fillTargetId(msgInfo, this.chat.targetId);
+ this.sendMessageRequest(msgInfo).then((m) => {
+ m.selfSend = true;
+ this.chatStore.insertMessage(m, this.chat);
+ // 会话置顶
+ this.moveChatToTop();
+ }).finally(() => {
+ // 滚动到底部
+ this.scrollToBottom();
+ // 清空编辑框数据
+ this.atUserIds = [];
+ this.isReceipt = false;
+ this.editorCtx.clear();
+ });
+ }
+ })
},
createAtText() {
let atText = "";
@@ -325,31 +347,35 @@ export default {
},
onShowEmoChatTab() {
this.showRecord = false;
- this.switchChatTabBox('emo', true)
+ this.switchChatTabBox('emo')
},
onShowToolsChatTab() {
this.showRecord = false;
- this.switchChatTabBox('tools', true)
+ this.switchChatTabBox('tools')
},
- switchChatTabBox(chatTabBox, hideKeyBoard) {
+ switchChatTabBox(chatTabBox) {
this.chatTabBox = chatTabBox;
- if (hideKeyBoard) {
- uni.hideKeyboard();
- this.showKeyBoard = false;
+ if (chatTabBox != 'tools' && this.$refs.fileUpload) {
+ this.$refs.fileUpload.hide()
}
},
selectEmoji(emoText) {
- this.sendText += `#${emoText};`;
- },
- onKeyboardheightchange(e) {
- if (e.detail.height > 0) {
- this.showKeyBoard = true;
- this.switchChatTabBox('none', false)
- this.keyboardHeight = this.rpxTopx(e.detail.height);
- this.scrollToBottom();
- } else {
- this.showKeyBoard = false;
- }
+ let path = this.$emo.textToPath(emoText)
+ // 先把键盘禁用了，否则会重新弹出键盘
+ this.isReadOnly = true;
+ this.isEmpty = false;
+ this.$nextTick(() => {
+ this.editorCtx.insertImage({
+ src: path,
+ alt: emoText,
+ extClass: 'emoji-small',
+ nowrap: true,
+ complete: () => {
+ this.isReadOnly = false;
+ this.editorCtx.blur();
+ }
+ });
+ })
},
onUploadImageBefore(file) {
let data = {
@@ -540,14 +566,22 @@ export default {
}
},
onTextInput(e) {
- let idx = e.detail.cursor - 1;
- if (this.chat.type == 'GROUP' && e.detail.value[idx] == '@') {
- this.openAtBox();
- let sendText = e.detail.value.replace("@", '');
- this.$nextTick(() => {
- this.sendText = sendText;
- })
- }
+ this.isEmpty = e.detail.html == '
'
+ },
+ onEditorReady() {
+ const query = uni.createSelectorQuery().in(this);
+ query.select('#editor').context((res) => {
+ this.editorCtx = res.context
+ }).exec()
+ },
+ onEditorFocus(e) {
+ this.isFocus = true;
+ this.scrollToBottom()
+ this.switchChatTabBox('none')
+
+ },
+ onEditorBlur(e) {
+ this.isFocus = false;
},
loadReaded(fid) {
this.$http({
@@ -638,21 +672,27 @@ export default {
})
}
},
- listenKeyBoardForH5() {
+ listenKeyBoard() {
+ // #ifdef H5
// 由于H5无法触发TextArea的@keyboardheightchange事件，所以通过
// 监听屏幕高度变化来实现键盘监听
let initHeight = window.innerHeight;
window.addEventListener('resize', () => {
let keyboardHeight = initHeight - window.innerHeight;
- if (keyboardHeight > 0) {
- this.keyboardHeight = keyboardHeight - 20;
- this.showKeyBoard = true;
- this.switchChatTabBox('none', false)
- this.scrollToBottom();
- } else {
- this.showKeyBoard = false;
+ this.isShowKeyBoard = keyboardHeight > 0;
+ if (this.isShowKeyBoard) {
+ this.keyboardHeight = keyboardHeight;
}
});
+ // #endif
+ // #ifndef H5
+ uni.onKeyboardHeightChange((res) => {
+ this.isShowKeyBoard = res.height > 0;
+ if (this.isShowKeyBoard) {
+ this.keyboardHeight = res.height; // 获取并保存键盘高度
+ }
+ });
+ // #endif
},
generateId() {
// 生成临时id
@@ -705,10 +745,30 @@ export default {
}
})
return atUsers;
+ },
+ chatMainHeight() {
+ 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
+ return h;
}
},
watch: {
- messageSize: function (newSize, oldSize) {
+ messageSize: function(newSize, oldSize) {
// 接收到消息时滚动到底部
if (newSize > oldSize) {
let pages = getCurrentPages();
@@ -730,10 +790,6 @@ export default {
}
},
onLoad(options) {
- // #ifdef H5
- this.isH5 = true;
- this.listenKeyBoardForH5();
- // #endif
// 聊天数据
this.chat = this.chatStore.chats[options.chatIdx];
// 初始状态只显示20条消息
@@ -752,6 +808,8 @@ export default {
this.chatStore.activeChat(options.chatIdx);
// 复位回执消息
this.isReceipt = false;
+ // 监听键盘高度
+ this.listenKeyBoard();
},
onShow() {
if (this.needScrollToBottom) {
@@ -765,9 +823,11 @@ export default {