最近在做我们学校的表白墙网站，在做到评论功能的时候自然而然就想到了emoji-😏。
于是就去搜了一些这方面的资料，发现了比较好的三个emoji库：
- emojione（第一个开源且完整的emoji网站，编码方面100%免费，且与项目有非常好的整合性）
- Twemoji (完全免费，简单小巧，API相比emojione较少。)
- Twemoji Awesome (Twemoji社区的项目，纯css显示emoji)
综合考虑最后选择了emojione来实现，因为API比较多而且文档十分友好。
1. 引入emojione
- 通过外链
<script src="https://cdn.jsdelivr.net/npm/emojione@3.1.2/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emojione@3.1.2/extras/css/emojione.min.css"/>
- NPM
> npm install emojione
2. 生成emoji选择界面
首先我们需要这些emoji的图片，随即我就去emojione官网下载了32×32px的PNG图片，可是之后我发现图片太多不可能让我一个一个引入吧！
转变思路，去看emojione的文档，发现了一个提供API演示功能的emojione实验室。
实验室中有一个API可以把HTML中的unicode 转换为图片：.unicodeToImage(str)
于是我用JS Bin 做了一个小demo测试了一下,发现没有什么问题。
OK，那么我们就可以通过这个API批量生成emoji的图片了，可是emoji的Unicode码去哪找呢？
官方提供了一个Unicode复制粘贴的网站：emojiCOPY
选中想要的emoji，之后点击COPY就可以复制下来，然后再粘贴到刚才的JS Bin之中就可以批量生成图片了：
之后把这些图片的HTML直接复制到我们的项目之中：
让人惊喜的是这些生成的img的alt是Unicode，这让input显示和用户点击同步也变得简单了。
接下来只需要写很简单的JS就可以实现了：
$('.emoji').children().click((emoji)=> {
comment = comment + ' ' + emoji.target.alt + ' '
})
