最近在做我们学校的表白墙网站，在做到评论功能的时候自然而然就想到了emoji-😏。 于是就去搜了一些这方面的资料，发现了比较好的三个emoji库：

  • emojione（第一个开源且完整的emoji网站，编码方面100%免费，且与项目有非常好的整合性）
  • Twemoji (完全免费，简单小巧，API相比emojione较少。)
  • Twemoji Awesome (Twemoji社区的项目，纯css显示emoji)

综合考虑最后选择了emojione来实现，因为API比较多而且文档十分友好。

引入emojione

  • 通过外链
1
2

<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
1

> npm install emojione

生成emoji选择界面

首先我们需要这些emoji的图片，随即我就去emojione官网下载了32×32px的PNG图片，可是之后我发现图片太多不可能让我一个一个引入吧！

转变思路，去看emojione的文档，发现了一个提供API演示功能的[emojione实验室](https://demos.emojione.com/latest/index.html## extras)。

实验室中有一个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就可以实现了：

1
2
3

$('.emoji').children().click((emoji)=> {
    comment = comment + ' ' + emoji.target.alt　+　' '
})