npm 包 emojione-slim 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 emojione-slim

emojione-slim 是一个 npm 包，可以让你在前端页面中使用 emoji 表情。相比于官方规范的 emojione 包，emojione-slim 版本的包更加“轻量级”，只包含了一些基本的 emoji 表情。

安装

安装 emojione-slim 只需一行命令：

npm install emojione-slim

使用

1. 引入样式文件

emojione-slim 包只包含了 emoji 图片，如果要在页面上显示 emoji，需要先引入样式文件：

<link href="./node_modules/emojione-slim/emojione-slim.min.css" rel="stylesheet">

2. 使用 emoji

现在，你可以在页面上使用 emoji 了，只需要在需要插入 emoji 的地方写下 emoji 的 Unicode 码即可，emojione-slim 会自动将其转化为相应的图片：

<p>我今天很开心，😀😁😂😃😄😅🤣😆😉</p>

3. 使用 js API

如果你需要在 js 中进行其他操作（如将 Unicode 码转化为图片地址），emojione-slim 还提供了 js API。在使用 API 之前，需要先引入 js 文件：

<script src="./node_modules/emojione-slim/emojione.min.js"></script>

现在，你可以使用 emojione 调用相关方法了：

var emojiCode = '1f601';
var emojiImgUrl = emojione.imagePathSVG + emojiCode + '.svg';

console.log(emojiImgUrl); // 输出：https://cdn.jsdelivr.net/npm/emojione-slim@3.1.3/lib/slim/sprites/sheet_0.svg#s-1f601

这里我们获取了一个笑脸 emoji 的图片地址。

示例代码

-- -------------------- ---- -------
--------- -----
------
  ------
    -------------------- ------------
    ----- --------------------------------------------------------- -----------------
  -------
  ------
    ----------------- ---------
    --------------------------------
    ------- ------------------------------------------------------------
    --------
    --- --------- - --------
    --- ----------- - --------------------- - --------- - -------

    ------------------------- -- ----------------------------------------------------------------------------------------
    ---------
  -------
-------

学习及指导意义

emojione-slim 是一款十分实用的前端工具，能够让我们十分方便地在页面上显示 emoji 表情。同时，emojione-slim 的使用方法也非常简单，适合初学者使用。除此之外，emojione-slim 的 API 也提供了一些有用的方法，可以让我们进行更多个性化的操作。因此，学习和使用 emojione-slim 是一项十分值得投资的技能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005665481e8991b448e2786