山东大学软件学院创新实训——飞讯（七）

小小机灵猿

已于 2022-06-11 20:21:49 修改

阅读量148

点赞数

分类专栏：创新实训-小组合作平台文章标签：前端

于 2022-04-24 10:14:17 首次发布

本文链接：https://blog.csdn.net/weixin_54533613/article/details/124375898

版权

创新实训-小组合作平台专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.目标概述

由于组员的退队，导致APP端这一重要部分被闲置，进展很少，因此上一周我对uniapp进行了学习和初步实践。这一周我计划将uniapp的消息接收主页、个人展示主页、好友列表页面进行完成，从而能够进行静态地展示消息的接收、好友的查看和个人资料的展示，为后续的聊天界面打下基础，验证当前方案的可行性。

二.功能设计与实现

消息接收界面

（1）界面设计

消息接收界面总体设计：

点击头像可以弹出侧边栏：

（2）功能实现

当发送消息或收到通知时，会对接收到的信息进行监听，当监听到消息的传递，则会渲染到页面上，从而提示用户有新的消息到达。

onReady() {
			this.getMyInfo();
			this.getFriendRequest();
			this.getConversationList();
			this.onPullDownRefresh();
			uni.startPullDownRefresh({
				
			})
		},

getMyInfo:function(){
				let promise_myinfo = tim.getMyProfile();
				promise_myinfo.then((imResponse)=> {
				  const info = imResponse.data;
				  console.log(info); 
				  this.info = info;
				  console.log(this.info);
				}).catch(function(imError) {
				  console.warn('getMyProfile error:', imError); 
				});
			},
			getFriendRequest:function(){
				let promise_request = tim.getFriendApplicationList();
				promise_request.then((imResponse)=> {
				  const { friendApplicationList, unreadCount } = imResponse.data;
				  console.log("----------------");
				  console.log(friendApplicationList);
				  console.log(unreadCount);
				  this.friendApplicationList = friendApplicationList;
				  this.unreadCount = unreadCount;
				}).catch(function(imError) {
				  console.warn('getFriendApplicationList error:', imError); // 获取好友申请列表失败的相关信息
				});
			},
			goGroupRequest:function(e){
				uni.navigateTo({
					url:"../groupRequest/groupRequest?conversationID=" + e
				})
			},
			getConversationList:function(){
				// 拉取会话列表
				let promise = tim.getConversationList();
				promise.then((imResponse)=> {
					this.conversationList = []
					this.conversationListGroup = []
					this.conversationListSystem = []
					const conversationList = imResponse.data.conversationList; 
					// 会话列表，用该列表覆盖原有的会话列表
					for (let i = 0; i < conversationList.length; i++) {
						if(conversationList[i].type == "C2C"){
							this.conversationList.push(conversationList[i]);
						}
						else if(conversationList[i].type == "GROUP"){
							this.conversationListGroup.push(conversationList[i])
						}
						else if(conversationList[i].type == "@TIM#SYSTEM"){
							this.conversationListSystem.push(conversationList[i]);
						}
					}
					 //this.conversationList = conversationList;
					 console.log('aaaaaaaaaaaaaa');
					 console.log(conversationList);
					 
				}).catch((imError)=> {	
					console.log( imError); // 获取会话列表失败的相关信息
				});
				console.log(this.conversationList);
			},

侧边栏采用了uni-ui的抽屉组件，代码如下：

<view>
			<uni-drawer ref="showRight" mode="left" :mask-click="false" @change="change($event,'showRight')" :maskClick="true" :width="200">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view style="margin-top: 120rpx;">
							<uni-list>
								<view style="margin-left: 90rpx;">
									<u-avatar :src="info.avatar" shape="circle" size="100"></u-avatar>
								</view>
								<view @tap="goUserhome(info.userID)">
									<uni-list-item showArrow title="主页" />
								</view>
								<view>
									<uni-list-item showArrow title="资料" />
								</view>
								<view>
									<uni-list-item showArrow title="签到" />
								</view>
								<view>
									<uni-list-item showArrow title="日志" />
								</view>
								<view>
									<uni-list-item showArrow title="问卷" />
								</view>
							</uni-list>
							<view style="margin-top: 40rpx;margin-left: 20rpx;margin-right: 20rpx;">
								<u-button type="warning" :plain="true" text="退出登录"></u-button>
							</view>
							
						</view>
						
					</scroll-view>
				</view>
			</uni-drawer>
		</view>

onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		},

confirm() {},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},

好友列表界面

（1）界面设计

好友列表：

群聊列表：

（2）功能实现

当进入好友列表时，向im服务器发送请求，请求获取好友列表和群聊列表，并渲染到页面上。

onReady() {
			this.getMyInfo();
			this.getFriendList();
			this.getGroupList();
		},
		onPullDownRefresh:function(){
			// 拉取会话列表
			this.getFriendList();
			this.getGroupList();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			open() {
			  // console.log('open');
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			getMyInfo:function(){
				let promise_myinfo = tim.getMyProfile();
				promise_myinfo.then((imResponse)=> {
				  const info = imResponse.data;
				  this.info = info;
				}).catch(function(imError) {
				  console.warn('getMyProfile error:', imError); 
				});
			},
			getFriendList:function(){
				let promise = tim.getFriendList();
				promise.then((imResponse)=> {
				  const friendList = imResponse.data;
				  this.friendList = friendList;
				  console.log(this.friendList);
				}).catch(function(imError) {
				  console.warn('getFriendList error:', imError); 
				});
			},
			getGroupList:function(){
				let promise_groupList = tim.getGroupList();
				promise_groupList.then((imResponse)=> {
					console.log("wwwwwwwwww");
				  console.log(imResponse.data.groupList); 
				  this.groupList = imResponse.data.groupList;
				  
				}).catch(function(imError) {
				  console.warn('getGroupList error:', imError);
				});
			},

个人资料主页

（1）界面设计

（2）功能实现

当进入个人资料页后，向im发送请求，获取自己或他人的资料，并渲染到页面上，代码如下：

onReady:function(){
			this.getMyInfo();
			this.getDetailsInfo();
			this.checkFriend();
			this.setGenderImg();
			this.getElementStyle();
		},
		methods:{
			backOne:function(){
				uni.switchTab({
					url:"../index/index"
				})
			},
			getMyInfo:function(){
				//console.log(options);
				let promise_myinfo = tim.getMyProfile();
				promise_myinfo.then((imResponse)=> {
				  const info = imResponse.data;
				  console.log(info); // 个人资料 - Profile 实例
				  this.info = info;
				  console.log(this.info);
				}).catch(function(imError) {
				  console.warn('getMyProfile error:', imError); 
				});
			},
			getDetailsInfo:function(){
				let promise_details = tim.getUserProfile({
				  userIDList: [this.detailId] 
				});
				promise_details.then((imResponse)=> {
				  console.log(imResponse.data[0]); 
				  const details = imResponse.data[0];
				  console.log(details);
				  this.details = details;
				}).catch(function(imError) {
				  console.warn('getUserProfile error:', imError); 
				});
			},
			checkFriend:function(){
				let promise = tim.checkFriend({
				  userIDList: [this.detailId],
				  type: TIM.TYPES.SNS_CHECK_TYPE_BOTH,
				});
				promise.then((imResponse)=> {
				  const { successUserIDList, failureUserIDList } = imResponse.data
				  successUserIDList.forEach((item) => {
				    const { userID, code, relation } = item; // 此时 code 始终为0
					
					if(userID != undefined){
						this.check = relation;
					}

				  });
				  // 校验失败的 userIDList
				  failureUserIDList.forEach((item) => {
				    const { userID, code, message } = item;
				  });
				}).catch(function(imError) {
				  console.warn('checkFriend error:', imError);
				});
			},