前端显示微信消息中的emoji表情

本人是微信公众号口开发，发现一些用户发送过来的消息含有emoji表情，然后存到数据库不能正确显示，读出来都是“口口口”，这个问题问到我了，我是一个前端小白，对于这种问题，我是很苦恼的，在网上找了很多资料引用了一下发现还是不行，随还是自己写吧，无非是将前端引用图片吗，所以我就开始自己码代码；

首先要自己明确思路，就是前端消息中的emoji表情要先转化为unicode格式，然后对照表情代码，引用对应文件即可，这中间还要给emoji表情添加html<img>标签，才能正常显示，好了废话不多说了上代码；

$datajs = json_encode($data,true);//转化为json格式
		$datajs =  preg_replace_callback("/(\\\u[ed][0-9a-f]{3})/i",function($arr){
			return addslashes($arr[0]);
				},$datajs);	//给表情添加“\\”		
		 $datajs =  preg_replace_callback("/(\\\u[ed][0-9a-f]{3})/i",function($arr){
				 $num = count($arr);		
				$arr[$num-1]= stripslashes($arr[$num-1]);
				$result ="\<img src = '../../../emoji/{$arr[$num-1]}.png' height =32px,width =32px;></img>";
				return  $result;},$datajs);//从给emoji表情添加标签，方便volist显示；
		 $datajs=json_decode($datajs,true);	//转换为原始数据，此时表情都已经添加了html标签
		 $num = count($datajs);
		 for($i=0;$i<$num;$i++){
			$datajs[$i]['usermsg']= stripslashes($datajs[$i]['usermsg']);
			}

具体介绍也在注释中，主要的是preg_replace_callback()，这个函数，运用正则表达式匹配unicode代码，大家都知道，emoji表情转化后都是ue开头，所以就匹配该字符，然后给这个字符前多加一个反斜杠，这个是为了方便json转码时能将unicode正常显示，第一次添加反斜杠

$datajs = preg_replace_callback("/(\\\u[ed][0-9a-f]{3})/i",function($arr){

return addslashes($arr[0]);

},$datajs); //给表情添加“\\” ，

第二次添加img标签，$datajs = preg_replace_callback("/(\\\u[ed][0-9a-f]{3})/i",function($arr){

$num = count($arr);
$arr[$num-1]= stripslashes($arr[$num-1]);
$result ="\<img src = '../../../emoji/{$arr[$num-1]}.png' height =32px,width =32px;></img>";

return $result;},$datajs);

最后在json转回去就可以正常显示了，此时由于第一次多添加了一个反斜杠，所以就导致输出表情中多了一个反斜杠就是“\emoji”,所以我们在转码后再次消除反斜杠即可运用stripslashes()，即可就再次取出反斜杠，就能正常显示emoji表情了，记住在img标签中添加的路径要正确，而且你要将每个emoji图片的名称修改成对应的unicode编码格式才能正常显示，修改图片名称这是一个挺巨大的工程；

剩下的就是html中volist标签显示问题了：下面是代码

{volist name="data" id="dt"}
		<div id = "usermessage"style = "border-bottom: 1px solid #e5e5e5;padding-top:5px;clear:both;">
		
		<{$dt.usermsg}
			</div>			
		{/volist}

为了方便就添加了div,最后是效果请看下图：

看是不是正常显示了~！

有问题欢迎留言讨论~！

前端显示微信消息中的emoji表情

猜你喜欢