?

最近在做仿微信聊天表情發(fā)送功能，所以需要展示常用的105個表情。

因為對接微信公眾號的時候，用戶聊天過程中發(fā)送的表情，微信服務器會轉成對應的代碼傳給我們的服務器，類似如下：

:/::)/::~/::B/::|/:8-)/::</::$/::X/::Z/::'(/::-|/::@/::P/::D/::O/::(/::+[囧]/::Q/::T/:,@P/:,@-D/::d/:,@o/::g/:|-)/::!/::L/::>/::,@/:,@f/::-S/:?/:,@x/:,
@@/::8/:,@!/:!!!/:xx/:bye/:wipe/:dig/:handclap/:&-(/:B-)/:<@/:@>/::-O/:>-|/:P-(/::'|/:X-)/::*/:@x/:8*/:pd/:<W>/:beer/:basketb/:oo/:coffee/:eat
/:pig/:rose/:fade/:showlove/:heart/:break/:cake/:li/:bome/:kn/:footb/:ladybug/:shit/:moon/:sun/:gift/:hug/:strong/:weak/:share/:v/:@)/:jj/:@@
/:bad/:lvu/:no/:ok/:love/:<L>/:jump/:shake/:<O>/:circle/:kotow/:turn/:skip/:&>/:#-0/:hiphot/:kiss/:<&/:oY

所以我們需要轉換成對應的表情文本

[:1:][:2:][:3:][:4:][:52:][:5:][:6:][:7:][:8:][:9:][:10:][:11:][:12:][:13:][:14:][:15:][:53:][:16:][:17:][:18:][:19:][:20:][:21:][:22:][:23:][:24:][:25:] [:26:][:27:][:28:][:29:][:30:][:31:][:32:][:33:][:34:][:35:][:59:][:36:][:37:][:38:][:39:][:54:][:40:][:41:][:42:][:43:][:44:][:45:][:46:][:47:][:48:] [:49:][:50:][:51:][:60:][:62:][:81:][:82:][:83:][:63:][:64:][:61:][:79:][:80:][:78:][:65:][:66:][:84:][:85:][:58:][:87:][:86:][:89:][:88:][:56:][:57:] [:90:][:55:][:67:][:68:][:69:][:70:][:71:][:72:][:75:][:76:][:77:][:74:][:73:][:104:][:105:][:91:][:92:][:93:][:94:][:95:][:96:][:97:][:98:][:99:] [:100:][:101:][:102:][:103:]

以上文本對應的中文含義如下：

[:1:][:2:][:3:][:4:][:52:][:5:][:6:][:7:][:8:][:9:][:10:][:11:][:12:][:13:][:14:] [:15:][:53:][:16:][:17:][:18:][:19:][:20:][:21:][:22:][:23:][:24:][:25:][:26:][:27:][:28:] [:29:][:30:][:31:][:32:][:33:][:34:][:35:][:59:][:36:][:37:][:38:][:39:][:54:][:40:][:41:] [:42:][:43:][:44:][:45:][:46:][:47:][:48:][:49:][:50:][:51:][:60:][:62:][:81:][:82:][:83:] [:63:][:64:][:61:][:79:][:80:][:78:][:65:][:66:][:84:][:85:][:58:][:87:][:86:][:89:][:88:] [:56:][:57:][:90:][:55:][:67:][:68:][:69:][:70:][:71:][:72:][:75:][:76:][:77:][:74:][:73:] [:104:][:105:][:91:][:92:][:93:][:94:][:95:][:96:][:97:][:98:][:99:][:100:][:101:][:102:][:103:][微笑][撇嘴][色][發(fā)呆][得意][流淚][害羞][閉嘴][睡][大哭][尷尬][發(fā)怒][調皮][呲牙][驚訝] [難過][酷][囧][抓狂][吐][偷笑][愉快][白眼][傲慢][饑餓][困][驚恐][流汗][憨笑][悠閑] [奮斗][咒罵][疑問][噓][暈][瘋了][衰][骷髏][敲打][再見][擦汗][摳鼻][鼓掌][糗大了][壞笑] [左哼哼][右哼哼][哈欠][鄙視][委屈][快哭了][陰險][親親][嚇][可憐][菜刀][西瓜][啤酒][籃球][乒乓] [咖啡][飯][豬頭][玫瑰][凋謝][嘴唇][愛心][心碎][蛋糕][閃電][炸彈][刀][足球][瓢蟲][便便] [月亮][太陽][禮物][擁抱][強][弱][握手][勝利][抱拳][勾引][拳頭][差勁][愛你][NO][OK] [愛情][飛吻][跳跳][發(fā)抖][慪火][轉圈][磕頭][回頭][跳繩][右太極][激動][亂舞][獻吻][左太極][投降]

　

