js实现微信表情发送

前景：之前有个项目是做的多个公众号管理平台，由于客户那边有多个公众号，用微信开放平台去管理太繁琐，数据也不能进行统一分析，在开发过程中，需要将微信开放平台功能--消息回复移接本系统，消息回复时涉及到表情+文字+超链接发送，实现需要两步整体操作，表情发送+表情回显

图片汉化四表情发送：如下图为微信微信表情图

showFace方法默认执行，.faceNav用于插入表情展示的div，表情展示采用background-position来实现展示，每个表情大小为29*29px，这样第一步渲染表情就实现了

function showFace(){let qqfaceArr = [['[微笑]','0'], ['[撇嘴]','1'],['[色]','2'],['[发呆]','3'],['[得意]','4'],['[流泪]','5'],['[害羞]','6' ],['[闭嘴]','7'],['[睡]','8'],['[大哭]','9'],['[尴尬]','10'],['[发怒]','11'],['[调皮]','12'],['[呲牙]','13'], ['[惊讶]','14'], ['[难过]','15'],
['[酷]','16'], ['[囧]','17'], ['[抓狂]','18'], ['[吐]','19'], ['[偷笑]','20'], ['[愉快]','21'], ['[白眼]','22'], ['[傲慢]','23'], ['[饥饿]','24'], ['[困]','25'], ['[惊恐]','26'], ['[流汗]','27'], ['[憨笑]','28'], ['[悠闲]','29'], ['[奋斗]','30'],
['[咒骂]','31'],['[疑问]','32'], ['[嘘]','33'], ['[晕]','34'], ['[疯了]','35'], ['[衰]','36'], ['[骷髅]','37'], ['[敲打]','38'], ['[再见]','39'], ['[擦汗]','40'], ['[抠鼻]','41'], ['[鼓掌]','42'], ['[糗大了]','43'], ['[坏笑]','44'], ['[左哼哼]','45'],
['[右哼哼]','46'], ['[哈欠]','47'], ['[鄙视]','48'], ['[委屈]','49'], ['[快哭了]','50'], ['[阴险]','51'], ['[亲亲]','52'], ['[吓]','53'], ['[可怜]','54'], ['[菜刀]','55'], ['[西瓜]','56'], ['[啤酒]','57'], ['[篮球]','58'], ['[乒乓]','59'], ['[咖啡]','60'],
['[饭]','61'], ['[猪头]','62'], ['[玫瑰]','63'], ['[凋谢]','64'], ['[嘴唇]','65'], ['[爱心]','66'], ['[心碎]','67'], ['[蛋糕]','68'], ['[闪电]','69'], ['[炸弹]','70'], ['[刀]','71'], ['[足球]','72'], ['[瓢虫]','73'], ['[便便]','74'], ['[月亮]','75'],
['[太阳]','76'], ['[礼物]','77'], ['[拥抱]','78'], ['[强]','79'], ['[弱]','80'], ['[握手]','81'], ['[胜利]','82'], ['[抱拳]','83'], ['[勾引]','84'], ['[拳头]','85'], ['[差劲]','86'], ['[爱你]','87'], ['[NO]','88'], ['[OK]','89'], ['[爱情]','90'],
['[飞吻]','91'], ['[跳跳]','92'], ['[发抖]','93'], ['[怄火]','94'], ['[转圈]','95'], ['[磕头]','96'], ['[回头]','97'], ['[跳绳]','98'], ['[投降]','99'], ['[激动]','100'], ['[乱舞]','101'], ['[献吻]','102'], ['[左太极]','103'], ['[右太极]','104']];var str='';qqfaceArr.map((item,index)=>{str+=`<div class='qqface qqface${item[1]}' data-id='${item[1]}'></div>`});$('.faceNav').html(str)}

有人会问data-id是干嘛用的，这里给的属性data-id在后面会介绍原因，接下来是要给它赋予点击事件，在项目的开发过程中，我先看了微信官方平台的渲染方法，微信渲染时表情的地址基本都是一样的，那我们之前的data-id属性起作用了，代码如下

https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/smiley/smiley_${$(this).attr('data-id')}4273fb.png

有个点忘记说了，像我们平时用的文本框（input、textarea）是无法插入图片的，因为不支持插入html标签，解析不了，所以我们需要用到contenteditable属性，不懂的伙伴可以点击传送门看下，这边需要给div设置contenteditable="true"来实现插入图片标签。div插入图片后内容如下

到了这里后是实现将图片传给后端了，同时微信发送给用户时需要能解析出来，不知道小伙伴试过没有用微信发送 [左哼哼] 给朋友是可以解析成表情的，同时我们这边也是一样，在发送给后端的时候将img标签的图标对应的转成对应的字符串就行，利用img自定义属性data-id跟原有aaFaceArr做比较如果有就取对应的字符串

