当前位置： 首页 > article >正文

react中渲染企业微信的表情

article 2024/12/21 23:08:17

前提：后端返回的的表情是解析成字符串的这种，形如：[微笑]、[旺财]等的

大致思路：

  • 需要一张完整表情包的精灵图，
  • 用正则去匹配[***]这种文本
  • 再写个json对照表，匹配到的再用json去匹配对应的style样式。
  • 利用background-position读取每个表情包对应在精灵图上的位置。

  • 业务代码中调用
  • import React, { useEffect, useState } from 'react';
import { encodeEmoji } from './emoji.js';

export default function MsgText(props) {
  const { data = '' } = props;
  const [chatMsgInfo, setChatMsgInfo] = useState('')
  useEffect(() => {
    setChatMsgInfo(data)
  }, [data])

  return (
    <div className='msg-text'>
      {
        encodeEmoji(chatMsgInfo?.chatMsg?.content)
      }
    </div>
  )
}

  • js部分
  • const emojiJson = {
  '[微笑]': 'smiley_0',
  '[撇嘴]': 'smiley_1',
  '[色]': 'smiley_2',
  '[发呆]': 'smiley_3',
  '[得意]': 'smiley_4',
  '[流泪]': 'smiley_5',
  '[害羞]': 'smiley_6',
  '[闭嘴]': 'smiley_7',
  '[睡]': 'smiley_8',
  '[大哭]': 'smiley_9',
  '[尴尬]': 'smiley_10',
  '[发怒]': 'smiley_11',
  '[调皮]': 'smiley_12',
  '[呲牙]': 'smiley_13',
  '[惊讶]': 'smiley_14',
  '[难过]': 'smiley_15',
  '[冷汗]': 'smiley_17',
  '[抓狂]': 'smiley_18',
  '[吐]': 'smiley_19',
  '[偷笑]': 'smiley_20',
  '[愉快]': 'smiley_21',
  '[白眼]': 'smiley_22',
  '[傲慢]': 'smiley_23',
  '[困]': 'smiley_25',
  '[惊恐]': 'smiley_26',
  '[流汗]': 'smiley_27',
  '[憨笑]': 'smiley_28',
  '[悠闲]': 'smiley_29',
  '[奋斗]': 'smiley_30',
  '[咒骂]': 'smiley_31',
  '[疑问]': 'smiley_32',
  '[嘘]': 'smiley_33',
  '[晕]': 'smiley_34',
  '[衰]': 'smiley_36',
  '[骷髅]': 'smiley_37',
  '[敲打]': 'smiley_38',
  '[再见]': 'smiley_39',
  '[擦汗]': 'smiley_40',
  '[抠鼻]': 'smiley_41',
  '[鼓掌]': 'smiley_42',
  '[坏笑]': 'smiley_44',
  '[左哼哼]': 'smiley_45',
  '[右哼哼]': 'smiley_46',
  '[哈欠]': 'smiley_47',
  '[鄙视]': 'smiley_48',
  '[委屈]': 'smiley_49',
  '[快哭了]': 'smiley_50',
  '[阴险]': 'smiley_51',
  '[亲亲]': 'smiley_52',
  '[可怜]': 'smiley_54',
  '[菜刀]': 'smiley_55',
  '[西瓜]': 'smiley_56',
  '[啤酒]': 'smiley_57',
  '[咖啡]': 'smiley_60',
  '[饭]': 'smiley_61',
  '[猪头]': 'smiley_62',
  '[玫瑰]': 'smiley_63',
  '[凋谢]': 'smiley_64',
  '[嘴唇]': 'smiley_65',
  '[爱心]': 'smiley_66',
  '[心碎]': 'smiley_67',
  '[炸弹]': 'smiley_70',
  '[便便]': 'smiley_74',
  '[月亮]': 'smiley_75',
  '[太阳]': 'smiley_76',
  '[礼物]': 'u1F381',
  '[拥抱]': 'smiley_78',
  '[强]': 'smiley_79',
  '[弱]': 'smiley_80',
  '[握手]': 'smiley_81',
  '[胜利]': 'smiley_82',
  '[抱拳]': 'smiley_83',
  '[勾引]': 'smiley_84',
  '[拳头]': 'smiley_85',
  '[OK]': 'smiley_89',
  '[跳跳]': 'smiley_92',
  '[发抖]': 'smiley_93',
  '[怄火]': 'smiley_94',
  '[转圈]': 'smiley_95',
  '[嘿哈]': 'e2_04',
  '[捂脸]': 'e2_05',
  '[奸笑]': 'e2_02',
  '[机智]': 'e2_06',
  '[皱眉]': 'e2_12',
  '[耶]': 'e2_11',
  '[红包]': 'e2_09',
  '[發]': 'e2_09',
  '[福]': 'e2_09',
  '[鸡]': 'e2_14',
  '[笑脸]': 'u1F604',
  '[生病]': 'u1F637',
  '[破涕为笑]': 'u1F602',
  '[吐舌]': 'u1F61D',
  '[脸红]': 'u1F633',
  '[恐惧]': 'u1F631',
  '[失望]': 'u1F614',
  '[无语]': 'u1F612',
  '[鬼魂]': 'u1F47B',
  '[合十]': 'u1F64F',
  '[强壮]': 'u1F4AA',
  '[庆祝]': 'u1F389',
  '[吃瓜]': 'smiley_313',
  '[加油]': 'smiley_314',
  '[汗]': 'smiley_315',
  '[天啊]': 'smiley_316',
  '[Emm]': 'smiley_317',
  '[社会社会]': 'smiley_318',
  '[旺柴]': 'smiley_319',
  '[好的]': 'smiley_320',
  '[打脸]': 'smiley_321',
  '[哇]': 'smiley_322',
  '[囧]': 'smiley_17'
}

