山东大学软件学院创新实训——飞讯（八）
目录
一.目标概述
二.功能设计与实现
搜索好友
（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.工作日志的删除 三.前后端联调后界面展示 四.总结 一.目标概述 本次项目实施的 ...
- 山东大学软件学院创新实训——飞讯（九）
目录 一.内部又一次调整 二.目标概述 三.功能设计与实现 界面设计 功能实现 三.总结 一.内部又一次调整 今天,组内的又一名同学决定退群,此时,我们组内已经退了两名成员,因此,任务越来越紧迫,我们 ...
最新文章
- Problem D: 链表的基本运算（线性表）
- struts2在lt;s:selectgt;用动态标签
- 休息是为了更好的出发
- Python的web相关及Django简介
- java代码混淆工具ProGuard混淆插件
- 专利服务器拒收 文件异常解压,电子申请专利常见错误总结.pdf
- 区块链100讲：如果连电子钱包都不懂，还谈什么区块链开发（有彩蛋）
- Java开发发送短信功能的实战教程(真实项目已在使用)
- WINDOWS11自带输入法无法切换中英文问题解决办法
- 防侧漏之弱引用的使用
- [unknown OJ] 客星璀璨之夜
- 利用计算机解决鸡兔同笼问题,Python解决鸡兔同笼问题的方法
- 无线系统笔记（2）----麦克斯韦方程组
- oracle ssd加速,联合评测 | Intel Optane SSD 有效加速SmartX 超融合在Oracle等场景下的系统性能...
- 软件的接口设计图_软件的生命周期amp;测试基本流程
- 如何创建一颗“山楂树”
- 快手616购物节报告：品牌商家GMV同比增长超5倍
- 产业互联网时代的数字化转型与创新
- 谈一谈游戏AI - 综述
- 【计算机就业-校招高频面试题】面试过程中简历上的实习、项目、论文会问什么问题？