前言:此项目是接入微信公众号与用户的聊天,类似于仿微信的聊天项目,emoji表情用的跟微信的同一套,可放心食用
emoji表情原理: 收消息:将微信的表情符号,例如:微笑 /::),转成emoji的图片地址用img标签显示, 发消息:将emoji的图片转换成微信的表情符号。
emoji表情资源链接:yl0211/微信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())