vue实现微信聊天emoji表情

前言：此项目是接入微信公众号与用户的聊天，类似于仿微信的聊天项目，emoji表情用的跟微信的同一套，可放心食用

emoji表情原理：收消息：将微信的表情符号，例如：微笑 /::)，转成emoji的图片地址用img标签显示，发消息：将emoji的图片转换成微信的表情符号。

emoji符号和图片互相转换的方法

js 复制代码

// emotion.js  1、emoji对应的图片 2、emoji符号和图片的互相转换

// 将匹配的符号替换表情图片
let textToImg = (emoText) => {
  const emojiKey = Object.keys(emojiMode)
  emojiKey.forEach(v => {
    if (emoText.includes(v)) {
      // 使用正则表达式进行全局替换
      const str = v.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // 特殊符号需要转义
      const regex = new RegExp(str, 'g'); // g 表示全局
      const url = `<img src="${emojiMode[v]}" style="width:28px;height:28px;vertical-align:bottom;"/>`
      emoText = emoText.replace(regex, url);
    }
  })
  return emoText
}
// 将匹配的url替换表情符号
let urlTotext = (emoText) => {
  const emojiValue = Object.values(emojiMode)
  emojiValue.forEach(v => {
    if (emoText.includes(v)) {
      const regex = new RegExp(v, 'g'); // 'g' 表示全局匹配
      emoText = emoText.replace(regex, getKeyByValue(emojiMode, v))
    }
  })
  return emoText
}
// 根据value 输出key
let getKeyByValue = (object, value) => {
  const keys = Object.keys(object);
  const key = keys.find(key => object[key] === value);
  return key;
}

