微信小程序 擴(kuò)展組件·仿微信表情組件

emoji

仿微信表情組件。使用前需將文檔下方提供的表情雪碧圖上傳 CDN，再傳入表情組件。為提升首次加載表情圖片的性能，可通過 image 組件提前觸發(fā)雪碧圖的下載，利用瀏覽器的緩存機(jī)制。在不使用表情面板的頁面，可將 emoji 組件隱藏或移出屏幕外，僅使用 parseEmoji 的功能。

屬性列表

示例代碼：

{
  "disableScroll": true,
  "navigationBarTitleText": "",
  "usingComponents": {
    "mp-emoji": "../components/emoji/emoji"

  }
}

<scroll-view scroll-y style="height: {{layoutHeight}}px" scroll-into-view="{{historyList[historyList.length - 1].id}}">
  <block wx:for="{{historyList}}" wx:for-index="idx" wx:for-item="historyItem">
    <view class="record" hidden="{{historyItem.length === 0}}" id="{{historyItem.id}}">
      <view class="avator"></view>
      <view class="comment">
        <block wx:for="{{historyItem.emoji}}" wx:key="*this">
          <block wx:if="{{item.type === 1}}">{{item.content}}</block>
          <view 
            wx:if="{{item.type === 2}}" 
            style="display: inline-block; width: {{lineHeight}}px; height: {{lineHeight}}px">
            <view 
              class="{{item.imageClass}}"
              style="background-image: url({{emojiSource}});transform-origin: 0 0; transform: scale({{lineHeight / 64}});"></view>
          </view>
        </block>
      </view>
    </view>
  </block></scroll-view>
  
    <view class="reply_wrp" style="bottom: {{keyboardHeight}}px">
      <view class="reply_tool">
        <view hover-class="active" class="reply_button replay_quick_button">
          <image src="./images/reply_tool_keyboard.svg" mode='aspectFit' class="reply_tool_pic"></image>
        </view>
        <view class="reply_form_wrp">
          <label for="" class="reply_label">
            <input 
              class="reply_input" 
              cursor-spacing="8px" 
              confirm-type="send" 
              adjust-position="{{false}}" 
              confirm-hold value="{{comment}}" 
              cursor="{{cursor}}" 
              focus="{{focus}}" 
              bindblur="onBlur" 
              bindfocus="onFocus" 
              bindinput="onInput" 
              bindconfirm="onConfirm" 
              bindkeyboardheightchange="onkeyboardHeightChange"
            />
          </label>
        </view>
        <view hover-class="active" class="reply_button replay_emotion_button" bindtap="showEmoji">
          <image src="./images/reply_tool_emoji.svg" mode='aspectFit' class="reply_tool_pic"></image>
        </view>
        <view hover-class="active" class="reply_button replay_media_button" bindtap="showFunction">
          <image src="./images/reply_tool_add.png" mode='aspectFit' class="reply_tool_pic"></image>
        </view>
      </view>
      <view class="reply_panel_wrp" style="height: {{emojiShow ? 300 : 200}}px;" hidden="{{!emojiShow && !functionShow}}">
        <view class="reply_panel {{emojiShow ? 'show': ''}}" hidden="{{!emojiShow}}">
          <mp-emoji source="{{emojiSource}}" class="mp-emoji" bindinsertemoji="insertEmoji" binddelemoji="deleteEmoji" bindsend="onsend"></mp-emoji>
        </view>
        <view class="reply_panel {{functionShow ? 'show': ''}}" hidden="{{!functionShow}}">
          <swiper indicator-dots="{{true}}" indicator-color="#bbbbbb" indicator-active-color="#8c8c8c">
            <swiper-item>
              <view class="function_list">
                <view class="function_item" bindtap="chooseImage">
                  <image src="./images/reply_function_image.svg" class="reply_function_pic"></image>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>

使用方式

點(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 = '測(cè)試[得意][偷笑]文本'
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: '測(cè)試'},
  {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。

<view class="comment">
  <block wx:for="{{parsedComment}}" wx:key="*this">
    <block wx:if="{{item.type === 1}}">{{item.content}}</block>
    <view wx:if="{{item.type === 2}}" style="display: inline-block; width: {{lineHeight}}px; height: {{lineHeight}}px">
      <view 
        class="{{item.imageClass}}"
        style="background-image: url({{emojiSource}});transform-origin: 0 0; transform: scale({{lineHeight / 64}});">
      </view>
    </view>
  </block>
</view>

.comment {
  font-size: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 24px;
}

如何與 input 結(jié)合使用，參考示例代碼。

表情雪碧圖