山东大学软件学院创新实训——飞讯（八）
目录
一.目标概述
二.功能设计与实现
搜索好友
（1）界面设计
（2）功能实现
消息发送组件
（1）发送消息界面概览
（2）功能实现
三.总结
一.目标概述
经过前面对uniapp的学习和飞讯项目的实践，我们对项目的成功进行又一次充满了信心。因此，为了加快进度，这一次，我计算将搜索好友和聊天界面的发送信息组件进行编写，而聊天界面的展示和渲染、建立群聊、加入群聊和群资料由另外一位同学进行编写，共同促进项目的完成。
二.功能设计与实现
搜索好友
（1）界面设计
搜索好友界面如下图所示，当用户输入字符时，对于已经添加的好友，可以实时地进行昵称和userid的模糊搜索，对于新好友，则需输入全称userid方可成功搜索
已经添加好友的模糊搜索：
未添加好友的全称userid搜索：
（2）功能实现
当向输入框输入字符时，会异步地往服务器发送数据，并将数据返回，来判断有无该用户，且未添加为好友，有则可以添加为好友，同时模糊搜索自己的好友列表，渲染出自己的好友。
onReady() {this.getMyInfo();this.getFriendList();},mounted() {},methods:{getMyInfo:function(){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); // 获取个人资料失败的相关信息});},getFriendList:function(){let promise = tim.getFriendList();console.log(promise);promise.then((imResponse)=> {const friendList = imResponse.data; // 好友列表console.log(friendList);this.initUserarr = friendList;}).catch((imError)=> {console.warn('getFriendList error:', imError); // 获取好友列表失败的相关信息});},search: function(e){this.newFriendInfo = {};this.newFriendid = '';this.check = '';let promise = tim.checkFriend({userIDList: [e.detail.value],type: TIM.TYPES.SNS_CHECK_TYPE_BOTH,});promise.then((imResponse)=> {const { successUserIDList, failureUserIDList } = imResponse.data// 校验成功的 userIDListsuccessUserIDList.forEach((item) => {const { userID, code, relation } = item;if(userID != undefined){this.newFriendid = userID;this.check = relation;let promise_newFriend = tim.getUserProfile({userIDList: [this.newFriendid] });promise_newFriend.then((imResponse)=> {const newFriendInfo = imResponse.data[0];this.newFriendInfo = newFriendInfo;}).catch(function(imError) {console.warn('getUserProfile error:', imError); });}});failureUserIDList.forEach((item) => {const { userID, code, message } = item;});}).catch(function(imError) {console.warn('checkFriend error:', imError);});console.log(this.newFriendid);this.selectUserarr = [];let searchval = e.detail.value;if(searchval.length > 0){this.searchUser(searchval);}},searchUser: function(e){//let arr = this.initUserarr;let promise = tim.getFriendList();console.log(promise);promise.then((imResponse)=> {const friendList = imResponse.data; // 好友列表console.log(friendList);this.initUserarr = friendList;}).catch((imError)=> {console.warn('getFriendList error:', imError); // 获取好友列表失败的相关信息});let exp = eval("/" + e + "/g");for (let i = 0; i < this.initUserarr.length; i++) {if(this.initUserarr[i].profile.nick.search(e) != -1 || this.initUserarr[i].profile.userID.search(e) != -1){this.selectUserarr.push(this.initUserarr[i]);}}},消息发送组件
（1）发送消息界面概览
下方的发送部分由我负责，上方的渲染部分由另外一位同学负责
（2）功能实现
消息的发送可以将消息和消息的类型封装到一个数据包内，当发送消息后，将消息发送给腾讯云im，并渲染数据到页面上，消息的类型可以由数字表示，如1代表文本消息，将其发送给负责渲染的同学进行展示
emojiSend:function(){if(this.msg.length>0){this.send(this.msg,0);}},emojiBack:function(){if(this.msg.length>0){this.msg = this.msg.substring(0,this.msg.length-1);}},more:function(){this.ismore = !this.ismore;this.isemoji = true;this.isrecord = false;this.toc = "../../static/images/submit/speak.png";setTimeout(()=>{this.getElementHeight();},10);},sendImg:function(e){let count = 9;if(e == 'album'){count = 9;}else{count = 1;}uni.chooseImage({count: 1, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: [e], //从相册选择success: (res) => {/* const filePaths = res.tempFiles;for (let i = 0; i < filePaths.length; i++) {this.send(filePaths[i],1);} */this.send(res,1);}});},sendVideo:function(e){uni.chooseVideo({count:1,sourceType: [e], //从相册选择maxDuration:300,camera:'back',success: (res) => {const filePaths = res;console.log(res);this.send(res,2)/* for (let i = 0; i < filePaths.length; i++) {this.send(filePaths[i],1);} */}});},sendFile:function(e){uni.chooseFile({count:1,//type: 'image',success: (res) => {const filePaths = res;console.log(res);this.send(res,3)/* for (let i = 0; i < filePaths.length; i++) {this.send(filePaths[i],1);} */}});},touchstart:function(e){this.pageY=e.changedTouches[0].pageY;this.voicebg=false;let i = 1;this.timer = setInterval(()=>{this.vlength = i;i++;if(i > 60){clearInterval(this.timer);this.touchend();}},1000)recorderManager.start();},touchend:function(){clearInterval(this.timer);recorderManager.stop();recorderManager.onStop((res)=>{let data = {voice:res,time:this.vlength}if(!this.voicebg){this.send(data,7);}this.vlength=0;this.voicebg=true;console.log('recorder stop' + JSON.stringify(res));//self.voicePath = res.tempFilePath;});},touchmove:function(e){if(this.pageY-e.changedTouches[0].pageY>100){this.voicebg=true;}},chooseLocation:function(){uni.chooseLocation({success:(res)=>{let data={name:res.name,address:res.address,latitude:res.latitude,longitude:res.longitude,}console.log('位置名称：'+res.name);console.log('详细地址：'+res.address);console.log('纬度：'+res.latitude);console.log('经度：'+res.longitude);this.send(data,4);}});},send:function(msg,type){let data = {message:msg,types:type,}this.$emit('inputs',data);setTimeout(()=>{this.msg = '';},0);},voicing:function(){let data = {message:"语音聊天",types:5,}this.$emit('inputs',data);},meetting:function(){let data = {message:"视频会议",types:6,}this.$emit('inputs',data);},三.总结
通过这一次的飞讯项目实施，我们基本完成即时通讯的功能，因此，一个阶段性的工程完成了，下面，需要完成签到、工作日志和问卷的功能，这需要与本地服务器进行交互，因此需要前端后端协同合作。
山东大学软件学院创新实训——飞讯（八）相关推荐
- 山东大学软件学院创新实训——飞讯（四）
目录 一.目标概述 二.腾讯云im第三方回调 二.回调分类 三.回调示例 1.请求url 2.请求包示例 3.应答包示例 四.回调的保存 1.分析 2.实体类 3.controller层 4.serv ...
- 山东大学软件学院创新实训——飞讯（一）
目录 一.项目介绍 二.docker的安装 1.服务器的配置 2.安装需要的包 3.添加GPG密匙,并添加Docker-ce软件源 4.安装Docker-ce 5.测试运行 6.添加当前用户到 doc ...
- 山东大学软件学院创新实训——飞讯（六）
目录 一.突如起来的变化及内部调整 二.uni-app的学习 三.uni-app的搭建 登录界面 (1)界面设计 (2)核心代码 注册界面 (1)界面设计 (2)核心代码 四.总结 一.突如起来的变化 ...
- 山东大学软件学院创新实训——飞讯（十二）
目录 一.目标概述 二.功能设计与实现 问卷首页 (1)界面设计 (2)功能实现 问卷详情页 (1)界面设计 (2)功能实现 问卷二维码 (1)界面设计 (2)功能实现 回答详情 (1)界面设计 (2 ...
- 山东大学软件学院创新实训——飞讯（二）
目录 一.后端框架-springboot 二.springboot项目的创建 1.启动idea,依次选择File -->> New -->> project,弹出下框 编辑2 ...
- 山东大学软件学院创新实训——飞讯（十三）
目录 一.目标概述 二.功能代码 1.问卷的创建 2.问题的回答 三.界面展示 四.总结 一.目标概述 这次项目完成的功能是问卷的创建和回答部分,我负责后端的编写,另外一位同学负责前端的编写,从而完成 ...
- 山东大学软件学院创新实训——飞讯（十）
目录 一.目标概述 二.功能设计与实现 1.配置配置文件 2.编写后端代码 3.前端代码 三.总结 一.目标概述 这一次项目实施的目的是实现图片的上传和url的生成,因此,主要是前端上传图片代码和后端 ...
- 山东大学软件学院创新实训——飞讯（十一）
目录 一.目标概述 二.数据库设计 三.功能代码 1.工作日志的查询和展示 2.工作日志的添加 3.工作日志的修改 4.工作日志的删除 三.前后端联调后界面展示 四.总结 一.目标概述 本次项目实施的 ...
- 山东大学软件学院创新实训——飞讯（九）
目录 一.内部又一次调整 二.目标概述 三.功能设计与实现 界面设计 功能实现 三.总结 一.内部又一次调整 今天,组内的又一名同学决定退群,此时,我们组内已经退了两名成员,因此,任务越来越紧迫,我们 ...
最新文章
- 解决网络通信中外网和内网之间的通信问题(NAT转换)
- sql server登录名、服务器角色、数据库用户、数据库角色、架构区别联系**
- 机器学习笔记（六）：正则化
- 熟悉HBase基本操作
- ios下点击label包含的input checkbox或radio无效问题
- 关于Redis缓存，这三个问题一定要知道！
- python多线程写日志_python 多线程logger问题
- 数据分析案例：商场客户分群
- windows实用软件
- latex导数_使用LaTeX语法编写数学公式（持续更新）
- mmsi是代表船舶什么_船舶常见的一些缩写
- win10插上耳机还外放(win10插上耳机还外放怎么设置)
- 遇到问题你的PIN不可用，请单击以重置和bitlocker恢复密匙
- 语音识别中的鸡尾酒会问题
- ADB 自动补全 及 offline 解决方法
- 2020 年第一届辽宁省大学生程序设计竞赛
- ISCC部分pwn题解
- 进一步解读自主可控云CAD:CrownCAD
- Eqs POJ - 1840
- 语音编码标准（G.711 G.723 G.726 G.729 iLBC）