const encodeEmoji = (str) => {
  if (!str) {
    return;
  }
  let domEle = <span>{str}</span>
  let pattern = /\[.*?\]/g;
  let unicodeStr = str.replace(pattern,function (match) {
    if(emojiJson[match]){
      domEle = <span className={`small qqface ${emojiJson[match]}`}></span>
    }else {
      domEle = <span>{match}</span>
    }
  })
  return domEle
}

export {
  encodeEmoji,
  emojiJson
};

    css部分

  • .qqface {
  zoom: calc(22 / 64);
  display: inline-block;
  vertical-align: middle;
  width: 64px;
  height: 64px;
  font-size: 0;
  text-indent: -999em;
  background: url('../images/emoji.png') 0 0;

  &.e2_02 {
    background-position: -66px 0
  }

  &.e2_04 {
    background-position: -462px -396px
  }

  &.e2_05 {
    background-position: 0 -66px
  }

  &.e2_06 {
    background-position: -66px -66px
  }

  &.e2_09 {
    background-position: -132px 0
  }

  &.e2_11 {
    background-position: -132px -66px
  }

  &.e2_12 {
    background-position: 0 -132px
  }

  &.e2_14 {
    background-position: -66px -132px
  }

  &.smiley_0 {
    background-position: -132px -132px;
  }

  &.smiley_1 {
    width: 63px;
    // height: 64px;
    background-position: -660px -594px
  }

  &.smiley_10 {
    background-position: -198px -66px
  }

  &.smiley_11 {
    background-position: -198px -132px
  }

  &.smiley_12 {
    background-position: 0 -198px
  }

  &.smiley_13 {
    background-position: -66px -198px
  }

  &.smiley_14 {
    background-position: -132px -198px
  }

  &.smiley_15 {
    background-position: -198px -198px
  }

  &.smiley_17 {
    background-position: -264px 0
  }

  &.smiley_18 {
    background-position: -264px -66px
  }

  &.smiley_19 {
    background-position: -264px -132px
  }

  &.smiley_2 {
    background-position: -264px -198px
  }

  &.smiley_20 {
    background-position: 0 -264px
  }

  &.smiley_21 {
    background-position: -66px -264px
  }

  &.smiley_22 {
    background-position: -132px -264px
  }

  &.smiley_23 {
    background-position: -198px -264px
  }

  &.smiley_25 {
    background-position: -264px -264px
  }

  &.smiley_26 {
    background-position: -330px 0
  }

  &.smiley_27 {
    background-position: -330px -66px
  }

  &.smiley_28 {
    background-position: -330px -132px
  }

  &.smiley_29 {
    background-position: -330px -198px
  }

  &.smiley_3 {
    background-position: -330px -264px
  }

  &.smiley_30 {
    background-position: 0 -330px
  }

  &.smiley_31 {
    background-position: -66px -330px
  }

  &.smiley_313 {
    background-position: -132px -330px
  }

  &.smiley_314 {
    background-position: -198px -330px
  }

  &.smiley_315 {
    background-position: -264px -330px
  }

  &.smiley_316 {
    background-position: -330px -330px
  }

  &.smiley_317 {
    background-position: -396px 0
  }

  &.smiley_318 {
    background-position: -396px -66px
  }

  &.smiley_319 {
    background-position: -396px -132px
  }

  &.smiley_32 {
    background-position: -396px -198px
  }

  &.smiley_320 {
    background-position: -396px -264px
  }

  &.smiley_321 {
    background-position: -396px -330px
  }

  &.smiley_322 {
    background-position: 0 -396px
  }

  &.smiley_33 {
    background-position: -66px -396px
  }

  &.smiley_34 {
    background-position: -132px -396px
  }

  &.smiley_36 {
    background-position: -198px -396px
  }

  &.smiley_37 {
    background-position: -264px -396px
  }

  &.smiley_38 {
    background-position: -330px -396px
  }

  &.smiley_39 {
    background-position: -396px -396px
  }

  &.smiley_4 {
    background-position: -462px 0
  }

  &.smiley_40 {
    background-position: -462px -66px
  }

  &.smiley_41 {
    background-position: -462px -132px
  }

  &.smiley_42 {
    background-position: -462px -198px
  }

  &.smiley_44 {
    background-position: -462px -264px
  }

  &.smiley_45 {
    background-position: -462px -330px
  }

  &.smiley_46 {
    background-position: 0 0
  }

  &.smiley_47 {
    background-position: 0 -462px
  }

  &.smiley_48 {
    background-position: -66px -462px
  }

  &.smiley_49 {
    background-position: -132px -462px
  }

  &.smiley_5 {
    background-position: -198px -462px
  }

  &.smiley_50 {
    background-position: -264px -462px
  }

  &.smiley_51 {
    background-position: -330px -462px
  }

  &.smiley_52 {
    background-position: -396px -462px
  }

  &.smiley_54 {
    background-position: -462px -462px
  }

  &.smiley_55 {
    background-position: -528px 0
  }

  &.smiley_56 {
    background-position: -528px -66px
  }

  &.smiley_57 {
    background-position: -528px -132px
  }

  &.smiley_6 {
    background-position: -528px -198px
  }

  &.smiley_60 {
    background-position: -528px -264px
  }

  &.smiley_61 {
    background-position: -528px -330px
  }

  &.smiley_62 {
    background-position: -528px -396px
  }

  &.smiley_63 {
    background-position: -528px -462px
  }

  &.smiley_64 {
    background-position: 0 -528px
  }

  &.smiley_65 {
    background-position: -66px -528px
  }

  &.smiley_66 {
    background-position: -132px -528px
  }

  &.smiley_67 {
    background-position: -198px -528px
  }

  &.smiley_68 {
    background-position: -264px -528px
  }

  &.smiley_7 {
    background-position: -330px -528px
  }

  &.smiley_70 {
    background-position: -396px -528px
  }

  &.smiley_74 {
    background-position: -462px -528px
  }

  &.smiley_75 {
    background-position: -528px -528px
  }

  &.smiley_76 {
    background-position: -594px 0
  }

  &.smiley_78 {
    background-position: -594px -66px
  }

  &.smiley_79 {
    background-position: -594px -132px
  }

  &.smiley_8 {
    background-position: -594px -198px
  }

  &.smiley_80 {
    background-position: -594px -264px
  }

  &.smiley_81 {
    background-position: -594px -330px
  }

  &.smiley_82 {
    background-position: -594px -396px
  }

  &.smiley_83 {
    background-position: -594px -462px
  }

  &.smiley_84 {
    background-position: -594px -528px
  }

  &.smiley_85 {
    background-position: 0 -594px
  }

  &.smiley_89 {
    background-position: -66px -594px
  }

  &.smiley_9 {
    background-position: -132px -594px
  }

  &.smiley_92 {
    background-position: -198px -594px
  }

  &.smiley_93 {
    background-position: -264px -594px
  }

  &.smiley_94 {
    background-position: -330px -594px
  }

  &.smiley_95 {
    background-position: -396px -594px
  }

  &.u1F381 {
    background-position: -462px -594px
  }

  &.u1F389 {
    background-position: -528px -594px
  }

  &.u1F47B {
    background-position: -594px -594px
  }

  &.u1F4AA {
    background-position: -660px 0
  }

  &.u1F602 {
    background-position: -660px -66px
  }

  &.u1F604 {
    background-position: -660px -132px
  }

  &.u1F612 {
    background-position: -660px -198px
  }

  &.u1F614 {
    background-position: -660px -264px
  }

  &.u1F61D {
    background-position: -660px -330px
  }

  &.u1F631 {
    background-position: -660px -396px
  }

  &.u1F633 {
    background-position: -660px -462px
  }

  &.u1F637 {
    background-position: -198px 0
  }

  &.u1F64F {
    background-position: -660px -528px
  }

  &.smiley_400 {
    background-position: -264px 0
  }
}

    参考：emoji.js - 简书


