uniapp-显示微信emoji表情

起因

微信聊天的一句话：

将文案复制到自己项目：

微信自带的emoji表情文字，离开了微信体系都不能进行正常展示，复制了文案后呈现出来的都是类似[Smirk] /:ok这样的字符，不优雅，一点也不优雅，为什么不能在我们自己的项目里，也正常展示微信emoji表情+文字呢？于是...开始想办法了🤔

调研

• 微信官方拓展组件
  • 该微信小程序拓展组件是微信官方出的，组件文档使用说明
  • 微信官方拓展组件链接不知什么原因2021年下旬就不能再访问了
  • 这是该组件的代码片段，可以通过微信开发工具导入进行参考
• DCloud插件市场
  • 有一些emoji相关插件

开发

想法

1. 将文本字符串逐个匹配[Smirk] /:ok这样的微信emoji关键词；
2. 将关键词替换成微信的emoji图片，图片通过html代码片段进行呈现；
3. emoji图的html代码片段，通过整张雪碧图进行定位展示，减少图片资源请求;
4. 再将替换的图片html片段 与 剩下文字进行组合，就是一段完整的html代码；
5. rich-text组件支持渲染html，直接进行渲染就完成了微信的emoji图文展示。

实现

• 定义emoji关键词

data() {
    return {
        emojiMap: {
            '[微笑]': {
              x: 0, y: 0
            },
            '[Smile]': {
              x: 0, y: 0
            }，
            '/::)': {
              x: 0, y: 0
            }，
            ... ...
        }
    }
}

• 将emoji关键词，替换成html代码

// val => 整体文本字符串
Object.keys(this.emojiMap).forEach(keys => {
    if (val.includes(keys)) {
        let html = this.keyword2html(keys)
        val = val.replaceAll(keys, html)
    }
})
this.emojiHtml = val

• 生成emoji代码片段

methods: {
    keyword2html (keys) {
        let html = ``
        let { x, y } = this.emojiMap[keys]
        html += `<span style="display:inline-block;vertical-align:top;width:22px;height:22px;overflow:hidden;position:relative;"><img src="https://scdn.shidaijia.com/static/common/emoji-sprite_471.png" style="width:236px;height:214px;position:absolute;`
        html += `left:${x * - 21.5}px;top:${y * - 21.5}px`
        html += `;"></span>`
        return html
    }
}

• 通过rich-text进行渲染

<template>
    <view class="context">
        <rich-text :nodes="emojiHtml" />
    </view>
</template>

大功告成

组件下载

DCloud下载地址

关键词

emoji、微信表情、微信emoji、uniapp-emoji、uniapp-微信表情