微信昵称的emoji的尝试性解决方案

时间 2020-05-09

标签微信昵称 emoji 尝试性解决方案繁體版

原文原文链接

概述

以前分享过前端页面使用emoji，讨论了前端页面使用emoji的方法，可是微信昵称中的emoji怎么获取和显示呢？我查找了一些资料，把心得记录下来，供之后开发时参考，相信对其余人也有用。html

转码问题

这里借鉴umoji的源码，我总结了emoji的转码方法。前端

🐶形式的emoji转Unicode，使用下面的emojiToUnicode函数便可。vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="emoji"></div>
  <div id="haha">🍐🐶🍐</div>
  <script>
    function emojiToUnicode(emoji) {
      var backStr = ""
      if(emoji&&emoji.length>0){
        for(var char of emoji){
          var index =  char.codePointAt(0)
          if(index>65535){
            var h = '\\u'+(Math.floor((index - 0x10000) / 0x400) + 0xD800).toString(16);
            var c = '\\u'+((index - 0x10000) % 0x400 + 0xDC00).toString(16)
            backStr = backStr + h + c
          }else{
            backStr = backStr + char
          }
        }
        console.log(backStr)
      }
      return backStr
    }

    var test = emojiToUnicode(document.querySelector('#haha').innerHTML);
    document.querySelector('#emoji').innerHTML = test;
  </script>
</body>
</html>

Unicode转🐶形式的emoji，使用decodeURI()方法便可：node

console.log(decodeURI('\ud83c\udf50\ud83d\udc36\ud83c\udf50'));

图片显示

在讨论以前能够先看一下个人上一篇博文：前端页面使用emoji，咱们这里使用的是博文中介绍的第二个库。react

这个库有3个问题须要解决：jquery

1.库里面使用了jquery，可是移动端通常使用zepto。通过测试，把里面的jquery换成zepto就能够了。git

2.库里面的图片解码不全。能够看一下它的emoji.js，能够看到，它的解码主要依靠EMOJI_MAP对象，而这个对象下面有一部分emoji图片的解码还不完整，须要补充。github

3.这个库没有解决相似[捂脸]这种汉字形式的emoji代码。这个就须要本身补充了。小程序

因此综合一下，若是项目确实须要显示微信昵称中的emoji的话，建议仍是本身写一个库。微信小程序

其它库

若是想要在微信小程序，或者vue,react里面使用emoji的话，建议仍是去找vue-emoji或者react-emoji这种库比较好。