失眠网 > 微信小程序 | IM交友聊天功能大汇总

微信小程序 | IM交友聊天功能大汇总

时间：2023-07-12 01:21:01

相关推荐

微信小程序 | IM交友聊天功能大汇总

📌个人主页：个人主页
🧀推荐专栏：小程序开发成神之路 --【这是一个为想要入门和进阶小程序开发专门开启的精品专栏！从个人到商业的全套开发教程，实打实的干货分享，确定不来看看？😻😻】
📝作者简介：从web开发，再到大数据算法，踩过了无数的坑，用心总结经验教训，助你在技术生涯一臂之力！若想获取更多精彩内容，敬请订阅专栏或者关注😁😂🤣😃😆😉😊😋😍😘🥰
⭐️您的小小关注是我持续输出的动力！⭐️

干货内容推荐

🥇入门和进阶小程序开发，不可错误的精彩内容🥇 ：

《小程序开发必备功能的吐血整理【个人中心界面样式大全】》

《微信小程序 | 动手实现双十一红包雨》

《微信小程序 | 人脸识别的最终解决方案》

《来接私活吧？小程序接私活必备功能-婚恋交友【附完整代码】》

《吐血整理的几十款小程序登陆界面【附完整代码】》

文章目录

干货内容推荐一、效果预览二、配套SDK推荐2.1 Go-Easy SDK2.2 腾讯云 IM SDK2.3 声网SDK2.3 融云SDK三、完整源码3.1 通用型3.2 模板型3.3 简单型

一、效果预览

二、配套SDK推荐

对于实时聊天业务，其中最重要的功能是实现多人聊天之间的信息实时同步。那么问题来了，实现消息同步的方式有很多：

你可以自己手写一个通信服务器，用socket通信配合像netty这样的多线程容器。你也可以借助更多第三方的消息中间件，像kafka或者zookeeper这样的消息订阅通知的模型去做。我们也能从前端的角度出发，充分利用websockt协议这样的长连接通信协议。

往往要开发一个功能完备、效率稳定的通信服务功能都不是那么简单易行的。所以，我们在开发小程序或者APP时，我们追求的是快准狠！这个时候我们选择合适且靠谱的第三方SDK就显得尤为重要！以下就是个人推荐的好用的第三方IM SDK：

2.1 Go-Easy SDK

Go-Easy SDK地址：小程序开发的首选，有丰富的示例接入，兼容web端。可以实现更低的接入学习成本，达到更好的效果！

GoEasy致力于打造"Web开发人员最喜爱的即时通讯平台", 只需要一个SDK，就可以帮助开发人员快速的完成各种即时通讯功能：

提醒类：系统提醒，订单提醒等数据实时更新：页面同步，位置实时跟踪，实时图表直播间聊天室用户在线状态监听手机APP通知栏推送游戏对战IM聊天

2.2 腾讯云 IM SDK

腾讯云IM SDK地址：按照官方文档对小程序端的IM即时通信进行集成！

2.3 声网SDK

声网-适配于小程序端的SDK地址：声网作为一个以RTC技术发家的企业，其在通信业务的能力上有很强的技术储备，所以他在音视频领域的能力也同样值得借鉴。

2.3 融云SDK

融云SDK–IM通信小程序版

三、完整源码

3.1 通用型

