本人是微信公众号口开发,发现一些用户发送过来的消息含有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,最后是效果请看下图:
看是不是正常显示了~!
有问题欢迎留言讨论~!