整理成js代碼轉換如下

rs.message = rs.message.replace(/\[\:1\:\]/g, "[微笑]").replace(/\[\:2\:\]/g, "[撇嘴]").replace(/\[\:3\:\]/g, "[色]").replace(/\[\:4\:\]/g, "[發(fā)呆]").replace(/\[\:5\:\]/g, "[流淚]").replace(/\[\:6\:\]/g, "[害羞]").replace(/\[\:7\:\]/g, "[閉嘴]").replace(/\[\:8\:\]/g, "[睡]").replace(/\[\:9\:\]/g, "[大哭]").replace(/\[\:10\:\]/g, "[尷尬]").replace(/\[\:11\:\]/g, "[發(fā)怒]").replace(/\[\:12\:\]/g, "[調皮]").replace(/\[\:13\:\]/g, "[呲牙]").replace(/\[\:14\:\]/g, "[驚訝]").replace(/\[\:15\:\]/g, "[難過]").replace(/\[\:16\:\]/g, "[囧]").replace(/\[\:17\:\]/g, "[抓狂]").replace(/\[\:18\:\]/g, "[吐]").replace(/\[\:19\:\]/g, "[偷笑]").replace(/\[\:20\:\]/g, "[愉快]").replace(/\[\:21\:\]/g, "[白眼]").replace(/\[\:22\:\]/g, "[傲慢]").replace(/\[\:23\:\]/g, "[饑餓]").replace(/\[\:24\:\]/g, "[困]").replace(/\[\:25\:\]/g, "[驚恐]").replace(/\[\:26\:\]/g, "[流汗]").replace(/\[\:27\:\]/g, "[憨笑]").replace(/\[\:28\:\]/g, "[悠閑]").replace(/\[\:29\:\]/g, "[奮斗]").replace(/\[\:30\:\]/g, "[咒罵]").replace(/\[\:31\:\]/g, "[疑問]").replace(/\[\:32\:\]/g, "[噓]").replace(/\[\:33\:\]/g, "[暈]").replace(/\[\:34\:\]/g, "[瘋了]").replace(/\[\:35\:\]/g, "[衰]").replace(/\[\:36\:\]/g, "[敲打]").replace(/\[\:37\:\]/g, "[再見]").replace(/\[\:38\:\]/g, "[擦汗]").replace(/\[\:39\:\]/g, "[摳鼻]").replace(/\[\:40\:\]/g, "[糗大了]").replace(/\[\:41\:\]/g, "[壞笑]").replace(/\[\:42\:\]/g, "[左哼哼]").replace(/\[\:43\:\]/g, "[右哼哼]").replace(/\[\:44\:\]/g, "[哈欠]").replace(/\[\:45\:\]/g, "[鄙視]").replace(/\[\:46\:\]/g, "[委屈]").replace(/\[\:47\:\]/g, "[快哭了]").replace(/\[\:48\:\]/g, "[陰險]").replace(/\[\:49\:\]/g, "[親親]").replace(/\[\:50\:\]/g, "[嚇]").replace(/\[\:51\:\]/g, "[可憐]").replace(/\[\:52\:\]/g, "[得意]").replace(/\[\:53\:\]/g, "[酷]").replace(/\[\:54\:\]/g, "[鼓掌]").replace(/\[\:55\:\]/g, "[擁抱]").replace(/\[\:56\:\]/g, "[月亮]").replace(/\[\:57\:\]/g, "[太陽]").replace(/\[\:58\:\]/g, "[炸彈]").replace(/\[\:59\:\]/g, "[骷髏]").replace(/\[\:60\:\]/g, "[菜刀]").replace(/\[\:61\:\]/g, "[豬頭]").replace(/\[\:62\:\]/g, "[西瓜]").replace(/\[\:63\:\]/g, "[咖啡]").replace(/\[\:64\:\]/g, "[飯]").replace(/\[\:65\:\]/g, "[愛心]").replace(/\[\:66\:\]/g, "[心碎]").replace(/\[\:67\:\]/g, "[強]").replace(/\[\:68\:\]/g, "[弱]").replace(/\[\:69\:\]/g, "[握手]").replace(/\[\:70\:\]/g, "[勝利]").replace(/\[\:71\:\]/g, "[抱拳]").replace(/\[\:72\:\]/g, "[勾引]").replace(/\[\:73\:\]/g, "[OK]").replace(/\[\:74\:\]/g, "[NO]").replace(/\[\:75\:\]/g, "[拳頭]").replace(/\[\:76\:\]/g, "[差勁]").replace(/\[\:77\:\]/g, "[愛你]").replace(/\[\:78\:\]/g, "[嘴唇]").replace(/\[\:79\:\]/g, "[玫瑰]").replace(/\[\:80\:\]/g, "[凋謝]").replace(/\[\:81\:\]/g, "[啤酒]").replace(/\[\:82\:\]/g, "[籃球]").replace(/\[\:83\:\]/g, "[乒乓]").replace(/\[\:84\:\]/g, "[蛋糕]").replace(/\[\:85\:\]/g, "[閃電]").replace(/\[\:86\:\]/g, "[足球]").replace(/\[\:87\:\]/g, "[刀]").replace(/\[\:88\:\]/g, "[便便]").replace(/\[\:89\:\]/g, "[瓢蟲]").replace(/\[\:90\:\]/g, "[禮物]").replace(/\[\:91\:\]/g, "[跳跳]").replace(/\[\:92\:\]/g, "[發(fā)抖]").replace(/\[\:93\:\]/g, "[慪火]").replace(/\[\:94\:\]/g, "[轉圈]").replace(/\[\:95\:\]/g, "[磕頭]").replace(/\[\:96\:\]/g, "[回頭]").replace(/\[\:97\:\]/g, "[跳繩]").replace(/\[\:98\:\]/g, "[右太極]").replace(/\[\:99\:\]/g, "[激動]").replace(/\[\:100\:\]/g, "[亂舞]").replace(/\[\:101\:\]/g, "[獻吻]").replace(/\[\:102\:\]/g, "[左太極]").replace(/\[\:103\:\]/g, "[投降]").replace(/\[\:104\:\]/g, "[愛情]").replace(/\[\:105\:\]/g, "[飛吻]")

　　

