微信小程序—帶qq表情的評論輸入框

直接上效果：
表情與文字切換部分
點擊識別表情部分

體驗

實現思路：
1、動畫控制切換
2、emoji-parse解析表情
代碼：

const emojiList = require('components/emoji-parser/wechat_emotion.js')
const emojiKeys = Object.keys(emojiList)
const emojiValue = Object.values(emojiList)
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    emojiKeys,
    emojiValue,
    backgroundPosition:{
      x:10,
      y:5
    },
    systemInfo:{},
    emojiImageInfo:{},
    isEmoji:false,
    switchImageSrc:"emoji.png",
    isFocus:false,
    emojiPositions:[],
    emojiText:"/::B"

  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log(emojiKeys)
    var that = this
    wx.getSystemInfo({
      success: function(res) {
        var systemInfo = res
        console.log(systemInfo)
        wx.getImageInfo({
          src: 'https://6e6f-normal-924598.tcb.qcloud.la/meinv/qqface.png?sign=675ae84c299870334763ddd840dff0d7&t=1583653126',
          success: res => {
            var emojiImageInfo = res
            console.log(emojiImageInfo)
            var ratio = emojiImageInfo.width/systemInfo.windowWidth
            console.log(ratio)
            that.setData({
              systemInfo:systemInfo,
              emojiImageInfo:emojiImageInfo,
              ratio:ratio
            })
          }
        })
      },
    })
  },
 
  chooseEmoji(e){
    console.log(e)
    var index = e.currentTarget.dataset.index
    this.setData({
      backgroundPosition: this.data.emojiValue[index],
      emojiText: emojiKeys[index]
      })
  },
  switchFocus(e){
    
    if (this.data.isEmoji) {
      // animationEmojiShow.translateY(0).step()
      this.data.isEmoji=false
      this.setData({
        switchImageSrc: "emoji.png",
        isFocus:true
      })
    } else {
      var animationEmojiShow = wx.createAnimation({
        duration: 300,
        timingFunction: 'linear'
      })
      animationEmojiShow.translateY(-250).step()
      this.data.isEmoji = true
      this.setData({
        switchImageSrc: "keyboard.png",
        animationEmojiShow: animationEmojiShow.export()
      })
    }
  },
  closeDiscuss(){
    var animationEmojiShow = wx.createAnimation({
      duration: 300,
      timingFunction: 'linear'
    })
    animationEmojiShow.translateY(0).step()
    this.data.isEmoji = false
    this.setData({
      switchImageSrc: "emoji.png",
      animationEmojiShow: animationEmojiShow.export()
    })
  }
})

wxml

<view class="container" bindtap="closeDiscuss">
  <!-- <image class="emoji-control" mode="aspectFit" src="https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/meinv/qqface.png?sign=675ae84c299870334763ddd840dff0d7&t=1583653126" bindtap="chooseEmoji"></image> -->
  <view>
    您點擊了
    <icon class="face" style="background-position:{{-backgroundPosition.x*29}}px {{-backgroundPosition.y*29}}px"></icon>
  </view>
  
  <emoji-text text="[{{emojiText}}]"></emoji-text>
</view>
<import src="../../WxEmojiView/WxEmojiView.wxml"/>
<view class="discuss-container" animation="{{animationEmojiShow}}">
  <view class="control-container">
    <input class="input-discuss" focus="{{isFocus}}" placeholder="評論" />
    <image class="image-switch" src="{{switchImageSrc}}" bindtap="switchFocus"></image>
  </view>
  <scroll-view class="emoji-container" scroll-y>
    <block wx:for="{{emojiValue}}">
      <icon class="face" style="background-position:{{-item.x*29}}px {{-item.y*29}}px;margin-left:10rpx" data-index="{{index}}" bindtap="chooseEmoji"></icon>
  </block>
  </scroll-view>
</view>

wxss

page{
  width: 100%;
  height: 100%;
}
.container{
  width: 100%;
  height: 100%;
}
.emoji-control{
  width: 100%;
}
.face {
  background: url('https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/meinv/qqface.png?sign=675ae84c299870334763ddd840dff0d7&t=1583653126') no-repeat scroll 0 0 transparent;
  width: 29px;
  height: 29px;
  vertical-align: middle;
}

.discuss-container{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgb(216, 216, 216);
  position: fixed;
  bottom: -500rpx;
}
.input-discuss{
  width: 600rpx;
  height: 80rpx;
  background: white;
  margin:10rpx 20rpx;
  padding-left: 20rpx;
  border-radius: 5rpx;
}
.image-switch{
  width: 60rpx;
  height: 60rpx;
}
.control-container{
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.emoji-container{
  width: 100%;
  height: 500rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

其中使用到的emoji-parse可點擊下載