完整代码如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link href="style.css"  rel="stylesheet"/></head><body><div class="faceNav"></div><div id="box" contenteditable="true" style="width: 300px;height: 200px;-webkit-user-select: auto"></div><input id="btn" type="button" value="打印发送内容"/><p id="sendMsg">发给后台的内容：</p></body>
</html>
<script src="jquery-3.1.0.min.js"></script>
<script>var qqfaceArr;showFace();$('.qqface').click(function(){$('#box').append(`<img src='https://res.wx.qq.com/mpres/zh_CN/htmledition/pages/modules/common/emoji/images/smiley/smiley_${$(this).attr('data-id')}4273fb.png' data-id="${$(this).attr('data-id')}"/>`)})function showFace(){qqfaceArr = [['[微笑]','0'], ['[撇嘴]','1'],['[色]','2'],['[发呆]','3'],['[得意]','4'],['[流泪]','5'],['[害羞]','6' ],['[闭嘴]','7'],['[睡]','8'],['[大哭]','9'],['[尴尬]','10'],['[发怒]','11'],['[调皮]','12'],['[呲牙]','13'], ['[惊讶]','14'], ['[难过]','15'],
['[酷]','16'], ['[囧]','17'], ['[抓狂]','18'], ['[吐]','19'], ['[偷笑]','20'], ['[愉快]','21'], ['[白眼]','22'], ['[傲慢]','23'], ['[饥饿]','24'], ['[困]','25'], ['[惊恐]','26'], ['[流汗]','27'], ['[憨笑]','28'], ['[悠闲]','29'], ['[奋斗]','30'],
['[咒骂]','31'],['[疑问]','32'], ['[嘘]','33'], ['[晕]','34'], ['[疯了]','35'], ['[衰]','36'], ['[骷髅]','37'], ['[敲打]','38'], ['[再见]','39'], ['[擦汗]','40'], ['[抠鼻]','41'], ['[鼓掌]','42'], ['[糗大了]','43'], ['[坏笑]','44'], ['[左哼哼]','45'],
['[右哼哼]','46'], ['[哈欠]','47'], ['[鄙视]','48'], ['[委屈]','49'], ['[快哭了]','50'], ['[阴险]','51'], ['[亲亲]','52'], ['[吓]','53'], ['[可怜]','54'], ['[菜刀]','55'], ['[西瓜]','56'], ['[啤酒]','57'], ['[篮球]','58'], ['[乒乓]','59'], ['[咖啡]','60'],
['[饭]','61'], ['[猪头]','62'], ['[玫瑰]','63'], ['[凋谢]','64'], ['[嘴唇]','65'], ['[爱心]','66'], ['[心碎]','67'], ['[蛋糕]','68'], ['[闪电]','69'], ['[炸弹]','70'], ['[刀]','71'], ['[足球]','72'], ['[瓢虫]','73'], ['[便便]','74'], ['[月亮]','75'],
['[太阳]','76'], ['[礼物]','77'], ['[拥抱]','78'], ['[强]','79'], ['[弱]','80'], ['[握手]','81'], ['[胜利]','82'], ['[抱拳]','83'], ['[勾引]','84'], ['[拳头]','85'], ['[差劲]','86'], ['[爱你]','87'], ['[NO]','88'], ['[OK]','89'], ['[爱情]','90'],
['[飞吻]','91'], ['[跳跳]','92'], ['[发抖]','93'], ['[怄火]','94'], ['[转圈]','95'], ['[磕头]','96'], ['[回头]','97'], ['[跳绳]','98'], ['[投降]','99'], ['[激动]','100'], ['[乱舞]','101'], ['[献吻]','102'], ['[左太极]','103'], ['[右太极]','104']];var str='';qqfaceArr.map((item,index)=>{str+=`<div class='qqface qqface${item[1]}' data-id='${item[1]}'></div>`});$('.faceNav').html(str)}$('#btn').click(function(){var innerVal=$('#box').html();for(var i=0;i<$('#box img').length;i++){for(var j=0;j<qqfaceArr.length;j++){if($('#box img').eq(i).attr('data-id') == qqfaceArr[j][1]){innerVal=innerVal.replace($('#box img')[i].outerHTML.toString(),qqfaceArr[j][0])}}}console.log(33333,innerVal)$('#sendMsg').html(innerVal)})
</script>

style.css文件