http://www.kler.cn/a/2473.html

相关文章：

  • 【C语言】库函数常见的陷阱与缺陷(一)：字符串处理函数[3]--strlen
  • 多模态抽取图片信息的 Prompt
  • OpenCV(python)从入门到精通——运算操作
  • 2025年西安市科技创新奖励补贴政策一览
  • 知识分享第三十天-力扣343.(整数拆分)
  • C# OpenCvSharp DNN 实现百度网盘AI大赛-表格检测第2名方案第一部分-表格边界框检测
  • 使用shell 脚本,批量解压一批zip文件，解压后的文件放在以原zip文件名前10个字符的文件夹中的例子
  • Java stream性能比较
  • java基础面试题（四）
  • TU-95 strategic bomber气动布局分析
  • 蓝桥杯训练day3
  • 深入理解JVM虚拟机（六）
  • 梳理LVM逻辑卷管理，
  • JDBC
  • C++虚函数与多态
  • ChatGPT推出第四代GPT-4！不仅能聊天，还可以图片创作！
  • 【图神经网络 文献精读】针对SARS-CoV-2大流行的改进和优化的药物再利用方案
  • 生成时序异常样本-学习记录-未完待续
  • 毕业设计 基于51单片机自动智能浇花系统设计
  • 【十二天学java】day05--数组和循环高级
  • 01 | Msyql系统架构
  • 学习系统编程No.7【进程替换】
  • 从地图到手机通讯到ChatGPT，你想要的免费 API 都给你整理好了
  • uni-app:登录与支付-- 三秒后自动跳转
  • SLF4J、Log4J、Log4J2、Logback之间是什么关系
  • 【linux】：进程控制