这是我参与8月更文挑战的第25天，活动详情查看：8月更文挑战
吧唧吧唧一下
即时通信(Instant Messaging,简称 IM )，在当下应该是部分网站都会选择的在线客服联系方式，尤其是以售卖线上服务的产品，多数会选择内嵌一个即时通讯来保证一部分客户的需求。
有的客户嫌麻烦，有简单粗暴的方式联系用户绝对比再加微信等通讯方式要好很多。
当然，本文不是讲在线通讯的，这里讲讲在即时通讯中，表达情绪必不可少的一个部分：emoji表情。
QQ的emoji表情算是最经典，也很可爱的一款了。
悄悄的说一句，在右上角可以导出非默认的其他表情的eif文件，下载特定的解压器可以解压成gif图片。
但是我解压之后，包括网上找的好多款都有白边，如果是个人项目或者不拘小节的话大可不在意。但是如果对细节有追求的人，肯定还是想找到一款没有白边的纯净的emoji表情对吧。
几经波折我找到了这个网站
可以下载纯净无白边的emoji， 当时写了个脚本自动下载。有需要的小伙伴可以试试。
怎么搞呢？
公司项目是移动端，当然移动端也是可以直接用的，做法的其实比较多种多样吧。
无非的展示emoji表情列表，选择表情，表情进入输入框， 发送表情。
但是移动端有个问题，uniapp的input组件在IOS系统是不支持在直接显示表情的。所以要转为文字，不过问题不大。
这里采取的做法是条件编译，同时判断手机系统，算是写了两套逻辑吧。
ps： 这里展示代码代码好麻烦啊。
/*
emoji表情数组：
[
[微笑],
[大哭]
]
*/
textToImg(str) {
//从文本中取出不是图片的文字形成数组，图片则是""
// /\[(?<result>)[^\[\]]+\]/
str = str.replace(reg, "<span class='clickUrl' style='color:#0d68fa'>$1$2$3$4</span>");
let result = HTMLParser(
str.replace(/\[(.+?)\]/g, item => {
let index = this.$utils.list.indexOf(item.slice(1, item.length - 1));
if (index != -1) {
// #ifdef H5
return `<img src="${this.$url}/static/imgs/emoji/${index}.png"/>`;
// #endif
// #ifdef APP-PLUS
return `<img src="${this.$url}/static/imgs/emoji2/${index}.png" width="35" height="35"/>`;
// #endif
} else {
return item;
}
})
);
return result;
}
核心大概就是这么点了，为了准确的和文字互换，所以提前定义好了一个表情数组， 表情图片用索引值命名： 0.png；
使用正则匹配到之后，替换为对应的图片即可，
