更新记录

3.0.0（2025-08-22） 下载此版本

本次更新兼容部分表情使用字体更新不展示-或者展示方框的异常。不过此次的字体包较大

2.0.0（2021-06-19） 下载此版本

新增更多表情-

几乎全端支持--但是没完全支持！

app或者小程序

手机里面没有对应的字库或者字体就会显示不完全！在浏览器上显示率99%

1.0.0（2019-09-21） 下载此版本

表情库

查看更多

平台兼容性

uni-app(4.07)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - √ √ √ √ - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
√ √ √ √ - - - √ - √ √

uni-app x(4.07)

Chrome Safari Android iOS 鸿蒙 微信小程序
- - - - - -

其他

多语言 暗黑模式 宽屏模式
√ √ √

图标的展示

先导入字体-这个字体比较大9.72M 必须的放服务器哦- 可以把下面的html直接复制到一个html文件中预览，附带图片里面也有展示介绍，左侧是使用字体的，右侧是自带字体的，、 会有少部分表情没有展示出来， 当然如果你觉得这个表情的太大了，你也可以删除一些你不需要的表情

然后导入这个emoji.json 下面这个是解析成表情的方法 或者你直接导入index.js 里面有解析好的表情

emojiDatasource.map(emoji => {
    const unicodes = emoji.unified.split('-');
    const label = String.fromCodePoint(...unicodes.map(u => Number.parseInt(u, 16)));
    const name = emoji.name || emoji.short_name.replace(/[_-]/g, ' ').toUpperCase();
    const markdown = `:${emoji.short_name}:`;
    const unicode = unicodes.map(u => (u.length === 4) ? `\\u${u}` : `\\u{${u}}`).join('');
    return {
        label,
        description: `${name} ${markdown}`,
        markdown,
        unicode,
    };
})
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'emoji';
            src: url('./NotoColorEmoji.ttf');
            font-weight: normal;
            font-style: normal;
        }
        .emoji{
            font-family: emoji;
        }
        .emoji_view{
            display: flex;
            flex-wrap: wrap;
        }
        .emoji_box{
            margin: 20px;
            padding: 10px;
            border: 1px solid salmon;
        }
    </style>
</head>
<body>
    <div class="emoji_view"></div>
    <script>
        fetch("./emoji.json")
            .then(res => res.json())
            .then(emojiDatasource => {
                let smilesOptions = emojiDatasource.map(emoji => {
                    const unicodes = emoji.unified.split('-');
                    const label = String.fromCodePoint(...unicodes.map(u => Number.parseInt(u, 16)));
                    const name = emoji.name || emoji.short_name.replace(/[_-]/g, ' ').toUpperCase();
                    const markdown = `:${emoji.short_name}:`;
                    const unicode = unicodes.map(u => (u.length === 4) ? `\\u${u}` : `\\u{${u}}`).join('');
                    return {
                        label,
                        description: `${name} ${markdown}`,
                        markdown,
                        unicode,
                    };
                });

                smilesOptions.forEach((emoji, key) => {
                    //创建一个div
                    const div = document.createElement('div');
                    //让 div flex间距10个像素 -垂直居中水平居中
                    div.style.display = 'flex';
                    div.style.gap = '10px';
                    div.style.alignItems = 'center';
                    div.style.fontSize = '24px';
                    div.classList.add('emoji_box');

                    // 创建两个div--各自宽高50个px然后-
                    const div1 = document.createElement('div');
                    const div2 = document.createElement('div');
                    div2.title = emoji.unicode;

                    //div1添加emoji 样式
                    div1.classList.add('emoji');
                    div2.classList.add('no_emoji');
                    div1.textContent = emoji.label;
                    div2.textContent = emoji.label;
                    div(div1);
                    const div3 = document.createElement('div');
                    div3.textContent = ">";
                    div(div3);
                    div(div2);
                    document.querySelector('.emoji_view')(div);
                })

            });
    </script>
</body>
</html>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...