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

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

成果展示

分析

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

  • 像一个图片icon

  • 能和文字一起排版

自定义表情的显示模型:

模型解剖

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

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

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

减少资源加载

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

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

代码实现

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

你可能感兴趣的:(前端实现自定义表情【微信表情)