前端emojs_Emoji-Chat emoji表情包发送及显示兼容web端、移动端

序言

在如今聊天表情包满天飞的当下，聊天过程中想发送个表情感慨一下情绪在所难免，当下我就遇到这么个需求，希望在web端聊天室中可以发送表情，还得在web端、微信H5、app端、微信公众号里均可以正常显示出来

看到这个需求我的内心是这样的

一番Google下来发现网上的大多都是移动端发送，以字典的方式匹配替换后web端只是单纯的做显示而已，难以找出符合我需求的文章了，那没办法，产品是老大，只能自己研究研究咯。。。

心痒痒的话就先看看效果：click me

完整demo在这儿：click me

设计方案一

最开始的设计思路是既然emoji表情有对应的Unicode码，那么是不是可以直接就使用Unicode码来进行传输及显示，直接不做任何处理，基于各平台对Unicode的支持，让其自生自灭呢？想着就干，尝试一波再说。。。

看到这里如果真的动手去尝试了么估计你是真的没有好好了解一波emoji的Unicode码，只要进入官网或者各统计平台应该应该都可以看到这个东西

由上图可以看出个移动端对emoji的支持都存在如此大的差异，那么PC端的差距不看也知道不忍直视了，当然可能基于好奇和专研的精神，个别还是想去尝试一波，断绝念头。。。好比如我

.emoji-con_span {

display: block;

width: 300px;

background-color: #cee6ff;

color: #282828;

border-radius: 4px;

padding: 8px 12px;

box-sizing: border-box;

}

emoji：😂😍😘

你可以将如上代码运行于各浏览器，你可能看到这个效果

chrome

Firefox

​ IE

​ Edge

Android

由上可以看出各端的差距主要在移动端和IE之间，特别是移动端和PC端的差距，几乎改头换面了，这不说产品，自己这关很明显都过不了，况且IE非edge模式下还是黑白色。所以这