<template><view><view class="content" @touchstart="hideDrawer"><scroll-view class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory" upper-threshold="50"><view class="loading"><view class="spinner"><view class="rect1"></view><view class="rect2"></view><view class="rect3"></view><view class="rect4"></view><view class="rect5"></view></view></view><view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.msg.id"><block v-if="row.type=='system'" ><view class="system"><view v-if="row.msg.type=='text'" class="text">{{row.msg.content.text}}</view><view v-if="row.msg.type=='redEnvelope'" class="red-envelope"><image src="/static/img/red-envelope-chat.png"></image>{{row.msg.content.text}}</view></view></block><block v-if="row.type=='user'"><view class="my" v-if="row.msg.userinfo.uid==myuid"><view class="left"><view v-if="row.msg.type=='text'" class="bubble"><rich-text :nodes="row.msg.content.text"></rich-text></view><view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)" :class="playMsgid == row.msg.id?'play':''"><view class="length">{{row.msg.content.length}}</view><view class="icon my-voice"></view></view><view v-if="row.msg.type=='img'" class="bubble img" @tap="showPic(row.msg)"><image :src="row.msg.content.url" :style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"></image></view><view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope" @tap="openRedEnvelope(row.msg,index)"><image src="/static/img/red-envelope.png"></image><view class="tis"></view><view class="blessing">{{row.msg.content.blessing}}</view></view></view><view class="right"><image :src="row.msg.userinfo.face"></image></view></view><view class="other" v-if="row.msg.userinfo.uid!=myuid"><view class="left"><image :src="row.msg.userinfo.face"></image></view><view class="right"><view class="username"><view class="name">{{row.msg.userinfo.username}}</view> <view class="time">{{row.msg.time}}</view></view><view v-if="row.msg.type=='text'" class="bubble"><rich-text :nodes="row.msg.content.text"></rich-text></view><view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)" :class="playMsgid == row.msg.id?'play':''"><view class="icon other-voice"></view><view class="length">{{row.msg.content.length}}</view></view><view v-if="row.msg.type=='img'" class="bubble img" @tap="showPic(row.msg)"><image :src="row.msg.content.url" :style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"></image></view><view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope" @tap="openRedEnvelope(row.msg,index)"><image src="/static/img/red-envelope.png"></image><view class="tis"></view><view class="blessing">{{row.msg.content.blessing}}</view></view></view></view></block></view></scroll-view></view><view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard"> <swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150"><swiper-item v-for="(page,pid) in emojiList" :key="pid"><view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)"><image mode="widthFix" :src="'/static/img/emoji/'+em.url"></image></view></swiper-item></swiper><view class="more-layer" :class="{hidden:hideMore}"><view class="list"><view class="box" @tap="chooseImage"><view class="icon tupian2"></view></view><view class="box" @tap="camera"><view class="icon paizhao"></view></view><view class="box" @tap="handRedEnvelopes"><view class="icon hongbao"></view></view></view></view></view><view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard"><view class="voice"><view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view></view><view class="more" @tap="showMore"><view class="icon add"></view></view><view class="textbox"><view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view><view class="text-mode" :class="isVoice?'hidden':''"><view class="box"><textarea auto-height="true" v-model="textMsg" @focus="textareaFocus"/></view><view class="em" @tap="chooseEmoji"><view class="icon biaoqing"></view></view></view></view><view class="more" @tap="showMore"><view class="icon add"></view></view><view class="send" :class="isVoice?'hidden':''" @tap="sendText"><view class="btn">发送</view></view></view><view class="record" :class="recording?'':'hidden'"><view class="ing" :class="willStop?'hidden':''"><view class="icon luyin2" ></view></view><view class="cancel" :class="willStop?'':'hidden'"><view class="icon chehui" ></view></view><view class="tis" :class="willStop?'change':''">{{recordTis}}</view></view><view class="windows" :class="windowsState"><view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view><view class="layer" @touchmove.stop.prevent="discard"><view class="open-redenvelope"><view class="top"><view class="close-btn"><view class="icon close" @tap="closeRedEnvelope"></view></view><image src="/static/img/im/face/face_1.jpg"></image></view><view class="from">来自{{redenvelopeData.from}}</view><view class="blessing">{{redenvelopeData.blessing}}</view><view class="money">{{redenvelopeData.money}}</view><view class="showDetails" @tap="toDetails(redenvelopeData.rid)">查看领取详情 <view class="icon to"></view></view></view></view></view></view></template><script>export default {data() {return {//文字消息textMsg:'',//消息列表isHistoryLoading:false,scrollAnimation:false,scrollTop:0,scrollToView:'',msgList:[],msgImgList:[],myuid:0,//录音相关参数// #ifndef H5//H5不能录音RECORDER:uni.getRecorderManager(),// #endifisVoice:false,voiceTis:'按住说话',recordTis:"手指上滑取消发送",recording:false,willStop:false,initPoint:{identifier:0,Y:0},recordTimer:null,recordLength:0,//播放语音相关参数AUDIO:uni.createInnerAudioContext(),playMsgid:null,VoiceTimer:null,// 抽屉参数popupLayerClass:'',// more参数hideMore:true,//表情定义hideEmoji:true,emojiList:[[{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],[{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],[{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],[{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],[{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]],//表情图片图床名称，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要onlineEmoji:{"100.gif":"AbNQgA.gif","101.gif":"AbN3ut.gif","102.gif":"AbNM3d.gif","103.gif":"AbN8DP.gif","104.gif":"AbNljI.gif","105.gif":"AbNtUS.gif","106.gif":"AbNGHf.gif","107.gif":"AbNYE8.gif","108.gif":"AbNaCQ.gif","109.gif":"AbNN4g.gif","110.gif":"AbN0vn.gif","111.gif":"AbNd3j.gif","112.gif":"AbNsbV.gif","113.gif":"AbNwgs.gif","114.gif":"AbNrD0.gif","115.gif":"AbNDuq.gif","116.gif":"AbNg5F.gif","117.gif":"AbN6ET.gif","118.gif":"AbNcUU.gif","119.gif":"AbNRC4.gif","120.gif":"AbNhvR.gif","121.gif":"AbNf29.gif","122.gif":"AbNW8J.gif","123.gif":"AbNob6.gif","124.gif":"AbN5K1.gif","125.gif":"AbNHUO.gif","126.gif":"AbNIDx.gif","127.gif":"AbN7VK.gif","128.gif":"AbNb5D.gif","129.gif":"AbNX2d.gif","130.gif":"AbNLPe.gif","131.gif":"AbNjxA.gif","132.gif":"AbNO8H.gif","133.gif":"AbNxKI.gif","134.gif":"AbNzrt.gif","135.gif":"AbU9Vf.gif","136.gif":"AbUSqP.gif","137.gif":"AbUCa8.gif","138.gif":"AbUkGQ.gif","139.gif":"AbUFPg.gif","140.gif":"AbUPIS.gif","141.gif":"AbUZMn.gif","142.gif":"AbUExs.gif","143.gif":"AbUA2j.gif","144.gif":"AbUMIU.gif","145.gif":"AbUerq.gif","146.gif":"AbUKaT.gif","147.gif":"AbUmq0.gif","148.gif":"AbUuZV.gif","149.gif":"AbUliF.gif","150.gif":"AbU1G4.gif","151.gif":"AbU8z9.gif","152.gif":"AbU3RJ.gif","153.gif":"AbUYs1.gif","154.gif":"AbUJMR.gif","155.gif":"AbUadK.gif","156.gif":"AbUtqx.gif","157.gif":"AbUUZ6.gif","158.gif":"AbUBJe.gif","159.gif":"AbUdIO.gif","160.gif":"AbU0iD.gif","161.gif":"AbUrzd.gif","162.gif":"AbUDRH.gif","163.gif":"AbUyQA.gif","164.gif":"AbUWo8.gif","165.gif":"AbU6sI.gif","166.gif":"AbU2eP.gif","167.gif":"AbUcLt.gif","168.gif":"AbU4Jg.gif","169.gif":"AbURdf.gif","170.gif":"AbUhFS.gif","171.gif":"AbU5WQ.gif","172.gif":"AbULwV.gif","173.gif":"AbUIzj.gif","174.gif":"AbUTQs.gif","175.gif":"AbU7yn.gif","176.gif":"AbUqe0.gif","177.gif":"AbUHLq.gif","178.gif":"AbUOoT.gif","179.gif":"AbUvYF.gif","180.gif":"AbUjFU.gif","181.gif":"AbaSSJ.gif","182.gif":"AbUxW4.gif","183.gif":"AbaCO1.gif","184.gif":"Abapl9.gif","185.gif":"Aba9yR.gif","186.gif":"AbaFw6.gif","187.gif":"Abaiex.gif","188.gif":"AbakTK.gif","189.gif":"AbaZfe.png","190.gif":"AbaEFO.gif","191.gif":"AbaVYD.gif","192.gif":"AbamSH.gif","193.gif":"AbaKOI.gif","194.gif":"Abanld.gif","195.gif":"Abau6A.gif","196.gif":"AbaQmt.gif","197.gif":"Abal0P.gif","198.gif":"AbatpQ.gif","199.gif":"Aba1Tf.gif","200.png":"Aba8k8.png","201.png":"AbaGtS.png","202.png":"AbaJfg.png","203.png":"AbaNlj.png","204.png":"Abawmq.png","205.png":"AbaU6s.png","206.png":"AbaaXn.png","207.png":"Aba000.png","208.png":"AbarkT.png","209.png":"AbastU.png","210.png":"AbaB7V.png","211.png":"Abafn1.png","212.png":"Abacp4.png","213.png":"AbayhF.png","214.png":"Abag1J.png","215.png":"Aba2c9.png","216.png":"AbaRXR.png","217.png":"Aba476.png","218.png":"Abah0x.png","219.png":"Abdg58.png"},//红包相关参数windowsState:'',redenvelopeData:{rid:null,//红包IDfrom:null,face:null,blessing:null,money:null}};},onLoad(option) {this.getMsgList();//语音自然播放结束this.AUDIO.onEnded((res)=>{this.playMsgid=null;});// #ifndef H5//录音开始事件this.RECORDER.onStart((e)=>{this.recordBegin(e);})//录音结束事件this.RECORDER.onStop((e)=>{this.recordEnd(e);})// #endif},onShow(){this.scrollTop = 9999999;//模板借由本地缓存实现发红包效果，实际应用中请不要使用此方法。//uni.getStorage({key: 'redEnvelopeData',success: (res)=>{console.log(res.data);let nowDate = new Date();let lastid = this.msgList[this.msgList.length-1].msg.id;lastid++;let row = {type:"user",msg:{id:lastid,type:"redEnvelope",time:nowDate.getHours()+":"+nowDate.getMinutes(),userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{blessing:res.data.blessing,rid:Math.floor(Math.random()*1000+1),isReceived:false}}};this.screenMsg(row);uni.removeStorage({key: 'redEnvelopeData'});}});},methods:{// 接受消息(筛选处理)screenMsg(msg){//从长连接处转发给这个方法，进行筛选处理if(msg.type=='system'){// 系统消息switch (msg.msg.type){case 'text':this.addSystemTextMsg(msg);break;case 'redEnvelope':this.addSystemRedEnvelopeMsg(msg);break;}}else if(msg.type=='user'){// 用户消息switch (msg.msg.type){case 'text':this.addTextMsg(msg);break;case 'voice':this.addVoiceMsg(msg);break;case 'img':this.addImgMsg(msg);break;case 'redEnvelope':this.addRedEnvelopeMsg(msg);break;}console.log('用户消息');//非自己的消息震动if(msg.msg.userinfo.uid!=this.myuid){console.log('振动');uni.vibrateLong();}}this.$nextTick(function() {// 滚动到底this.scrollToView = 'msg'+msg.msg.id});},//触发滑动到顶部(加载历史信息记录)loadHistory(e){if(this.isHistoryLoading){return ;}this.isHistoryLoading = true;//参数作为进入请求标识，防止重复请求this.scrollAnimation = false;//关闭滑动动画let Viewid = this.msgList[0].msg.id;//记住第一个信息ID//本地模拟请求历史记录效果setTimeout(()=>{// 消息列表let list = [{type:"user",msg:{id:1,type:"text",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{text:"为什么温度会相差那么大？"}}},{type:"user",msg:{id:2,type:"text",time:"12:57",userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:{text:"这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"}}},{type:"user",msg:{id:3,type:"voice",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:{url:"/static/voice/1.mp3",length:"00:06"}}},{type:"user",msg:{id:4,type:"voice",time:"13:05",userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{url:"/static/voice/2.mp3",length:"00:06"}}},]// 获取消息中的图片,并处理显示尺寸for(let i=0;i<list.length;i++){if(list[i].type=='user'&&list[i].msg.type=="img"){list[i].msg.content = this.setPicSize(list[i].msg.content);this.msgImgList.unshift(list[i].msg.content.url);}list[i].msg.id = Math.floor(Math.random()*1000+1);this.msgList.unshift(list[i]);}//这段代码很重要，不然每次加载历史数据都会跳到顶部this.$nextTick(function() {this.scrollToView = 'msg'+Viewid;//跳转上次的第一行信息位置this.$nextTick(function() {this.scrollAnimation = true;//恢复滚动动画});});this.isHistoryLoading = false;},1000)},// 加载初始页面消息getMsgList(){// 消息列表let list = [{type:"system",msg:{id:0,type:"text",content:{text:"欢迎进入HM-chat聊天室"}}},{type:"user",msg:{id:1,type:"text",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{text:"为什么温度会相差那么大？"}}},{type:"user",msg:{id:2,type:"text",time:"12:57",userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:{text:"这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"}}},{type:"user",msg:{id:3,type:"voice",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:{url:"/static/voice/1.mp3",length:"00:06"}}},{type:"user",msg:{id:4,type:"voice",time:"13:05",userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{url:"/static/voice/2.mp3",length:"00:06"}}},{type:"user",msg:{id:5,type:"img",time:"13:05",userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{url:"/static/img/p10.jpg",w:200,h:200}}},{type:"user",msg:{id:6,type:"img",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:{url:"/static/img/q.jpg",w:1920,h:1080}}},{type:"system",msg:{id:7,type:"text",content:{text:"欢迎进入HM-chat聊天室"}}},{type:"system",msg:{id:9,type:"redEnvelope",content:{text:"售后客服008领取了你的红包"}}},{type:"user",msg:{id:10,type:"redEnvelope",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{blessing:"恭喜发财，大吉大利，万事如意",rid:0,isReceived:false}}},{type:"user",msg:{id:11,type:"redEnvelope",time:"12:56",userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:{blessing:"恭喜发财",rid:1,isReceived:false}}},]// 获取消息中的图片,并处理显示尺寸for(let i=0;i<list.length;i++){if(list[i].type=='user'&&list[i].msg.type=="img"){list[i].msg.content = this.setPicSize(list[i].msg.content);this.msgImgList.push(list[i].msg.content.url);}}this.msgList = list;// 滚动到底部this.$nextTick(function() {//进入页面滚动到底部this.scrollTop = 9999;this.$nextTick(function() {this.scrollAnimation = true;});});},//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪setPicSize(content){// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。let maxW = uni.upx2px(350);//350是定义消息图片最大宽度let maxH = uni.upx2px(350);//350是定义消息图片最大高度if(content.w>maxW||content.h>maxH){let scale = content.w/content.h;content.w = scale>1?maxW:maxH*scale;content.h = scale>1?maxW/scale:maxH;}return content;},//更多功能(点击+弹出) showMore(){this.isVoice = false;this.hideEmoji = true;if(this.hideMore){this.hideMore = false;this.openDrawer();}else{this.hideDrawer();}},// 打开抽屉openDrawer(){this.popupLayerClass = 'showLayer';},// 隐藏抽屉hideDrawer(){this.popupLayerClass = '';setTimeout(()=>{this.hideMore = true;this.hideEmoji = true;},150);},// 选择图片发送chooseImage(){this.getImage('album');},//拍照发送camera(){this.getImage('camera');},//发红包handRedEnvelopes(){uni.navigateTo({url:'HM-hand/HM-hand'});this.hideDrawer();},//选照片 or 拍照getImage(type){this.hideDrawer();uni.chooseImage({sourceType:[type],sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有success: (res)=>{for(let i=0;i<res.tempFilePaths.length;i++){uni.getImageInfo({src: res.tempFilePaths[i],success: (image)=>{console.log(image.width);console.log(image.height);let msg = {url:res.tempFilePaths[i],w:image.width,h:image.height};this.sendMsg(msg,'img');}});}}});},// 选择表情chooseEmoji(){this.hideMore = true;if(this.hideEmoji){this.hideEmoji = false;this.openDrawer();}else{this.hideDrawer();}},//添加表情addEmoji(em){this.textMsg+=em.alt;},//获取焦点，如果不是选表情ing,则关闭抽屉textareaFocus(){if(this.popupLayerClass=='showLayer' && this.hideMore == false){this.hideDrawer();}},// 发送文字消息sendText(){this.hideDrawer();//隐藏抽屉if(!this.textMsg){return;}let content = this.replaceEmoji(this.textMsg);let msg = {text:content}this.sendMsg(msg,'text');this.textMsg = '';//清空输入框},//替换表情符号为图片replaceEmoji(str){let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g,(item, index)=>{console.log("item: " + item);for(let i=0;i<this.emojiList.length;i++){let row = this.emojiList[i];for(let j=0;j<row.length;j++){let EM = row[j];if(EM.alt==item){//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 //比如你上传服务器后，你的100.gif路径为/emoji/100.gif 则替换onlinePath填写为/emoji/let onlinePath = '//04/12/'let imgstr = '<img src="'+onlinePath+this.onlineEmoji[EM.url]+'">';console.log("imgstr: " + imgstr);return imgstr;}}}});return '<div style="display: flex;align-items: center;word-wrap:break-word;">'+replacedStr+'</div>';},// 发送消息sendMsg(content,type){//实际应用中，此处应该提交长连接，模板仅做本地处理。var nowDate = new Date();let lastid = this.msgList[this.msgList.length-1].msg.id;lastid++;let msg = {type:'user',msg:{id:lastid,time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:content}}// 发送消息this.screenMsg(msg);// 定时器模拟对方回复,三秒setTimeout(()=>{lastid = this.msgList[this.msgList.length-1].msg.id;lastid++;msg = {type:'user',msg:{id:lastid,time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:content}}// 本地模拟发送消息this.screenMsg(msg);},3000)},// 添加文字消息到列表addTextMsg(msg){this.msgList.push(msg);},// 添加语音消息到列表addVoiceMsg(msg){this.msgList.push(msg);},// 添加图片消息到列表addImgMsg(msg){msg.msg.content = this.setPicSize(msg.msg.content);this.msgImgList.push(msg.msg.content.url);this.msgList.push(msg);},addRedEnvelopeMsg(msg){this.msgList.push(msg);},// 添加系统文字消息到列表addSystemTextMsg(msg){this.msgList.push(msg);},// 添加系统红包消息到列表addSystemRedEnvelopeMsg(msg){this.msgList.push(msg);},// 打开红包openRedEnvelope(msg,index){let rid = msg.content.rid;uni.showLoading({title:'加载中...'});console.log("index: " + index);//模拟请求服务器效果setTimeout(()=>{//加载数据if(rid==0){this.redenvelopeData={rid:0,//红包IDfrom:"大黑哥",face:"/static/img/im/face/face.jpg",blessing:"恭喜发财，大吉大利",money:"已领完"}}else{this.redenvelopeData={rid:1,//红包IDfrom:"售后客服008",face:"/static/img/im/face/face_2.jpg",blessing:"恭喜发财",money:"0.01"}if(!msg.content.isReceived){// {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},this.sendSystemMsg({text:"你领取了"+(msg.userinfo.uid==this.myuid?"自己":msg.userinfo.username)+"的红包"},'redEnvelope');console.log("this.msgList[index]: " + JSON.stringify(this.msgList[index]));this.msgList[index].msg.content.isReceived = true;}}uni.hideLoading();this.windowsState = 'show';},200)},// 关闭红包弹窗closeRedEnvelope(){this.windowsState = 'hide';setTimeout(()=>{this.windowsState = '';},200)},sendSystemMsg(content,type){let lastid = this.msgList[this.msgList.length-1].msg.id;lastid++;let row = {type:"system",msg:{id:lastid,type:type,content:content}};this.screenMsg(row)},//领取详情toDetails(rid){uni.navigateTo({url:'HM-details/HM-details?rid='+rid})},// 预览图片showPic(msg){uni.previewImage({indicator:"none",current:msg.content.url,urls: this.msgImgList});},// 播放语音playVoice(msg){this.playMsgid=msg.id;this.AUDIO.src = msg.content.url;this.$nextTick(function() {this.AUDIO.play();});},// 录音开始voiceBegin(e){if(e.touches.length>1){return ;}this.initPoint.Y = e.touches[0].clientY;this.initPoint.identifier = e.touches[0].identifier;this.RECORDER.start({format:"mp3"});//录音开始,},//录音开始UI效果recordBegin(e){this.recording = true;this.voiceTis='松开结束';this.recordLength = 0;this.recordTimer = setInterval(()=>{this.recordLength++;},1000)},// 录音被打断voiceCancel(){this.recording = false;this.voiceTis='按住说话';this.recordTis = '手指上滑取消发送'this.willStop = true;//不发送录音this.RECORDER.stop();//录音结束},// 录音中(判断是否触发上滑取消发送)voiceIng(e){if(!this.recording){return;}let touche = e.touches[0];//上滑一个导航栏的高度触发上滑取消发送if(this.initPoint.Y - touche.clientY>=uni.upx2px(100)){this.willStop = true;this.recordTis = '松开手指取消发送'}else{this.willStop = false;this.recordTis = '手指上滑取消发送'}},// 结束录音voiceEnd(e){if(!this.recording){return;}this.recording = false;this.voiceTis='按住说话';this.recordTis = '手指上滑取消发送'this.RECORDER.stop();//录音结束},//录音结束(回调文件)recordEnd(e){clearInterval(this.recordTimer);if(!this.willStop){console.log("e: " + JSON.stringify(e));let msg = {length:0,url:e.tempFilePath}let min = parseInt(this.recordLength/60);let sec = this.recordLength%60;min = min<10?'0'+min:min;sec = sec<10?'0'+sec:sec;msg.length = min+':'+sec;this.sendMsg(msg,'voice');}else{console.log('取消发送录音');}this.willStop = false;},// 切换语音/文字输入switchVoice(){this.hideDrawer();this.isVoice = this.isVoice?false:true;},discard(){return;}}}</script><style lang="scss">@import "@/static/HM-chat/css/style.scss"; </style>

3.2 模板型

<template><view><view :animation="anData" style="height:0;"></view><scroll-view scroll-with-animation scroll-y="true" @touchmove="hideKey"style="width: 750rpx;" :style="{'height':srcollHeight}" :scroll-top="go" ><view id="okk" scroll-with-animation ><view class="flex-column-start" v-for="(x,i) in msgList" :key="i"><view v-if="x.my" class="flex justify-end padding-right one-show align-start padding-top" ><view class="flex justify-end" style="width: 400rpx;"><view class="margin-left padding-chat bg-cyan" style="border-radius: 35rpx;"><text style="word-break: break-all;">{{x.msg}}</text></view></view></view><view v-if="!x.my" class="flex-row-start margin-left margin-top one-show" ><view class="chat-img flex-row-center"><image style="height: 75rpx;width: 75rpx;" src="../../static/image/robt.png" mode="aspectFit"></image></view><view class="flex" style="width: 500rpx;"><view class="margin-left padding-chat flex-column-start" style="border-radius: 35rpx;background-color: #f9f9f9;"><text style="word-break: break-all;" >{{x.msg}}</text><view class="flex-column-start" v-if="x.type==1" style="color: #2fa39b;"><text style="color: #838383;font-size: 22rpx;margin-top: 15rpx;">你可以这样问我:</text><text @click="answer(index)" style="margin-top: 30rpx;" v-for="(item,index) in x.questionList" :key="index" >{{item}}</text><view class="flex-row-start padding-top-sm"><text class="my-neirong-sm">没有你要的答案?</text><text class="padding-left" style="color: #007AFF;">换一批</text></view></view><view class="flex-column-start" v-if="x.type==2" style="color: #2fa39b;"><text style="color: #838383;font-size: 22rpx;margin-top: 15rpx;">猜你想问:</text><text @click="answer(index)" style="margin-top: 30rpx;" v-for="(item,index) in x.questionList" :key="index" >{{item}}</text></view><view class="flex-column-start" v-if="x.type==0"><text class="padding-top-sm" style="color: #2fa39b;">提交意见与反馈</text><text style="color: #838383;font-size: 22rpx;margin-top: 15rpx;">下面是一些常见问题,您可以点击对应的文字快速获取答案:</text><text @click="answer(index)" style="margin-top: 30rpx;color: #2fa39b;" v-for="(item,index) in x.questionList" :key="index" >{{item}}</text><view class="flex-row-start padding-top-sm"><text class="my-neirong-sm">没有你要的答案?</text><text class="padding-left" style="color: #1396c5;">换一批</text></view></view></view></view></view></view><view v-show="msgLoad" class="flex-row-start margin-left margin-top"><view class="chat-img flex-row-center"><image style="height: 75rpx;width: 75rpx;" src="../../static/image/robt.png" mode="aspectFit"></image></view><view class="flex" style="width: 500rpx;"><view class="margin-left padding-chat flex-column-start" style="border-radius: 35rpx;background-color: #f9f9f9;"><view class="cuIcon-loading turn-load" style="font-size: 35rpx;color: #3e9982;"></view></view></view></view><view style="height: 120rpx;"></view></view></scroll-view><view class="flex-column-center" style="position: fixed;bottom: -180px;":animation="animationData" ><view class="bottom-dh-char flex-row-around" style="font-size: 55rpx;"><input v-model="msg" class="dh-input" type="text" style="background-color: #f0f0f0;" @confirm="sendMsg" confirm-type="search" placeholder-class="my-neirong-sm"placeholder="用一句简短的话描述您的问题" /> <view @click="sendMsg" class="cu-tag bg-cyan round">发送</view><text @click="ckAdd" class="cuIcon-roundaddfill text-brown"></text></view><view class="box-normal flex-row-around flex-wrap"><view class="tb-text"><view class="cuIcon-form"></view><text >问题反馈</text></view><view class="tb-text"><view class="cuIcon-form"></view><text>人工客服</text></view></view></view></view></template><script>// rpx和px的比率var l// 可用窗口高度var wh// 顶部空盒子的高度var mgUpHeightexport default {onLoad(){// 如果需要缓存消息缓存msgList即可// 监听键盘拉起// 因为无法控制键盘拉起的速度,所以这里尽量以慢速处理uni.onKeyboardHeightChange(res => {const query = uni.createSelectorQuery()query.select('#okk').boundingClientRect(data => {// 若消息体没有超过2倍的键盘则向下移动差值,防止遮住消息体var up=res.height*2-data.height-l*110console.log(up)if(up>0){// 动态改变空盒子高度this.msgMove(up,300)// 记录改变的值,若不收回键盘且发送了消息用来防止消息过多被遮盖mgUpHeight=up}// 收回if(res.height==0){this.msgMove(0,0)}}).exec();})var query=uni.getSystemInfoSync()l=query.screenWidth/750wh=query.windowHeightthis.srcollHeight=query.windowHeight+"px"},data() {return {msgLoad:false,anData:{},animationData:{},showTow:false,// 消息体,定义机器人初次的消息(或者自定义出现时机)// my->谁发的消息 msg->消息文本 type->客服消息模板类型 questionList->快速获取问题答案的问题列表msgList:[{my:false,msg:"你好我是客服机器人娜娜,请问有什么问题可以帮助您?(问候模板)",type:1,questionList:["如何注销用户","我想了解业务流程","手机号如何更换"]}],msg:"",go:0,srcollHeight:0}},methods: {// 切换输入法时移动输入框(按照官方的上推页面的原理应该会自动适应不同的键盘高度-->官方bug)goPag(kh){this.upTowmn(0,250)if(this.keyHeight!=0){if(kh-this.keyHeight>0){this.upTowmn(this.keyHeight-kh,250)}}},// 移动顶部的空盒子msgMove(x,t){var animation = uni.createAnimation({duration: t,timingFunction: 'linear',})this.animation = animationanimation.height(x).step()this.anData = animation.export()},// 保持消息体可见msgGo(){const query = uni.createSelectorQuery()// 延时100ms保证是最新的高度setTimeout(()=>{// 获取消息体高度query.select('#okk').boundingClientRect(data => {// 如果超过scorll高度就滚动scorllif(data.height-wh>0){this.go=data.height-wh}// 保证键盘第一次拉起时消息体能保持可见var moveY=wh-data.height// 超出页面则缩回空盒子if(moveY-mgUpHeight<0){// 小于0则视为0if(moveY<0){this.msgMove(0,200)}else{// 否则缩回盒子对应的高度this.msgMove(moveY,200) } }}).exec();},100)},// 回答问题的业务逻辑answer(id){// 这里应该传入问题的id,模拟就用index代替了console.log(id)},sendMsg(){// 消息为空不做任何操作if(this.msg==""){return 0;}// 显示消息 msg消息文本,my鉴别是谁发的消息(不能用俩个消息数组循环,否则消息不会穿插)this.msgList.push({"msg":this.msg,"my":true})// 保证消息可见this.msgGo()// 回答问题this.msgKf(this.msg)// 清除消息this.msg=""},msgKf(x){// loadingthis.msgLoad=true// 这里连接服务器获取答案// 下面模拟请求setTimeout(()=>{// 取消loadingthis.msgLoad=falsethis.msgList.push({my:false,msg:"娜娜还在学习中,没能明白您的问题,您点击下方提交反馈与问题,我们会尽快人工处理(无法回答模板)",type:0,questionList:["如何注销用户","我想了解业务流程","手机号如何更换"]})this.msgList.push({my:false,msg:"单消息模板",type:-1})this.msgList.push({my:false,msg:"根据您的问题,已为您匹配了下列问题(多个答案模板)",type:2,questionList:["如何注销用户","我想了解业务流程","手机号如何更换"]})this.msgGo()},2000)},// 不建议输入框聚焦时操作此动画ckAdd(){if(!this.showTow){this.upTowmn(-180,350)}else{this.upTowmn(0,200)}this.showTow=!this.showTow},hideKey(){uni.hideKeyboard()},// 拉起/收回附加栏upTowmn(x,t){var animation = uni.createAnimation({duration: t,timingFunction: 'ease',})this.animation = animationanimation.translateY(x).step()this.animationData = animation.export()}}}</script><style>.bottom-dh-char{background-color: #f9f9f9;width: 750rpx;height: 110rpx;}.center-box{width: 720rpx;padding-left: 25rpx;}.hui-box{width: 750rpx;height: 100%;}.dh-input{width: 500rpx;height: 65rpx;border-radius: 30rpx;padding-left: 15rpx;background-color: #FFFFFF;}.box-normal{width: 750rpx;height: 180px;background-color: #FFFFFF;}.tb-text view{font-size: 65rpx;}.tb-text text{font-size: 25rpx;color: #737373;}.chat-img{border-radius: 50%;width: 100rpx;height: 100rpx;background-color: #f7f7f7;}.padding-chat{padding: 17rpx 20rpx;}.tb-nv{width: 50rpx;height: 50rpx;}</style>

3.3 简单型

<template><view class="chat"><list class="list" :style="{ height: chatListHeight + 'px' }"><cell :ref="'item'+index" v-for="(item, index) in chatList" :key="index"><view :class="['item', item.type]"><image class="avatar" :src="item.avatar"></image><text class="content" style="max-width: 500rpx;">{{ item.content }}</text></view></cell></list><view class="bottomAction"><view class="main" :style="{ height: bottomActionHeight + 'px' }"><input class="textInput" type="text" :value="inputText" cursor-spacing="10" :confirm-hold="true" :adjust-position="false"confirm-type="send" @input="getInputText"@focus="focusInput"@keyboardheightchange="changeKeyboardHeight"@confirm="confirmInput" /><image class="emojiIcon" v-if="!emojiShow" src="/static/emoji_icon_01.png" @click="openEmoji"></image><image class="emojiIcon" v-else src="/static/keyboard_icon_01.png" @click="closeEmoji"></image></view><scroll-view class="emoji" scroll-y="true" v-if="emojiShow" :style="{ height: keyboardConfig.height + 'px' }"><text class="icon" v-for="(item, index) in emoji" :key="index" @click="selEmoji(item)">{{ item }}</text></scroll-view></view></view></template><script>import emoji from '@/lib/emoji.js'const dom = uni.requireNativePlugin('dom');export default {data() {return {emoji,// 表情符号列表emojiShow: false,// 表情显示systemInfo: {},// 系统参数keyboardConfig: {// 键盘参数height: 0// 键盘高度},bottomActionHeight: 54,// 底部输入框原始高度chatListHeight: 0,// 聊天列表高度inputText: '',// 输入框内容chatList: []// 聊天列表}},created() {let _self = this;setTimeout(() => {_self.systemInfo = uni.getSystemInfoSync();_self.keyboardConfig = uni.getStorageSync('keyboardConfig');_self.chatListHeight = _self.systemInfo.windowHeight - _self.bottomActionHeight;}, 1);},onLoad() {this.init();},methods: {/*** @description 初始化*/init() {this.scrollBottom();},/*** @description 输入框聚焦* @param {Object} e 键盘参数*/focusInput(e) {this.emojiShow = false;},/*** @description 键盘输入* @param {Object} e 输入框参数*/getInputText(e) {this.inputText = e.detail.value;},/*** @description 键盘高度发生变化* @param {Object} e 键盘参数*/changeKeyboardHeight(e) {if(!this.emojiShow) {this.chatListHeight = this.systemInfo.windowHeight - this.bottomActionHeight - e.detail.height;this.scrollBottom();}if(e.detail.height > 0 && this.emojiShow) this.emojiShow = false;},/*** @description 完成输入* @param {Object} e 输入框参数*/confirmInput(e) {if(!e.detail.value) return uni.showToast({title: '内容不能为空', duration: 1500, position: 'bottom' });this.chatList.push({avatar: '/static/avatar.png',content: e.detail.value,type: 'left'});this.chatList.push({avatar: '/static/avatar.png',content: e.detail.value,type: 'right'});this.inputText = '';this.scrollBottom();},/*** @description 打开表情符号*/openEmoji() {this.emojiShow = true;this.chatListHeight = this.systemInfo.windowHeight - this.bottomActionHeight - this.keyboardConfig.height;this.scrollBottom();uni.hideKeyboard();},/*** @description 关闭表情符号*/closeEmoji() {this.emojiShow = false;this.chatListHeight = this.systemInfo.windowHeight - this.bottomActionHeight;this.scrollBottom();},/*** @description 选择表情符号* @param {String} item 选择的内容*/selEmoji(item) {this.inputText += item;},/*** @description 滚动至底部*/scrollBottom() {setTimeout(() => {const listLen = this.chatList.length;if(listLen > 0) {const el = this.$refs[`item${listLen -1 }`][0];dom.scrollToElement(el, {offset: 0, animated: false });}}, 30);}}}</script><style scoped>.list {width: 750rpx;background-color: #F3F5F8;}.list .item {padding: 15rpx 30rpx;display: flex;}.list .item .avatar {width: 80rpx;height: 80rpx;border-radius: 50%;overflow: hidden;}.list .item .content {line-height: 40rpx;font-size: 28rpx;padding: 20rpx;}.list .item.left {flex-direction: row;}.list .item.right {flex-direction: row-reverse;}.list .item.left .content {color: #333333;background-color: #FFFFFF;border-radius: 2rpx 20rpx 20rpx 20rpx;margin-left: 20rpx;}.list .item.right .content {color: #FFFFFF;background-color: #2472FF;border-radius: 2rpx 20rpx 20rpx 20rpx;text-align: right;margin-right: 20rpx;}.bottomAction {width: 750rpx;background-color: #FFFFFF;}.bottomAction .main {flex-direction: row;align-items: center;justify-content: center;}.bottomAction .main .textInput {width: 612rpx;height: 68rpx;line-height: 68rpx;font-size: 28rpx;background-color: #F3F5F8;border-radius: 10rpx;padding: 0 24rpx;}.bottomAction .main .emojiIcon {width: 62rpx;height: 62rpx;margin-left: 16rpx;}.bottomAction .emoji {width: 750rpx;flex-wrap: wrap;flex-direction: row;align-items: center;justify-content: center;}.bottomAction .emoji .icon {width: 80rpx;height: 80rpx;font-size: 48rpx;}</style>

如果觉得《微信小程序 | IM交友聊天功能大汇总》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。