首页 > 技术文章 > Emoji-Chat emoji表情包发送及显示兼容web端、移动端

zhazhanitian 2019-07-04 18:26 原文

序言

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

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

崩溃

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

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

完整demo在这儿:click me


设计方案一

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

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

emojipic

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			.emoji-con_span {
				display: block;
				width: 300px;
				background-color: #cee6ff;
				color: #282828;
				border-radius: 4px;
				padding: 8px 12px;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<span class="emoji-con_span">emoji:

推荐阅读