最近公司需要开发一套客服聊天系统，其功能是用户在公众号转人工客服后与工作人员进行聊天沟通，需要前端这边将公众号发送的普通表情展示在后台的聊天信息中。
步骤一：准备好微信表情的素材图片
我是从公众号内部copy了一套 不嫌弃的话可以拿来用 链接：pan.quark.cn/s/62685a667… 提取码：dtvT
步骤二：做好一个表情符号的对照表
如果你没弄的话 可以拿来用 由于我的表情素材图标存在本地是中文，所以你想使用英文命名的话得自己改改
[{"name":"[微笑]","code":"/::)",},{"name":"[撇嘴]","code":"/::~",},{"name":"[色]","code":"/::B",},{"name":"[发呆]","code":"/::|",},{"name":"[得意]","code":"/:8-)",},{"name":"[流泪]","code":"/::<",},{"name":"[害羞]","code":"/::$",},{"name":"[闭嘴]","code":"/::X",},{"name":"[睡]","code":"/::Z",},{"name":"[大哭]","code":"/::'(",},{"name":"[尴尬]","code":"/::-|",},{"name":"[发怒]","code":"/::@",},{"name":"[调皮]","code":"/::P",},{"name":"[呲牙]","code":"/::D",},{"name":"[惊讶]","code":"/::O",},{"name":"[难过]","code":"/::(",},{"name":"[囧]","code":"/:--b",},{"name":"[抓狂]","code":"/::Q",},{"name":"[吐]","code":"/::T",},{"name":"[偷笑]","code":"/:,@P",},{"name":"[愉快]","code":"/:,@-D",},{"name":"[白眼]","code":"/::d",},{"name":"[傲慢]","code":"/:,@o",},{"name":"[困]","code":"/:|-)",},{"name":"[惊恐]","code":"/::!",},{"name":"[憨笑]","code":"/::>",},{"name":"[悠闲]","code":"/::,@",},{"name":"[咒骂]","code":"/::-S",},{"name":"[疑问]","code":"/:?",},{"name":"[嘘]","code":"/:,@x",},{"name":"[晕]","code":"/:,@@",},{"name":"[衰]","code":"/:,@!",},{"name":"[骷髅]","code":"/:!!!",},{"name":"[敲打]","code":"/:xx",},{"name":"[再见]","code":"/:bye",},{"name":"[擦汗]","code":"/:wipe",},{"name":"[抠鼻]","code":"/:dig",},{"name":"[鼓掌]","code":"/:handclap",},{"name":"[坏笑]","code":"/:B-)",},{"name":"[右哼哼]","code":"/:@>",},{"name":"[鄙视]","code":"/:>-|",},{"name":"[委屈]","code":"/:P-(",},{"name":"[快哭了]","code":"/::'|",},{"name":"[阴险]","code":"/:X-)",},{"name":"[亲亲]","code":"/::*",},{"name":"[可怜]","code":"/:8*",},{"name":"[笑脸]","code":"[Happy]",},{"name":"[生病]","code":"[Sick]",},{"name":"[脸红]","code":"[Flushed]",},{"name":"[破涕为笑]","code":"[Lol]",},{"name":"[恐惧]","code":"[Terror]",},{"name":"[失望]","code":"[LetDown]",},{"name":"[无语]","code":"[Duh]",},{"name":"[嘿哈]","code":"[Hey]",},{"name":"[捂脸]","code":"[Facepalm]",},{"name":"[奸笑]","code":"[Smirk]",},{"name":"[机智]","code":"[Smart]",},{"name":"[皱眉]","code":"[Concerned]",},{"name":"[耶]","code":"[Yeah!]",},{"name":"[吃瓜]","code":"[Onlooker]",},{"name":"[加油]","code":"[GoForIt]",},{"name":"[汗]","code":"[Sweats]",},{"name":"[天啊]","code":"[OMG]",},{"name":"[Emm]","code":"[Emm]",},{"name":"[社会社会]","code":"[Respect]",},{"name":"[旺柴]","code":"[Doge]",},{"name":"[好的]","code":"[NoProb]",},{"name":"[打脸]","code":"[MyBad]",},{"name":"[哇]","code":"[Wow]",},{"name":"[翻白眼]","code":"[Boring]",},{"name":"[666]","code":"[Awesome]",},{"name":"[让我看看]","code":"[LetMeSee]",},{"name":"[叹气]","code":"[Sigh]",},{"name":"[苦涩]","code":"[Hurt]",},{"name":"[裂开]","code":"[Broken]",},{"name":"[嘴唇]","code":"/:showlove",},{"name":"[爱心]","code":"/:heart",},{"name":"[心碎]","code":"/:break",},{"name":"[拥抱]","code":"/:hug",},{"name":"[强]","code":"/:strong",},{"name":"[弱]","code":"/:weak",},{"name":"[握手]","code":"/:share",},{"name":"[胜利]","code":"/:v",},{"name":"[抱拳]","code":"/:@)",},{"name":"[勾引]","code":"/:jj",},{"name":"[拳头]","code":"/:@@",},{"name":"[OK]","code":"/:ok",},{"name":"[合十]","code":"[Worship]",},{"name":"[啤酒]","code":"/:beer",},{"name":"[咖啡]","code":"/:coffee",},{"name":"[蛋糕]","code":"/:cake",},{"name":"[玫瑰]","code":"/:rose",},{"name":"[凋谢]","code":"/:fade",},{"name":"[菜刀]","code":"/:pd",},{"name":"[炸弹]","code":"/:bome",},{"name":"[便便]","code":"/:shit",},{"name":"[月亮]","code":"/:moon",},{"name":"[太阳]","code":"/:sun",},{"name":"[庆祝]","code":"[Party]",},{"name":"[礼物]","code":"/:gift",},{"name":"[红包]","code":"[Packet]",},{"name":"[發]","code":"[Rich]",},{"name":"[福]","code":"[Blessing]",},{"name":"[烟花]","code":"[Fireworks]",},{"name":"[爆竹]","code":"[爆竹]",},{"name":"[猪头]","code":"/:pig",},{"name":"[跳跳]","code":"/:jump",},{"name":"[发抖]","code":"/:shake",},{"name":"[转圈]","code":"/:circle"}]
步骤三：取出所有表情的code值并对code值的特殊字符进行转义处理
<script>
//导入准备好的对照表
import emojiList from "@/utils/emoji";
export default {
data() {
return {
emojiList,
}
},
computed:{
emojiCodes(){
let codes = this.emojiList.map(obj =>this.replaceSpecial(obj.code)).join("|");
return codes;
},
},
created() {
},
methods: {
//对特殊字符进行转义处理
replaceSpecial(str) {
let specialRegex = /[\/()~|<$?*\[\]]/g;
let newStr = str.replace(specialRegex, function (match) {
return '\\' + `${match}`;
});
return newStr
},
}
}
</script>
步骤四：将表情符号转为img展示
replaceEmoji(str) {
let regex = new RegExp(this.emojiCodes, "g");
let replacedText = str.replace(regex, (match) => {
// 根据匹配的表达式找到对应的对象，返回对应的表情字符
const obj = this.emojiList.find(obj => obj.code === match);
let msg = match
if(obj){
//替换自己的图片存放的位置
let src = require(`@/assets/images/emoji/${obj.name}.png`)
msg = `<img class="emojiMsg" alt="${obj.name}" src="${src}" />`
}
return msg;
});
console.log(replacedText);
return replacedText
},
TIP
流泪、右哼哼这两个表情因为后端没有返回表情符号 所以可能存在没解析出来的问题
希望这篇文章对你有所帮助