// 表情符号对应的图片
const emojiMode = {
  "/::)": require('@/assets/emoji/face/微笑.png'),
  "/::~": require('@/assets/emoji/face/撇嘴.png'),
  "/::B": require('@/assets/emoji/face/色.png'),
  "/::|": require('@/assets/emoji/face/发呆.png'),
  // "/:8-)": require('@/assets/emoji/face/发呆.png'), 戴墨镜的得意 暂无表情资源
  "/::<": require('@/assets/emoji/face/流泪.png'),
  "/::$": require('@/assets/emoji/face/害羞.png'),
  "/::X": require('@/assets/emoji/face/闭嘴.png'),
  "/::Z": require('@/assets/emoji/face/睡.png'),
  "/::'(": require('@/assets/emoji/face/大哭.png'),
  "/::-|": require('@/assets/emoji/face/尴尬.png'),
  "/::@": require('@/assets/emoji/face/发怒.png'),
  "/::P": require('@/assets/emoji/face/调皮.png'),
  "/::D": require('@/assets/emoji/face/呲牙.png'),
  "/::O": require('@/assets/emoji/face/惊讶.png'),
  "/::(": require('@/assets/emoji/face/难过.png'),
  // "/::+": require('@/assets/emoji/face/囧.png'),戴墨镜 暂无表情资源
  "/:--b": require('@/assets/emoji/face/囧.png'),
  "/::Q": require('@/assets/emoji/face/抓狂.png'),
  "/::T": require('@/assets/emoji/face/吐.png'),
  "/:,@P": require('@/assets/emoji/face/偷笑.png'),
  "/:,@-D": require('@/assets/emoji/face/愉快.png'),
  "/::d": require('@/assets/emoji/face/白眼.png'),
  "/:,@o": require('@/assets/emoji/face/傲慢.png'),
  // "/::g": require('@/assets/emoji/face/困.png'),吃东西 暂无表情资源
  "/:|-)": require('@/assets/emoji/face/困.png'),
  "/::!": require('@/assets/emoji/face/惊恐.png'),
  "/::>": require('@/assets/emoji/face/憨笑.png'),
  "/::L": require('@/assets/emoji/face/汗.png'),
  "/::,@": require('@/assets/emoji/face/悠闲.png'),
  "/::-S": require('@/assets/emoji/face/咒骂.png'),
  "/:,@f": require('@/assets/emoji/face/加油.png'),
  "/:?": require('@/assets/emoji/face/疑问.png'),
  "/:,@x": require('@/assets/emoji/face/嘘.png'),
  "/:,@@": require('@/assets/emoji/face/晕.png'),
  "/:,@!": require('@/assets/emoji/face/衰.png'),
  // "/::8": require('@/assets/emoji/face/抓狂.png'), 重复的抓狂 
  "/:!!!": require('@/assets/emoji/face/骷髅.png'),
  "/:xx": require('@/assets/emoji/face/敲打.png'),
  "/:bye": require('@/assets/emoji/face/再见.png'),
  "/:wipe": require('@/assets/emoji/face/擦汗.png'),
  "/:dig": require('@/assets/emoji/face/抠鼻.png'),
  "/:handclap": require('@/assets/emoji/face/鼓掌.png'),
  "/:B-)": require('@/assets/emoji/face/坏笑.png'),
  // "/:&-(": require('@/assets/emoji/face/坏笑.png'), 出糗 暂无表情资源
  "/:@>": require('@/assets/emoji/face/右哼哼.png'),
  // "/:<@": require('@/assets/emoji/face/右哼哼.png'),左哼哼 暂无表情资源

  // "/::-O": require('@/assets/emoji/face/鄙视.png'), 打哈欠 暂无表情资源
  "/:>-|": require('@/assets/emoji/face/鄙视.png'),
  "/:P-(": require('@/assets/emoji/face/委屈.png'),
  "/::'|": require('@/assets/emoji/face/快哭了.png'),
  "/:X-)": require('@/assets/emoji/face/阴险.png'),
  "/::*": require('@/assets/emoji/face/亲亲.png'),
  // "/:@x": require('@/assets/emoji/face/可怜.png'),
  "/:8*": require('@/assets/emoji/face/可怜.png'),
  "/:pd": require('@/assets/emoji/other/菜刀.png'),
  // "/:<W>": require('@/assets/emoji/face/发呆.png'),
  "/:beer": require('@/assets/emoji/other/啤酒.png'),
  // "/:basketb": require('@/assets/emoji/face/发呆.png'), 篮球
  // "/:oo": require('@/assets/emoji/face/发呆.png'),兵乓球
  "/:coffee": require('@/assets/emoji/other/咖啡.png'),
  // "/:eat": require('@/assets/emoji/face/发呆.png'),吃饭
  "/:pig": require('@/assets/emoji/animal/猪头.png'),
  "/:rose": require('@/assets/emoji/other/鲜花.png'),
  "/:fade": require('@/assets/emoji/other/凋谢.png'),
  "/:showlove": require('@/assets/emoji/other/嘴唇.png'),
  "/:heart": require('@/assets/emoji/other/爱心.png'),
  "/:break": require('@/assets/emoji/other/心碎.png'),
  "/:cake": require('@/assets/emoji/other/蛋糕.png'),
  // "/:li": require('@/assets/emoji/face/发呆.png'),闪电
  "/:bome": require('@/assets/emoji/other/炸弹.png'),
  // "/:kn": require('@/assets/emoji/face/发呆.png'),血剑
  // "/:footb": require('@/assets/emoji/face/发呆.png'), 足球
  // "/:ladybug": require('@/assets/emoji/face/发呆.png'),七星瓢虫
  "/:shit": require('@/assets/emoji/other/便便.png'),
  "/:moon": require('@/assets/emoji/other/晚安.png'),
  "/:sun": require('@/assets/emoji/other/太阳.png'),
  "/:gift": require('@/assets/emoji/blessing/礼物.png'),
  "/:hug": require('@/assets/emoji/gesture/拥抱.png'),
  "/:strong": require('@/assets/emoji/gesture/强.png'),
  "/:weak": require('@/assets/emoji/gesture/弱.png'),
  "/:share": require('@/assets/emoji/gesture/握手.png'),
  "/:v": require('@/assets/emoji/gesture/耶.png'),
  "/:@)": require('@/assets/emoji/gesture/抱拳.png'),
  "/:jj": require('@/assets/emoji/gesture/勾引.png'),
  "/:@@": require('@/assets/emoji/face/得意.png'),
  // "/:bad": require('@/assets/emoji/face/发呆.png'),竖小指
  // "/:lvu": require('@/assets/emoji/face/发呆.png'),520手势
  // "/:no": require('@/assets/emoji/face/发呆.png'),
  "/:ok": require('@/assets/emoji/gesture/OK.png'),
  // "/:love": require('@/assets/emoji/face/发呆.png'),
  // "/:<L>": require('@/assets/emoji/face/发呆.png'),飞吻
  "/:jump": require('@/assets/emoji/animal/跳跳.png'),
  "/:shake": require('@/assets/emoji/animal/发抖.png'),
  // "/:<O>": require('@/assets/emoji/face/发呆.png'),惊叫
  "/:circle": require('@/assets/emoji/animal/转圈.png'),
  // "/:kotow": require('@/assets/emoji/face/发呆.png'),
  // "/:turn": require('@/assets/emoji/face/发呆.png'),
  // "/:skip": require('@/assets/emoji/face/发呆.png'),
  // "/:oY": require('@/assets/emoji/face/发呆.png')
}
export default {
  emojiMode,
  textToImg,
  urlTotext
}

项目中使用

1、在自己项目中渲染emoji，选择表情到聊天框

js 复制代码

// 渲染png形式的emoji
<el-scrollbar style="height: 250px">
    <div class="emotion-item-list">
      <div class="emotion-item" v-for="(emoText, i) in $emo.emojiMode" :key="i" @click="onClickEmo(emoText)">
        <img :src="emoText" alt="" />
      </div>
    </div>
  </el-scrollbar>
  
onClickEmo(emoText) {
  // 保持输入框焦点
  this.$refs.editBox.focus();
  let range = window.getSelection().getRangeAt(0);
  // 插入光标所在位置
  range.setStart(this.focusNode, this.focusOffset);
  let element = document.createElement('IMG');
  // element.className = 'emo';
  // 添加内联样式 添加类名样式不生效
  element.style.width = '25px';
  element.style.height = '25px';
  element.style.verticalAlign = 'bottom';

  element.dataset.code = emoText;
  element.contentEditable = 'true';
  element.setAttribute('src', emoText);
  // 选中元素节点
  range.insertNode(element);
  // 光标移动到末尾
  range.collapse();
}

2、回显微信的emoji表情

js 复制代码

// textToImg 将匹配的符号替换表情图片的方法
// v-html 解析 HTML 标签
<div class="chat-content-text" v-html="textToImg(chat.lastContent)"></div>

3、发消息发送微信的emoji表情

js 复制代码

 // urlTotext 将匹配的url替换表情符号的方法
urlTotext(sendText.trim())