js实现微信表情发送

最新推荐文章于 2024-04-24 16:04:42 发布

黑匣子~

最新推荐文章于 2024-04-24 16:04:42 发布

阅读量3.8k

点赞数 1

分类专栏： qqFace 微信 js 文章标签： js

本文链接：https://blog.csdn.net/farme_guan/article/details/105244365

版权

js 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

qqFace

2 篇文章 0 订阅

订阅专栏

微信

2 篇文章 0 订阅

订阅专栏

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

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

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;
}

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