前端实现自定义表情【微信表情】

你也许会发现微信表情和输入法自带的emoji并不完全一样。正如市面上很多app，大多数有自定义的表情库。那前端是如何实现的呢？先来看看我做好的仿微信的演示：

成果展示

分析

我们先来看一看自定义表情的特点：

• 像一个图片icon
• 能和文字一起排版

自定义表情的显示模型：

按照以上模型，我们可以给表情位定义一个<img />，但前端组件input框并不支持非字符的输入又该怎么办呢？

给每个表情定义一个key值（字符名称），发送消息后再转换成相应的value值（img标签）

细心的朋友，特别是使用Iphone的朋友（原生安卓不适用），当你们点击要输入的表情时输入框并没有立即显示出表情，而是显示的key值，如：[鼓掌]。消息发出后才变成相应的value值。

减少资源加载

OK，以上就是实现自定义表情的全部理论，看起来并不复杂。但表情图片一个一个加载太占资源了，特别是微信动不动就是100多个表情，怎么办呢？我们能不能把表情拼凑成一个文件加载呢？可以！

把表情做在一张png图上，然后用img的clip-path属性定位特定区域。

代码实现

实现细节放在了github上，封装成了Vue插件，熟悉Vue的小伙伴可以直接使用，欢迎各位留言交流哦~