目录
一.目标概述
经过前面对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
// 校验成功的 userIDList
successUserIDList.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, //默认9
sizeType: ['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);
},三.总结
通过这一次的飞讯项目实施，我们基本完成即时通讯的功能，因此，一个阶段性的工程完成了，下面，需要完成签到、工作日志和问卷的功能，这需要与本地服务器进行交互，因此需要前端后端协同合作。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