轉換成功后需要展示出來啊，所以需要一張QQ表情圖片，根據(jù)css取對應表情的位置，圖片如下

?

?

對應的css代碼如下：

.qqface {width: 28px;height: 28px;font-size: 0;text-indent: -999em;background: url('../image/qqface.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; }

　　

css對應的編號如下：

var qqfaceArr = [['[微笑]','0'], ['[撇嘴]','1'],['[色]','2'],['[發(fā)呆]','3'],['[得意]','4'],['[流淚]','5'],['[害羞]','6' ],['[閉嘴]','7'],['[睡]','8'],['[大哭]','9'],['[尷尬]','10'],['[發(fā)怒]','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'], ['[發(fā)抖]','93'], ['[慪火]','94'], ['[轉圈]','95'], ['[磕頭]','96'], ['[回頭]','97'], ['[跳繩]','98'], ['[投降]','99'], ['[激動]','100'], ['[亂舞]','101'], ['[獻吻]','102'], ['[左太極]','103'], ['[右太極]','104']]; var qqfaceMap = new Map(qqfaceArr);

　　

之后就需要進行一系列js轉換展示了，以下是我完成后的功能：

微信端發(fā)送：

?

我的pc端展示結果：

?

這樣表情功能就完成了，是不是很簡單。

希望能幫助到有需要的朋友。

?

轉載于:https://www.cnblogs.com/wbl001/p/11457460.html

總結

以上是生活随笔為你收集整理的【原创】微信最新表情js代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。