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

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

成果展示

分析

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

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

自定义表情的显示模型：

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

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

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

减少资源加载

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

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

代码实现

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

前端实现自定义表情【微信表情】相关推荐

Android+8.0+微信表情,微信表情包不会动是怎么回事安卓微信8.0更新表情特效怎么弄？...
微信更新8.0版本来了!微信新版本更新,微信8.0已经上架 App Store,其显示此次更新了若干功能,解决了一些已知问题,那么微信更新表情不动是什么原因?微信在1月21日晚间于iOS更新了8.0版 ...
fragment在activity中的静态和动态用法_使用Matlab修改压缩Gif动态图片制作微信表情...
脚本之家你与百万开发者在一起作者:theOwlAndPussyCat/焦旭光引言电脑里存了很多有意思的Gif动态图片,闲暇想把这些动图全导入微信表情,可是这些动图很多大小超过了微信表情大小1M ...
小程序源码：聊天斗图微信表情包
这是一款微信表情包小程序支持自定义搜索,另外支持长按发送给好友当然也支持长按保存表情包这个源码比较单调一点,没有那么多的分类小程序源码下载地址: 小程序源码:聊天斗图微信表情包-小程序文档类资 ...
微信表情《程序员小黄第二季》上架啦！
微信表情<程序员小黄第二季>上架啦! 用了三个软件(paint.net, gimp, ibisPaint)+ 三个硬件(iPad, ASUS laptop, MacBook Pro)完成的 ...
微信表情150个限制怎么破?教你一招
微信有那么高的DAU,朋友圈的贡献最高,其次是收发消息(图片文字.语音.视频等),第六是微信表情,所谓一图抵千言,微信表情增加了社交的趣味性,试问哪位朋友没保存表情的?可微信表情限制只能保存150个, ...
mysql emoy表情_GitHub - PandaQAQ/PandaEmoView: emoji gif 表情图文混排，仿微信表情输入...
该库具有以下特点: 支持 emoji 表情图片支持 gif 动态表情输入显示支持单张贴图表情(与微信收藏表情一致) 支持题图表情库的添加删除效果图: 快速使用引入库 compile 'com. ...
大数据窥探微信表情背后的含义，结论可能就是，你老了……
导读:1月9日,在微信公开课PRO上,微信官方发布了<2018微信数据报告>. 根据大数据统计,过去的2018年,不同年龄段的用户对小表情的使用情况是不一样的. 00后最爱的微信表情是&q ...
微信表情图像代表什么意思_微信表情图是什么意思
微信表情图有不同的表情组成,用来含蓄的表达微信使用者的心情,它的用法与qq表情相似. 微信表情图分别都对应有文字代码,符号代码.即打出该表情的文字代码或则符号代码久可以发出对应的表情. 扩展资料: 表 ...
mysql 过滤emoji表情_过滤微信表情/emoji表情
微信表情/emoji表情是个麻烦的东西,即使你能存储,也不一定能完美显示.在iOS以外的平台上,例如PC或者android.如果你需要显示emoji,就得准备一大堆emoji图片并使用第三方前端类库才 ...
小程序源码：聊天斗图微信表情包-多玩法安装简单
这是一款微信表情包小程序支持自定义搜索,另外支持长按发送给好友当然也支持长按保存表情包这个源码比较单调一点,没有那么多的分类小程序源码下载地址: 小程序源码:聊天斗图微信表情包-多玩法安装简单 ...

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

分析

减少资源加载

代码实现

前端实现自定义表情【微信表情】相关推荐

最新文章

热门文章