微擎系统内如何处理微信昵称出现emoji表情问题

emoji表情应用非常多,体验也非常好,但是对于开发技术人员来说却是个噩梦一般的存在😭

如果还不清楚什么是emoji,个人认为阮一峰老师写的这篇文章介绍的非常好,做为入门阅读很合适。

https://www.ruanyifeng.com/blog/2017/04/emoji.html

Snipaste_2020-12-17_18-09-28

1、问题

由于在微信昵称中可以设置表情,所以在微擎后台会员管理中,就会在昵称中出现一些空白,如下图

Snipaste_2020-12-17_16-58-29

小程序端则会直接把乱码显示出来,造成不好的体验,如下图

1608200818733

2、解决方案

网上关于emoji表情处理有很多介绍文章,一般都会涉及数据库存储和过滤删除的解决方案,但是都不建议在前端兼容展示表情,在此不做过多介绍,但是好多文章中的过滤函数在微擎环境下并不能生效。

原因可能是由于字符编码不一致导致,有些表情采用3字节或4字节,导致了过滤函数失效。

以下过滤函数在微擎环境下测试正常,供大家参考:

public static function removeEmoji(&$str)
{
    preg_match_all('/[\x{4e00}-\x{9fff}\d\w\s[:punct:]]+/u', $str, $result);
    $str = join('', $result[0]);
    return $str;
}

3、其它

现在让我们登录微信公众号后台,来看看微信官方是如何解决这个问题的,如下图

Snipaste_2020-12-17_18-19-27

微信官方采用了雪碧图的方式实现了公众号的表情显示(https://res.wx.qq.com/mpres/htmledition/images/icon/emoji49d02c.png),这种解决方案会导致每个不同平台表情显示细节不同,以下是表情对比图(公众平台截图放大后有一点点失真不要介意)

Snipaste_2020-12-17_18-23-19

4、总结

建议在无特殊情况下,直接对表情做过滤处理,如需要展示表情,可以参考微信公众平台方式,直接调用微信官方的表情图,保持和微信官方一致的产品体验,千万别自己去做一套表情图,一定会费力不讨好。

本次分享结束,如有任何问题或想法欢迎留言给作者。

本文是微擎百科入驻作者原创文章,如若转载请联系作者授权,发私信联系作者

发表评论

登录后才能评论

评论列表(2条)

  • 木易家
    木易家 2020年12月19日 09:21

    微擎的2.7版本不是优化了表情问题么

    • admin
      飞驰人生 2020年12月19日 10:21

      @木易家上面会员昵称截图基于微擎商业版最新版本x2.7.0(202012150001)
      微擎新版应该只是解决昵称表情登录问题,而没有解决表情显示的问题。