前端显示微信消息中的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,最后是效果请看下图:


        看是不是正常显示了~!

有问题欢迎留言讨论~!

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页