.faceNav{width: 400px;height: 230px;border:1px solid #333;background-color: #fff;/*display: none;*/
}
.faceNav>.qqface{float: left;cursor: pointer;}
#box img{width: 20px;height: 20px;vertical-align: middle; /* display: inline-block; */background-size: 20px auto;
}
.qqface {width: 28px;height: 28px;font-size: 0;text-indent: -999em;background: url('bq.png') 0 0 no-repeat;
}.qqface.small {vertical-align: middle;height: 24px !important;width: 24px;transform: scale(0.82);margin-top: -5px;margin-left: -3px;
}.qqface.qqface0 {background-position: 0 0;
}.qqface.qqface1 {background-position: -29px 0;
}.qqface.qqface2 {background-position: -58px 0;
}.qqface.qqface3 {background-position: -87px 0;
}.qqface.qqface4 {background-position: -116px 0;
}.qqface.qqface5 {background-position: -145px 0;
}.qqface.qqface6 {background-position: -174px 0;
}.qqface.qqface7 {background-position: -203px 0;
}.qqface.qqface8 {background-position: -232px 0;
}.qqface.qqface9 {background-position: -261px 0;
}.qqface.qqface10 {background-position: -290px 0;
}.qqface.qqface11 {background-position: -319px 0;
}.qqface.qqface12 {background-position: -348px 0;
}.qqface.qqface13 {background-position: -377px 0;
}.qqface.qqface14 {background-position: -406px 0;
}.qqface.qqface15 {background-position: 0 -29px;
}.qqface.qqface16 {background-position: -29px -29px;
}.qqface.qqface17 {background-position: -58px -29px;
}.qqface.qqface18 {background-position: -87px -29px;
}.qqface.qqface19 {background-position: -116px -29px;
}.qqface.qqface20 {background-position: -145px -29px;
}.qqface.qqface21 {background-position: -174px -29px;
}.qqface.qqface22 {background-position: -203px -29px;
}.qqface.qqface23 {background-position: -232px -29px;
}.qqface.qqface24 {background-position: -261px -29px;
}.qqface.qqface25 {background-position: -290px -29px;
}.qqface.qqface26 {background-position: -319px -29px;
}.qqface.qqface27 {background-position: -348px -29px;
}.qqface.qqface28 {background-position: -377px -29px;
}.qqface.qqface29 {background-position: -406px -29px;
}.qqface.qqface30 {background-position: 0 -58px;
}.qqface.qqface31 {background-position: -29px -58px;
}.qqface.qqface32 {background-position: -58px -58px;
}.qqface.qqface33 {background-position: -87px -58px;
}.qqface.qqface34 {background-position: -116px -58px;
}.qqface.qqface35 {background-position: -145px -58px;
}.qqface.qqface36 {background-position: -174px -58px;
}.qqface.qqface37 {background-position: -203px -58px;
}.qqface.qqface38 {background-position: -232px -58px;
}.qqface.qqface39 {background-position: -261px -58px;
}.qqface.qqface40 {background-position: -290px -58px;
}.qqface.qqface41 {background-position: -319px -58px;
}.qqface.qqface42 {background-position: -348px -58px;
}.qqface.qqface43 {background-position: -377px -58px;
}.qqface.qqface44 {background-position: -406px -58px;
}.qqface.qqface45 {background-position: 0 -87px;
}.qqface.qqface46 {background-position: -29px -87px;
}.qqface.qqface47 {background-position: -58px -87px;
}.qqface.qqface48 {background-position: -87px -87px;
}.qqface.qqface49 {background-position: -116px -87px;
}.qqface.qqface50 {background-position: -145px -87px;
}.qqface.qqface51 {background-position: -174px -87px;
}.qqface.qqface52 {background-position: -203px -87px;
}.qqface.qqface53 {background-position: -232px -87px;
}.qqface.qqface54 {background-position: -261px -87px;
}.qqface.qqface55 {background-position: -290px -87px;
}.qqface.qqface56 {background-position: -319px -87px;
}.qqface.qqface57 {background-position: -348px -87px;
}.qqface.qqface58 {background-position: -377px -87px;
}.qqface.qqface59 {background-position: -406px -87px;
}.qqface.qqface60 {background-position: 0 -116px;
}.qqface.qqface61 {background-position: -29px -116px;
}.qqface.qqface62 {background-position: -58px -116px;
}.qqface.qqface63 {background-position: -87px -116px;
}.qqface.qqface64 {background-position: -116px -116px;
}.qqface.qqface65 {background-position: -145px -116px;
}.qqface.qqface66 {background-position: -174px -116px;
}.qqface.qqface67 {background-position: -203px -116px;
}.qqface.qqface68 {background-position: -232px -116px;
}.qqface.qqface69 {background-position: -261px -116px;
}.qqface.qqface70 {background-position: -290px -116px;
}.qqface.qqface71 {background-position: -319px -116px;
}.qqface.qqface72 {background-position: -348px -116px;
}.qqface.qqface73 {background-position: -377px -116px;
}.qqface.qqface74 {background-position: -406px -116px;
}.qqface.qqface75 {background-position: 0 -145px;
}.qqface.qqface76 {background-position: -29px -145px;
}.qqface.qqface77 {background-position: -58px -145px;
}.qqface.qqface78 {background-position: -87px -145px;
}.qqface.qqface79 {background-position: -116px -145px;
}.qqface.qqface80 {background-position: -145px -145px;
}.qqface.qqface81 {background-position: -174px -145px;
}.qqface.qqface82 {background-position: -203px -145px;
}.qqface.qqface83 {background-position: -232px -145px;
}.qqface.qqface84 {background-position: -261px -145px;
}.qqface.qqface85 {background-position: -290px -145px;
}.qqface.qqface86 {background-position: -319px -145px;
}.qqface.qqface87 {background-position: -348px -145px;
}.qqface.qqface88 {background-position: -377px -145px;
}.qqface.qqface89 {background-position: -406px -145px;
}.qqface.qqface90 {background-position: 0 -174px;
}.qqface.qqface91 {background-position: -29px -174px;
}.qqface.qqface92 {background-position: -58px -174px;
}.qqface.qqface93 {background-position: -87px -174px;
}.qqface.qqface94 {background-position: -116px -174px;
}.qqface.qqface95 {background-position: -145px -174px;
}.qqface.qqface96 {background-position: -174px -174px;
}.qqface.qqface97 {background-position: -203px -174px;
}.qqface.qqface98 {background-position: -232px -174px;
}.qqface.qqface99 {background-position: -261px -174px;
}.qqface.qqface100 {background-position: -290px -174px;
}.qqface.qqface101 {background-position: -319px -174px;
}.qqface.qqface102 {background-position: -348px -174px;
}.qqface.qqface103 {background-position: -377px -174px;
}.qqface.qqface104 {background-position: -406px -174px;
}

