微信暱稱的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這種庫比較好。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。