建站
咨詢
售后
建站咨詢
新聞中心
emoji
仿微信表情組件。使用前需將文檔下方提供的表情雪碧圖上傳 CDN，再傳入表情組件。為提升首次加載表情圖片的性能，可通過 image 組件提前觸發(fā)雪碧圖的下載，利用瀏覽器的緩存機(jī)制。在不使用表情面板的頁面，可將 emoji 組件隱藏或移出屏幕外，僅使用 parseEmoji 的功能。
在永清等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需策劃,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),網(wǎng)絡(luò)營銷推廣,外貿(mào)網(wǎng)站建設(shè),永清網(wǎng)站建設(shè)費(fèi)用合理。
屬性列表
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| source | string | 是 | 表情雪碧圖地址 | |
| height | number | 300 | 否 | 表情盤高度 |
| background-color | string | #EDEDED | 否 | 表情盤背景色 |
| show-send | boolean | true | 否 | 是否顯示發(fā)送按鈕 |
| show-del | boolean | true | 否 | 是否顯示刪除按鈕 |
| show-history | boolean | true | 否 | 是否顯示最近使用 |
| bindinsertemoji | eventhandle | 否 | 插入表情，e.detail={emotionName} | |
| binddelemoji | eventhandle | 否 | 點(diǎn)擊刪除按鈕 | |
| bindsend | eventhandle | 否 | 點(diǎn)擊發(fā)送按鈕 |
示例代碼：
{
"disableScroll": true,
"navigationBarTitleText": "",
"usingComponents": {
"mp-emoji": "../components/emoji/emoji"
}
}
{{item.content}}
{{item.content}}
使用方式
點(diǎn)擊表情圖標(biāo)將會(huì)獲得對(duì)應(yīng)的中文含義，例如????->[微笑]。在實(shí)際輸入過程中，我們通常僅展示中文含義即可。
對(duì)文字和表情混合的評(píng)論需要解析后才能展示，組件內(nèi)提供了 parseEmoji 解析函數(shù)，獲取方式如下：
// .mp-emoji 為表情組件的選擇器
const emojiInstance = this.selectComponent('.mp-emoji')
const emojiNames = emojiInstance.getEmojiNames()
const parseEmoji = emojiInstance.parseEmoji
const comment = '測試[得意][偷笑]文本'
const parsedCommnet = parseEmoji(comment)
解析后的評(píng)論結(jié)構(gòu)如下，文字和表情分割構(gòu)成的數(shù)組，type=1 為純文本，type=2 為表情 icon，imageClass 記錄了表情在雪碧圖上的位置。需注意的是組件開啟了 styleIsolation: 'page-shared'，組件內(nèi)樣式與頁面共享。
[
{type: 1, content: '測試'},
{type: 2, content: '[得意]', imageClass: 'smiley_4'},
{type: 2, content: '[偷笑]', imageClass: 'smiley_20'},
{type: 1, content: '文本'},
]
由于表情 icon 采用雪碧圖生成，展示時(shí)可采用如下的結(jié)構(gòu)。需要注意的是每個(gè) icon 的實(shí)際大小為 64px，因此在段落中通過 scale 進(jìn)行縮放，縮放的比例為 行高 / 64。
{{item.content}}
.comment {
font-size: 18px;
display: flex;
align-items: center;
flex-wrap: wrap;
line-height: 24px;
}
如何與 input 結(jié)合使用，參考示例代碼。
表情雪碧圖
網(wǎng)頁名稱：創(chuàng)新互聯(lián)小程序教程：微信小程序擴(kuò)展組件·仿微信表情組件
分享鏈接：http://m.fisionsoft.com.cn/article/codjedg.html
