前端处理微信聊天消息中emoji表情的显示

        在做微信或企业微信相关业务时，获取到的微信聊天消息有时候会遇到微信创作的emoji表情显示处理，而微信创造的emoji表情不是字符串而是图片，其中电脑端显示的是108个，手机上显示的是109个多一个[發]。

        这些特定的表情在微信内显示正常，但复制出来是[愉快]这样的文本（比如[愉快]对应的就是微信内表情），并且调用微信API获取到的微信聊天消息中的特定表情返回的也是[愉快]这样的文本，那前端拿到这样的数据怎么去渲染对应的表情图片呢？

        于是我上网找微信创造的一百多个emoji表情图片素材，没找到，至少面向百度是没找到的，全是说的文字类的emoji表情对照表，而这些文字类的emoji表情不用处理浏览器都可以直接显示，微信官网也没有提供类似的接口或资源下载。

        至此，我没找到直接能用的接口或资源（也可能是我没找到好的方法），只好自己去处理了这些资源图片了，把微信电脑的聊天窗口打开，点开表情，截图，然后P图去掉底色，拼接成一张精灵图，PS技术有限，表情的边缘处理的不太好，整体图片尺寸也不太完美，勉强能用。

        废话就不再多说了，直接放代码吧，代码中style的margin和transform可根据实际情况做微调，主要可能是跟消息文字的字号和行高相关联。文章最后有表情图片资源。

// 微信表情精灵图
import emoji from '@/assets/emoji.png'
// 微信表情对照表
const emojiTxtArr = '[微笑][撇嘴][色][发呆][得意][流泪][害羞][闭嘴][睡][大哭][尴尬][发怒][调皮][呲牙][惊讶][难过][囧][抓狂][吐][偷笑][愉快][白眼][傲慢][困][惊恐][憨笑][悠闲][咒骂][疑问][嘘][晕][衰][骷髅][敲打][再见][擦汗][抠鼻][鼓掌][坏笑][右哼哼][鄙视][委屈][快哭了][阴险][亲亲][可怜][笑脸][生病][脸红][破涕为笑][恐惧][失望][无语][嘿哈][捂脸][奸笑][机智][皱眉][耶][吃瓜][加油][汗][天啊][Emm][社会社会][旺柴][好的][打脸][哇][翻白眼][666][让我看看][叹气][苦涩][裂开][嘴唇][爱心][心碎][拥抱][强][弱][握手][胜利][抱拳][勾引][拳头][OK][合十][啤酒][咖啡][蛋糕][玫瑰][凋谢][菜刀][炸弹][便便][月亮][太阳][庆祝][礼物][红包][福][烟花][爆竹][猪头][跳跳][发抖][转圈]'.split('][')
// 遍历后得到的表情对照数组
const emojiList = emojiTxtArr.map((item, index) => {
    if (index === 0) {
        return item + ']'
    } else if (index === emojiTxtArr.length - 1) {
        return '[' + item
    } else {
        return '[' + item + ']'
    }
})
// 处理文字换行和微信表情
const initTxt = (txt) => {
    let TXT = txt.replaceAll('\n', '<br/>')
    emojiList.forEach((item, index) => {
        const style = `background-image: url(${emoji});background-position: -${(31 + 84 * (index % 9))}px -${(31 + 90 * Math.floor(index / 9))}px;width: 50px;height: 50px;margin:-15px;transform: scale(0.3);`
        TXT = TXT.replaceAll(item, `<div style="${style}"></div>`)
    })
    return TXT
}

<div class="text" v-html="initTxt('你是一个小可爱[愉快]')"></div>

<style>
    .text {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        font-size: 14px;
        color: #333;
        word-break: break-all;
        background-color: #eee;
        padding: 10px 15px;
        border-radius: 4px;
    }
</style>

微信表情精灵图资源：