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

uniapp 体验优化

master
xie.bx 3 years ago
parent
d9cd29b4da
commit
50bb28e1b4
13 changed files with 123 additions and 114 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. 59
      im-uniapp/App.vue
  2. 5
      im-uniapp/common/request.js
  3. 2
      im-uniapp/main.js
  4. 25
      im-uniapp/pages/chat/chat-box.vue
  5. 4
      im-uniapp/pages/group/group-edit.vue
  6. 53
      im-uniapp/pages/group/group-info.vue
  7. 2
      im-uniapp/pages/login/login.vue
  8. 3
      im-uniapp/pages/mine/mine-edit.vue
  9. 3
      im-uniapp/pages/mine/mine-password.vue
  10. 2
      im-uniapp/pages/mine/mine.vue
  11. 6
      im-uniapp/store/friendStore.js
  12. 5
      im-uniapp/store/groupStore.js
  13. 8
      im-uniapp/store/userStore.js

59
im-uniapp/App.vue
View File

@ -1,5 +1,8 @@
<script> <script>
import store from './store' import store from './store';
import http from './common/request';
import * as enums from './common/enums';
import * as wsApi from './common/wssocket';
export default { export default {
data() { data() {
@ -10,7 +13,6 @@
methods: { methods: {
init(loginInfo) { init(loginInfo) {
// 加载数据 // 加载数据
console.log(this)
store.dispatch("load").then(() => { store.dispatch("load").then(() => {
// 初始化websocket // 初始化websocket
this.initWebSocket(loginInfo); this.initWebSocket(loginInfo);
@ -18,14 +20,15 @@
console.log(e); console.log(e);
this.exit(); this.exit();
}) })
}, },
initWebSocket(loginInfo) { initWebSocket(loginInfo) {
let userId = this.$store.state.userStore.userInfo.id; let userId = store.state.userStore.userInfo.id;
this.$wsApi.createWebSocket(process.env.WS_URL, loginInfo.accessToken); wsApi.createWebSocket(process.env.WS_URL, loginInfo.accessToken);
this.$wsApi.onopen(() => { wsApi.onopen(() => {
this.pullUnreadMessage(); this.pullUnreadMessage();
}); });
this.$wsApi.onmessage((cmd, msgInfo) => { wsApi.onmessage((cmd, msgInfo) => {
if (cmd == 2) { if (cmd == 2) {
// 异地登录，强制下线 // 异地登录，强制下线
uni.showModal({ uni.showModal({
@ -48,26 +51,26 @@
}, },
pullUnreadMessage() { pullUnreadMessage() {
// 拉取未读私聊消息 // 拉取未读私聊消息
this.$http({ http({
url: "/message/private/pullUnreadMessage", url: "/message/private/pullUnreadMessage",
method: 'POST' method: 'POST'
}); });
// 拉取未读群聊消息 // 拉取未读群聊消息
this.$http({ http({
url: "/message/group/pullUnreadMessage", url: "/message/group/pullUnreadMessage",
method: 'POST' method: 'POST'
}); });
}, },
handlePrivateMessage(msg) { handlePrivateMessage(msg) {
let friendId = msg.selfSend ? msg.recvId : msg.sendId; let friendId = msg.selfSend ? msg.recvId : msg.sendId;
let friend = this.$store.state.friendStore.friends.find((f) => f.id == friendId); let friend = store.state.friendStore.friends.find((f) => f.id == friendId);
if (!friend) { if (!friend) {
this.$http({ http({
url: `/friend/find/${msg.sendId}`, url: `/friend/find/${msg.sendId}`,
method: 'GET' method: 'GET'
}).then((friend) => { }).then((friend) => {
this.insertPrivateMessage(friend, msg); this.insertPrivateMessage(friend, msg);
this.$store.commit("addFriend", friend); store.commit("addFriend", friend);
}) })
} else { } else {
// 好友列表不存在好友信息，则发请求获取好友信息 // 好友列表不存在好友信息，则发请求获取好友信息
@ -77,20 +80,8 @@
}, },
insertPrivateMessage(friend, msg) { insertPrivateMessage(friend, msg) {
// webrtc 信令 // webrtc 信令
if (msg.type >= this.$enums.MESSAGE_TYPE.RTC_CALL && if (msg.type >= enums.MESSAGE_TYPE.RTC_CALL &&
msg.type <= this.$enums.MESSAGE_TYPE.RTC_CANDIDATE) { msg.type <= enums.MESSAGE_TYPE.RTC_CANDIDATE) {}
// // 呼叫
// if (msg.type == this.$enums.MESSAGE_TYPE.RTC_CALL ||
// msg.type == this.$enums.MESSAGE_TYPE.RTC_CANCEL) {
// this.$store.commit("showVideoAcceptorBox", friend);
// this.$refs.videoAcceptor.handleMessage(msg)
// } else {
// this.$refs.videoAcceptor.close()
// this.$refs.privateVideo.handleMessage(msg)
// }
// return;
}
let chatInfo = { let chatInfo = {
type: 'PRIVATE', type: 'PRIVATE',
@ -99,22 +90,22 @@
headImage: friend.headImage headImage: friend.headImage
}; };
// 打开会话 // 打开会话
this.$store.commit("openChat", chatInfo); store.commit("openChat", chatInfo);
// 插入消息 // 插入消息
this.$store.commit("insertMessage", msg); store.commit("insertMessage", msg);
// 播放提示音 // 播放提示音
!msg.selfSend && this.playAudioTip(); !msg.selfSend && this.playAudioTip();
}, },
handleGroupMessage(msg) { handleGroupMessage(msg) {
let group = this.$store.state.groupStore.groups.find((g) => g.id == msg.groupId); let group = store.state.groupStore.groups.find((g) => g.id == msg.groupId);
if (!group) { if (!group) {
this.$http({ http({
url: `/group/find/${msg.groupId}`, url: `/group/find/${msg.groupId}`,
method: 'get' method: 'get'
}).then((group) => { }).then((group) => {
this.insertGroupMessage(group, msg); this.insertGroupMessage(group, msg);
this.$store.commit("addGroup", group); store.commit("addGroup", group);
}) })
} else { } else {
// 群聊缓存存在，直接插入群聊消息 // 群聊缓存存在，直接插入群聊消息
@ -130,14 +121,15 @@
headImage: group.headImageThumb headImage: group.headImageThumb
}; };
// 打开会话 // 打开会话
this.$store.commit("openChat", chatInfo); store.commit("openChat", chatInfo);
// 插入消息 // 插入消息
this.$store.commit("insertMessage", msg); store.commit("insertMessage", msg);
// 播放提示音 // 播放提示音
!msg.selfSend && this.playAudioTip(); !msg.selfSend && this.playAudioTip();
}, },
exit() { exit() {
this.$wsApi.closeWebSocket(); console.log("exit");
wsApi.closeWebSocket();
uni.removeStorageSync("loginInfo"); uni.removeStorageSync("loginInfo");
uni.navigateTo({ uni.navigateTo({
url: "/pages/login/login" url: "/pages/login/login"
@ -149,7 +141,6 @@
// this.audioTip.src = "/static/audio/tip.wav"; // this.audioTip.src = "/static/audio/tip.wav";
// this.audioTip.play(); // this.audioTip.play();
} }
}, },
onLaunch() { onLaunch() {
// 登录状态校验 // 登录状态校验

5
im-uniapp/common/request.js
View File

@ -93,9 +93,6 @@ const navToLogin = () => {
title: "登录过期，请需要重新登录", title: "登录过期，请需要重新登录",
duration: 1500 duration: 1500
}) })
uni.removeStorageSync("loginInfo"); getApp().exit();
uni.navigateTo({
url: '/pages/login/login'
});
} }
export default request; export default request;

2
im-uniapp/main.js
View File

@ -14,8 +14,6 @@ export function createApp() {
app.config.globalProperties.$wsApi = socketApi; app.config.globalProperties.$wsApi = socketApi;
app.config.globalProperties.$emo = emotion; app.config.globalProperties.$emo = emotion;
app.config.globalProperties.$enums = enums; app.config.globalProperties.$enums = enums;
app.config.globalProperties.$init = (data)=>{getApp().init(data)};
app.config.globalProperties.$exit = (data)=>{getApp().exit()};
return { return {
app app
} }

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

@ -16,15 +16,14 @@
<view class="send-bar"> <view class="send-bar">
<view class="iconfont icon-voice-circle"></view> <view class="iconfont icon-voice-circle"></view>
<view class="send-text"> <view class="send-text">
<textarea class="send-text-area" v-model="sendText" auto-height <textarea class="send-text-area" v-model="sendText" auto-height :show-confirm-bar="false"
:show-confirm-bar="false" :adjust-position="false" :adjust-position="false" @focus="onSendTextFoucs" @confirm="sendTextMessage()"
@focus="onSendTextFoucs" @confirm="sendTextMessage()" @keyboardheightchange="onKeyboardheightchange" confirm-type="send" @blur="onSendTextBlur"
@keyboardheightchange="onKeyboardheightchange"
confirm-type="send" @blur="onSendTextBlur"
confirm-hold :hold-keyboard="true"></textarea> confirm-hold :hold-keyboard="true"></textarea>
</view> </view>
<view class="iconfont icon-icon_emoji" @touchend.prevent="switchChatTabBox('emo',true)"></view> <view class="iconfont icon-icon_emoji" @touchend.prevent="switchChatTabBox('emo',true)"></view>
<view v-show="sendText==''" class="iconfont icon-add-circle" @touchend.prevent="switchChatTabBox('tools',true)"> <view v-show="sendText==''" class="iconfont icon-add-circle"
@touchend.prevent="switchChatTabBox('tools',true)">
</view> </view>
<button v-show="sendText!=''" class="btn-send" type="primary" @touchend.prevent="sendTextMessage()" <button v-show="sendText!=''" class="btn-send" type="primary" @touchend.prevent="sendTextMessage()"
size="mini">发送</button> size="mini">发送</button>
@ -303,6 +302,20 @@
}, },
messageAction() { messageAction() {
return `/message/${this.chat.type.toLowerCase()}/send`; return `/message/${this.chat.type.toLowerCase()}/send`;
},
messageSize() {
if (!this.chat || !this.chat.messages) {
return 0;
}
return this.chat.messages.length;
}
},
watch: {
messageSize: function(newSize, oldSize) {
// 接收到消息时滚动到底部
if (newSize > oldSize) {
this.scrollToBottom();
}
} }
}, },
onLoad(options) { onLoad(options) {

4
im-uniapp/pages/group/group-edit.vue
View File

@ -81,13 +81,13 @@
uni.showToast({ uni.showToast({
title: `群聊创建成功，快邀请小伙伴进群吧`, title: `群聊创建成功，快邀请小伙伴进群吧`,
icon: 'none', icon: 'none',
duration: 2000 duration: 1500
}); });
setTimeout(()=>{ setTimeout(()=>{
uni.navigateTo({ uni.navigateTo({
url: "/pages/group/group-info?id="+group.id url: "/pages/group/group-info?id="+group.id
}); });
},2000) },1500)
}) })
}, },

53
im-uniapp/pages/group/group-info.vue
View File

@ -21,7 +21,7 @@
<view class="group-detail"> <view class="group-detail">
<uni-section title="群聊名称:" titleFontSize="30rpx"> <uni-section title="群聊名称:" titleFontSize="30rpx">
<template v-slot:right> <template v-slot:right>
<text>{{group.name}}</text> <text>{{groupInfo.name}}</text>
</template> </template>
</uni-section> </uni-section>
<uni-section title="群主:" titleFontSize="30rpx"> <uni-section title="群主:" titleFontSize="30rpx">
@ -32,16 +32,16 @@
<uni-section title="群聊备注:" titleFontSize="30rpx"> <uni-section title="群聊备注:" titleFontSize="30rpx">
<template v-slot:right> <template v-slot:right>
<text> {{group.remark}}</text> <text> {{groupInfo.remark}}</text>
</template> </template>
</uni-section> </uni-section>
<uni-section title="我在本群的昵称:" titleFontSize="30rpx"> <uni-section title="我在本群的昵称:" titleFontSize="30rpx">
<template v-slot:right> <template v-slot:right>
<text> {{group.aliasName}}</text> <text> {{groupInfo.aliasName}}</text>
</template> </template>
</uni-section> </uni-section>
<uni-section title="群公告:" titleFontSize="30rpx"> <uni-section title="群公告:" titleFontSize="30rpx">
<uni-notice-bar :text="group.notice" /> <uni-notice-bar :text="groupInfo.notice" />
</uni-section> </uni-section>
<view class="group-edit" @click="onEditGroup()">修改群聊资料 > </view> <view class="group-edit" @click="onEditGroup()">修改群聊资料 > </view>
</view> </view>
@ -57,7 +57,7 @@
export default { export default {
data() { data() {
return { return {
group: {}, groupId: null,
groupMembers: [] groupMembers: []
} }
}, },
@ -65,7 +65,7 @@
onFocusSearch() {}, onFocusSearch() {},
onInviteMember() { onInviteMember() {
uni.navigateTo({ uni.navigateTo({
url: `/pages/group/group-invite?id=${this.group.id}` url: `/pages/group/group-invite?id=${this.groupId}`
}) })
}, },
onShowUserInfo(userId) { onShowUserInfo(userId) {
@ -75,20 +75,20 @@
}, },
onShowMoreMmeber() { onShowMoreMmeber() {
uni.navigateTo({ uni.navigateTo({
url: `/pages/group/group-member?id=${this.group.id}` url: `/pages/group/group-member?id=${this.groupId}`
}) })
}, },
onEditGroup() { onEditGroup() {
uni.navigateTo({ uni.navigateTo({
url: `/pages/group/group-edit?id=${this.group.id}` url: `/pages/group/group-edit?id=${this.groupId}`
}) })
}, },
onSendMessage() { onSendMessage() {
let chat = { let chat = {
type: 'GROUP', type: 'GROUP',
targetId: this.group.id, targetId: this.groupInfo.id,
showName: this.group.remark, showName: this.groupInfo.remark,
headImage: this.group.headImage, headImage: this.groupInfo.headImage,
}; };
this.$store.commit("openChat", chat); this.$store.commit("openChat", chat);
uni.navigateTo({ uni.navigateTo({
@ -103,14 +103,14 @@
if (res.cancel) if (res.cancel)
return; return;
this.$http({ this.$http({
url: `/group/quit/${this.group.id}`, url: `/group/quit/${this.groupId}`,
method: 'DELETE' method: 'DELETE'
}).then(() => { }).then(() => {
this.$store.commit("removeGroup", this.group.id); this.$store.commit("removeGroup", this.groupId);
this.$store.commit("removeGroupChat", this.group.id); this.$store.commit("removeGroupChat", this.groupId);
uni.showModal({ uni.showModal({
title: `退出成功`, title: `退出成功`,
content: `您已退出群聊'${this.group.name}'`, content: `您已退出群聊'${this.groupInfo.name}'`,
showCancel: false, showCancel: false,
success: () => { success: () => {
uni.navigateBack(); uni.navigateBack();
@ -123,19 +123,19 @@
onDissolveGroup() { onDissolveGroup() {
uni.showModal({ uni.showModal({
title: '确认解散?', title: '确认解散?',
content: `确认要解散群聊'${this.group.name}'吗?`, content: `确认要解散群聊'${this.groupInfo.name}'吗?`,
success: (res) => { success: (res) => {
if (res.cancel) if (res.cancel)
return; return;
this.$http({ this.$http({
url: `/group/delete/${this.group.id}`, url: `/group/delete/${this.groupId}`,
method: 'delete' method: 'delete'
}).then(() => { }).then(() => {
this.$store.commit("removeGroup", this.group.id); this.$store.commit("removeGroup", this.groupId);
this.$store.commit("removeGroupChat", this.group.id); this.$store.commit("removeGroupChat", this.groupId);
uni.showModal({ uni.showModal({
title: `解散成功`, title: `解散成功`,
content: `群聊'${this.group.name}'已解散`, content: `群聊'${this.groupInfo.name}'已解散`,
showCancel: false, showCancel: false,
success: () => { success: () => {
uni.navigateBack(); uni.navigateBack();
@ -151,7 +151,6 @@
url: `/group/find/${id}`, url: `/group/find/${id}`,
method: 'GET' method: 'GET'
}).then((group) => { }).then((group) => {
this.group = group;
// 更新聊天页面的群聊信息 // 更新聊天页面的群聊信息
this.$store.commit("updateChatFromGroup", group); this.$store.commit("updateChatFromGroup", group);
// 更新聊天列表的群聊信息 // 更新聊天列表的群聊信息
@ -169,20 +168,26 @@
} }
}, },
computed: { computed: {
groupInfo() {
let groups = this.$store.state.groupStore.groups;
return groups.find(g => g.id == this.groupId)
},
ownerName() { ownerName() {
let member = this.groupMembers.find((m) => m.userId == this.group.ownerId); let member = this.groupMembers.find((m) => m.userId == this.groupInfo.ownerId);
return member && member.aliasName; return member && member.aliasName;
}, },
isOwner() { isOwner() {
return this.group.ownerId == this.$store.state.userStore.userInfo.id; return this.groupInfo.ownerId == this.$store.state.userStore.userInfo.id;
}, }
}, },
onLoad(options) { onLoad(options) {
this.groupId = options.id;
// 查询群聊信息 // 查询群聊信息
this.loadGroupInfo(options.id); this.loadGroupInfo(options.id);
// 查询群聊成员 // 查询群聊成员
this.loadGroupMembers(options.id) this.loadGroupMembers(options.id)
} }
} }
</script> </script>

2
im-uniapp/pages/login/login.vue
View File

@ -49,7 +49,7 @@
console.log("登录成功,自动跳转到聊天页面...") console.log("登录成功,自动跳转到聊天页面...")
uni.setStorageSync("loginInfo", data); uni.setStorageSync("loginInfo", data);
// 调用App.vue的初始化方法 // 调用App.vue的初始化方法
this.$init(data); getApp().init(data)
// 跳转到聊天页面 // 跳转到聊天页面
uni.switchTab({ uni.switchTab({
url: "/pages/chat/chat" url: "/pages/chat/chat"

3
im-uniapp/pages/mine/mine-edit.vue
View File

@ -53,6 +53,9 @@
title:"修改成功", title:"修改成功",
icon: 'none' icon: 'none'
}); });
setTimeout(()=>{
uni.navigateBack();
},1000);
}) })
} }
}, },

3
im-uniapp/pages/mine/mine-password.vue
View File

@ -82,6 +82,9 @@
title: "修改密码成功", title: "修改密码成功",
icon: 'none' icon: 'none'
}) })
setTimeout(()=>{
uni.navigateBack();
},1000);
}) })
}).catch(err => { }).catch(err => {
console.log('表单错误信息：', err); console.log('表单错误信息：', err);

2
im-uniapp/pages/mine/mine.vue
View File

@ -52,7 +52,7 @@
title: '确认退出?', title: '确认退出?',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
this.$exit(); getApp().exit()
} }
} }
}); });

6
im-uniapp/store/friendStore.js
View File

@ -1,4 +1,4 @@
import request from '../common/request'; import http from '../common/request';
export default { export default {
@ -50,7 +50,7 @@ export default {
actions: { actions: {
loadFriend(context) { loadFriend(context) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
request({ http({
url: '/friend/list', url: '/friend/list',
method: 'GET' method: 'GET'
}).then((friends) => { }).then((friends) => {
@ -68,7 +68,7 @@ export default {
context.state.friends.forEach((f) => { context.state.friends.forEach((f) => {
userIds.push(f.id) userIds.push(f.id)
}); });
request({ http({
url: '/user/online?userIds='+ userIds.join(','), url: '/user/online?userIds='+ userIds.join(','),
method: 'GET' method: 'GET'
}).then((onlineIds) => { }).then((onlineIds) => {

5
im-uniapp/store/groupStore.js
View File

@ -1,7 +1,6 @@
import request from '@/common/request'; import http from '@/common/request';
export default { export default {
state: { state: {
groups: [], groups: [],
activeIndex: -1, activeIndex: -1,
@ -39,7 +38,7 @@ export default {
actions: { actions: {
loadGroup(context) { loadGroup(context) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
request({ http({
url: '/group/list', url: '/group/list',
method: 'GET' method: 'GET'
}).then((groups) => { }).then((groups) => {

8
im-uniapp/store/userStore.js
View File

@ -1,9 +1,8 @@
import {USER_STATE} from "../common/enums" import {USER_STATE} from "../common/enums"
import request from '../common/request' import http from '../common/request'
export default { export default {
state: { state: {
userInfo: {}, userInfo: {},
state: USER_STATE.FREE state: USER_STATE.FREE
@ -11,7 +10,8 @@ export default {
mutations: { mutations: {
setUserInfo(state, userInfo) { setUserInfo(state, userInfo) {
state.userInfo = userInfo; // 使用深拷贝方式，否则小程序页面不刷新
Object.assign(state.userInfo, userInfo);
}, },
setUserState(state, userState) { setUserState(state, userState) {
state.state = userState; state.state = userState;
@ -20,7 +20,7 @@ export default {
actions:{ actions:{
loadUser(context){ loadUser(context){
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
request({ http({
url: '/user/self', url: '/user/self',
method: 'GET' method: 'GET'
}).then((userInfo) => { }).then((userInfo) => {

Write Preview
Loading…
Cancel
Save