概述
最近在工作中遇到了移動端emoji的顯示問題，於是查找了一些相關資料，試驗了一番，把心得記錄下來，供以后開發時參考，相信對其他人也有用。
參考資料：
為網站添加emoji表情的支持
思路
在頁面上使用emoji主要推薦2個庫：emojify.js和emoji。
其實所有emoji庫的思路都是，用js找出字符串里面表示emoji的字符串，然后將它替換為img標簽即可，也可以把它替換為span標簽，然后用雪碧圖的方式引入emoji圖片。
下面來介紹一下這兩個庫的使用方法。
emojify.js
Github鏈接：emojify.js
首先去它的github下載它的css，js和images，然后運用它提供的replace這個api來把emoji字符串替換為圖片。示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="emojify.min.css" />
</head>
<body>
<div id="emoji"></div>
<script src="emojify.min.js"></script>
<script>
var a = emojify.replace('I am happy :+1:');
document.querySelector('#emoji').innerHTML = a;
</script>
</body>
</html>
當然css和js也可以使用它提供的cdn：
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/css/basic/emojify.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/js/emojify.min.js"></script>
圖片也可以使用它的cdn，只需要在setConfig這個api里面設置圖片的cdn路徑即可：
emojify.setConfig({img_dir : 'https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic'});
這個庫的優點是，圖片比較全，功能比較多，star數比較高。但是有一個很嚴重的缺點：就是只能識別雙引號包裹的emoji表情，不能識別Unicode，Utf-16等形式的emoji表情。
emoji
Github鏈接：emoji
這個庫相比上個庫，優點是能夠識別Utf-16形式的emoji表情，缺點是里面的emoji圖片不夠完整，有些emoji圖片識別不了（我看源碼發現js的識別代碼還不完整），api就只有一個，而且好久都沒有維護了。
使用方法也很簡單，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://cdn.staticfile.org/emoji/0.2.2/emoji.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="emoji"></div>
<div id="haha">🍐🐶🍐😎⛎🕢👐🔔</div>
<script type="text/javascript" src="gy.dev.2.1.0.js"></script>
<script src="http://cdn.staticfile.org/emoji/0.2.2/emoji.js"></script>
<script>
var $text = $('#haha');
var html = $text.html().trim().replace(/\n/g, '<br/>');
$text.html(jEmoji.unifiedToHTML(html));
</script>
</body>
</html>