这样就将发送给后端的表情处理好了，后端接收到的也是字符串，维信发送给用户时也能相应的进行处理，下篇文章再介绍如何将后端返回的数据回显时做处理

js实现微信表情发送相关推荐

js实现微信表情回显
上文介绍了微信表情的发送,这篇文章介绍下微信表情回显时的方法,相对于表情发送的功能,回显这块显得简单多了我们还是用原有的数组来处理,后端返回的格式例如:哈哈[左哼哼] 这样类型,我们只需将[左哼哼 ...
js版微信测试号推送消息、生日、纪念日、网易云热评、舔狗日记【JavaScript版】保姆级教程青龙面板做微信测试号推送生日、纪念日
文章目录微信测试号推送消息一.申请微信测试号二.下载nodeJs 1.下载安装包 2.检查是否安装成功三.设置测试号发送信息的模板四.编写发送消息代码(必须装好nodeJs) 1.编写代码 ...
mysql存储animoji_iPhoneXS在微信里发送Animoji表情操作教程
iPhoneXS支持3D结构光面部识别,所以它是支持Animoji表情的,里面的卡通人物和你的表情同步,非常有趣.遗憾的是Animoji表情目前只支持在短信和iMessage里发送,无法直接在微信里使 ...
急急急求微信公众号开发接口-php如何实现获取用户发送的微信表情，并返回一个链接，用户点击进去链接就是刚才发的表情，用户可以保存表情？
求微信公众号开发接口-php如何实现获取用户发送的微信表情,并返回一个链接,用户点击进去链接就是刚才发的表情,用户就可以保存表情到手机? 需求描述 1.用户在公众号对话框发送微信表情(GIF) 2.公 ...
手机网站实现一键拨号及html5短信发送功能JS代码(微信适用)
手机网站实现一键拨号及html5短信发送功能JS代码(微信适用) 来源:本站原创作者:温州中网网络营销机构发布时间:2014-1-10 10:45:44 点击数:3069 微信微 ...
js解析emoji表情
Emoji 公司的产品之前只有网页端,并没有提供emoji表情,之后将某个模块整合到app中,里面有个评论功能,在手机端可以输入emoji,显示的时候是空白,说明数据库并没有存储成功,查阅资料后得知e ...
教你如何用node.js开发微信公众号（一）
内容简介本文章简单介绍了如何用node.js开发微信公众号.主要内容包括微信公众平台的配置,signature的验证,以及用node.js去处理用户主动发起的行为. 准备工作开发前需要安装好nod ...
SAP系统和微信集成的系列教程之九：如何将微信用户发送给微信公众号的内容自动转存到SAP C4C系统
本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 最近有不少朋友在微信上向我咨询SAP系统和微信公众号集成的问题,因此我把当时写的英文版翻译成中文,重新发布在我 ...
保存到本地_手把手教你将微信表情包保存到本地
筒子们晚上好! 微信不像QQ那样可以把微信包表情直接保存到本地,所以今天就来介绍两个把微信表情包保存到本地的方法!(两种方法均需要用到电脑) 方法一:使用微信公众号(不建议) 工具:手机,电脑,微信公 ...

js实现微信表情发送

js实现微信表情发送相关推荐

最新文章

热门文章