前端页面将用户带有emoji表情符号的留言发送给后端保存后，前端页面从后端获取留言再次展现。但是到再次从后端获取留言展示时，emoji表情符号不能正确展示。
我就奇怪了,emoji表情也是文本内容,怎么就发送失败呢,我通过Chrome调试之后发现,向后台发送的时候就显示失败了,也就是后台没有存进去,之后我就去找后台联调, 查阅资料之后发现,emoji所占的字节数为4个字节,就是js的编码导致的问题,后台数据库一般设置的是UTF-8存储形式,存储不进去。
那么怎么解决呢, 有好多办法来解决,前端后台都可以解决
1.后台更改数据库格式
执行sql语句将数据库的编码格式改成utf8mb4 存储形式,这种4字节的UTF-8存储形式可以完美的兼容以前的3字节的存储形式,并且可以直接存储emoji表情,这是最完美的解决方案.
2.使用base-64编码
列如可以使用base-encode来编码emoji表情之后存储在UTF-8之中,取出的时候decode一下就可以了。
3.干掉emoji表情
暴力干掉,估计PM不会同意这么做
4.前端处理
就是通过第三方插件, 将输入的emoji转为span标签,并赋上相应的class,找一大堆emoji,表情图片,向后台发送的时候就是发送span表情,这个后台当让就可以存储了, 这样做的好处就在所有的设备上展示的都是一样的,不会产生歧义,当然缺点就是emoji表情在更新,有可能你所找到的emoji表情图片库不全,有的表情无法展示到页面上,这个就需要定期维护
5.前端实现自定义表情
你也许会发现微信表情和输入法自带的emoji并不完全一样。正如市面上很多app，大多数有自定义的表情库。那前端是如何实现的呢？
我们可以给表情位定义一个<img />，但前端组件input框并不支持非字符的输入又该怎么办呢？
给每个表情定义一个key值（字符名称），发送消息后再转换成相应的value值（img标签）
细心的朋友，特别是使用Iphone的朋友（原生安卓不适用），当你们点击要输入的表情时输入框并没有立即显示出表情，而是显示的key值，如：[鼓掌]。消息发出后才变成相应的value值。
OK，以上就是实现自定义表情的全部理论，看起来并不复杂。但表情图片一个一个加载太占资源了，特别是微信动不动就是100多个表情，怎么办呢？我们能不能把表情拼凑成一个文件加载呢？可以！
把表情做在一张png图上，然后用img的clip-path属性定位特定区域。