最近在做我們學(xué)校的表白墻網(wǎng)站肉微，在做到評論功能的時候自然而然就想到了emoji-??。
于是就去搜了一些這方面的資料桅滋，發(fā)現(xiàn)了比較好的三個emoji庫：
- emojione（第一個開源且完整的emoji網(wǎng)站，編碼方面100%免費，且與項目有非常好的整合性）
- Twemoji (完全免費躁绸，簡單小巧，API相比emojione較少臣嚣。)
- Twemoji Awesome (Twemoji社區(qū)的項目净刮，純css顯示emoji)
綜合考慮最后選擇了emojione來實現(xiàn)，因為API比較多而且文檔十分友好硅则。
1. 引入emojione
- 通過外鏈
<script src="https://cdn.jsdelivr.net/npm/emojione@3.1.2/lib/js/emojione.min.js"></script>
<link rel="stylesheet" />
- NPM
> npm install emojione
2. 生成emoji選擇界面
首先我們需要這些emoji的圖片淹父，隨即我就去emojione官網(wǎng)下載了32×32px的PNG圖片，可是之后我發(fā)現(xiàn)圖片太多不可能讓我一個一個引入吧怎虫！
轉(zhuǎn)變思路暑认，去看emojione的文檔，發(fā)現(xiàn)了一個提供API演示功能的emojione實驗室大审。
實驗室中有一個API可以把HTML中的unicode 轉(zhuǎn)換為圖片：.unicodeToImage(str)
于是我用JS Bin 做了一個小demo測試了一下,發(fā)現(xiàn)沒有什么問題蘸际。
OK，那么我們就可以通過這個API批量生成emoji的圖片了徒扶，可是emoji的Unicode碼去哪找呢粮彤？
官方提供了一個Unicode復(fù)制粘貼的網(wǎng)站：emojiCOPY
選中想要的emoji，之后點擊COPY就可以復(fù)制下來姜骡，然后再粘貼到剛才的JS Bin之中就可以批量生成圖片了：
之后把這些圖片的HTML直接復(fù)制到我們的項目之中：
讓人驚喜的是這些生成的img的alt是Unicode导坟，這讓input顯示和用戶點擊同步也變得簡單了。
接下來只需要寫很簡單的JS就可以實現(xiàn)了：
$('.emoji').children().click((emoji)=> {
comment = comment + ' ' + emoji.target.alt + ' '
})
