怎么用一串代碼發(fā)出超大表情包?一串代碼發(fā)出超大火影忍者表情包要怎么弄?大家在聊天的時(shí)候應(yīng)該經(jīng)常會(huì)看到有超大的動(dòng)態(tài)表情包,非常的炫酷,那么這個(gè)是怎么弄出來(lái)的呢?

一串代碼發(fā)出超大表情包教程
代碼:
sticker_start_tag_for_text{"originMsgType":0,"x":0.07037036865949631,"y":0.97685185223817825,"width":0.96805555522441864,"height":0.96805555522441864,"rotate":0,"hostMsgSeq":177238,"hostMsgUid":72057594853690144,"hostMsgTime":1521988367,"isDisplayed":false,"isShown":false,"msg":""}sticker_end_tag_for_text
如果自己再次發(fā)送貼表情包責(zé)會(huì)被覆蓋 雙擊貼的表情 可以管理撤回
怎么用代碼打表情包
Vue 表情包輸入組件的實(shí)現(xiàn)代碼
Emotion
一個(gè)用于vue的表情輸入組件
https://gitee.com/jiangliyue/vue_expression_input_module
index是使用示例,emotion是組件代碼(這里用的是微信表情包的地址,大家可根據(jù)需要修改)
下載安裝啟動(dòng)項(xiàng)目查看效果
npm install
npm run dev
Emotion文件夾下Emotion文件說(shuō)明
實(shí)現(xiàn)原理是根據(jù)字段對(duì)在線表情包圖片進(jìn)行匹配替換
代碼中 img 標(biāo)簽的地址即為表情圖片地址,可自己根據(jù)需求替換
mounted () {
const name = this.$el.innerHTML
const list = ['微笑', '撇嘴', '色', '發(fā)呆', '得意', '流淚', '害羞', '閉嘴', '睡', '大哭', '尷尬', '發(fā)怒', '調(diào)皮', '呲牙', '驚訝', '難過(guò)', '酷', '冷汗', '抓狂', '吐', '偷笑', '可愛(ài)', '白眼', '傲慢', '饑餓', '困', '驚恐', '流汗', '憨笑', '大兵', '奮斗', '咒罵', '疑問(wèn)', '噓', '暈', '折磨', '衰', '骷髏', '敲打', '再見(jiàn)', '擦汗', '摳鼻', '鼓掌', '糗大了', '壞笑', '左哼哼', '右哼哼', '哈欠', '鄙視', '委屈', '快哭了', '陰險(xiǎn)', '親親', '嚇', '可憐', '菜刀', '西瓜', '啤酒', '籃球', '乒乓', '咖啡', '飯', '豬頭', '玫瑰', '凋謝', '示愛(ài)', '愛(ài)心', '心碎', '蛋糕', '閃電', '炸彈', '刀', '足球', '瓢蟲(chóng)', '便便', '月亮', '太陽(yáng)', '禮物', '擁抱', '強(qiáng)', '弱', '握手', '勝利', '抱拳', '勾引', '拳頭', '差勁', '愛(ài)你', 'NO', 'OK', '愛(ài)情', '飛吻', '跳跳', '發(fā)抖', '慪火', '轉(zhuǎn)圈', '磕頭', '回頭', '跳繩', '揮手', '激動(dòng)', '街舞', '獻(xiàn)吻', '左太極', '右太極']
let index = list.indexOf(name)
let imgHTML = `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif">`
this.$nextTick(() => {
this.$el.innerHTML = imgHTML
})
},
Emotion文件夾下index文件說(shuō)明
通過(guò)循環(huán)列表生成表情包選擇框
<div class="emotion-box-line" v-for="(line, i) in list" :key="i" >
<emotion class="emotion-item" v-for="(item, i) in line" :key="i" @click.native="clickHandler(item)" >{{item}}</emotion>
</div>
最后需要注意的是表情包評(píng)論后保存到后臺(tái)的是相關(guān)字符串,展示時(shí)需要還原成圖片,具體方法可參考index文件,我這里用了正則匹配轉(zhuǎn)化,還是比較方便的
<div class="text-place">
<!-- /\#[\u4E00-\u9FA5]{1,3}\;/gi 匹配出含 #XXX; 的字段 -->
<p v-html="content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)"></p>
</div>
就這么簡(jiǎn)單。

微信聊天中如何打出表情包
在手機(jī)應(yīng)用里下載訊飛輸入法,安裝,打開(kāi)。
打開(kāi)手機(jī) 設(shè)置 ——系統(tǒng)——語(yǔ)言和輸入法,設(shè)置 訊飛輸入法為 默認(rèn)輸入法
然后打開(kāi)微信,點(diǎn)擊聊天,點(diǎn)擊表情,點(diǎn)擊斗圖,勾上
然后就可以打字蹦出斗圖表情包了。


下載 
下載 
下載
下載
下載 
下載
下載
下載
下載
下載
下載 
下載
下載
下載
下載
下載
下載 
下載
下載
下載
下載
下載
下載
喜歡
頂
難過(guò)
囧
圍觀
無(wú)聊



王者榮耀賬號(hào)惡
MARVEL Strike
2017年10月手游
比官居一品好玩