在项目中使用微信emoji

项目需求

投放需要在文案中插入微信常用emoji

现状和需求分析

当前项目使用vue2版本，项目中使用的表情库是emoji-mart-vue，可以通过当前表情包库的自定义功能导入微信emoji

需求实现

1.emoji-mart-vue表情包库的使用(当前项目是vue2，使用的是2.6.6的版本)

安装

npm install --save emoji-mart-vue

基本使用

全局注册

import Vue from 'vue'
import { Picker } from 'emoji-mart-vue'

Vue.component('picker', Picker)

局部使用

import { Picker } from 'emoji-mart-vue'

export default {
  components: {
    Picker
  }
}

效果图

2.微信emoji的导入

找到相关的微信emoji资源

我这边选择直接导入emoji图片（图片来源：www.emojiall.com/zh-hans/pla…

图片下载后放到本地项目的资源目录下

使用自定义方法

组件实现

// 文本输入框
<el-input ref="comment"  v-model="first_comment"  :rows="1"  type="textarea"  clearable/>

// 表情选择按钮
<el-popover placement="top-start" trigger="hover">
     <span slot="reference">emoji</span>
     <picker set="emojione" :custom="customEmojis" @select="emojiSelect" />
</el-popover>
           
// js
import { emojiList } from './emoji'
import { Picker } from 'emoji-mart-vue'

emojiSelect(emoji) {
  const memes = emoji.custom ? emoji.name : emoji.native
  const comment = this.$refs.comment.$el.querySelector('textarea')
  const startPos = comment.selectionStart
  const endPos = comment.selectionEnd
  const text = this.first_comment || ''
  
  this.first_comment = text.substring(0, startPos) + memes + text.substring(endPos)
  this.$nextTick(() => {
        comment.selectionStart = comment.selectionEnd = startPos + memes.length
        comment.focus()
      })
  },

export const emojiList = [
  {
    name: '[皱眉]',
    short_names: ['皱眉'],
    text: '',
    emoticons: [],
    keywords: ['皱眉'],
    imageUrl: require('@/assets/emoji/emoji1.png'),
    customCategory: 'wechat'
  },
  {
    name: '[旺柴]',
    short_names: ['旺柴'],
    text: '',
    emoticons: [],
    keywords: ['旺柴'],
    imageUrl: require('@/assets/emoji/emoji2.png'),
    customCategory: 'wechat'
  },
  {
    name: '[汗]',
    short_names: ['汗'],
    text: '',
    emoticons: [],
    keywords: ['汗'],
    imageUrl: require('@/assets/emoji/emoji3.png'),
    customCategory: 'wechat'
  },
  {
    name: '[天啊]',
    short_names: ['天啊'],
    text: '',
    emoticons: [],
    keywords: ['天啊'],
    imageUrl: require('@/assets/emoji/emoji4.png'),
    customCategory: 'wechat'
  },
  {
    name: '[耶]',
    short_names: ['耶'],
    text: '',
    emoticons: [],
    keywords: ['耶'],
    imageUrl: require('@/assets/emoji/emoji5.png'),
    customCategory: 'wechat'
  },
  {
    name: '[社会社会]',
    short_names: ['社会社会'],
    text: '',
    emoticons: [],
    keywords: ['社会社会'],
    imageUrl: require('@/assets/emoji/emoji6.png'),
    customCategory: 'wechat'
  },
  {
    name: '[加油]',
    short_names: ['加油'],
    text: '',
    emoticons: [],
    keywords: ['加油'],
    imageUrl: require('@/assets/emoji/emoji7.png'),
    customCategory: 'wechat'
  },
  {
    name: '[机智]',
    short_names: ['机智'],
    text: '',
    emoticons: [],
    keywords: ['机智'],
    imageUrl: require('@/assets/emoji/emoji8.png'),
    customCategory: 'wechat'
  },
  {
    name: '[捂脸]',
    short_names: ['捂脸'],
    text: '',
    emoticons: [],
    keywords: ['捂脸'],
    imageUrl: require('@/assets/emoji/emoji9.png'),
    customCategory: 'wechat'
  },
  {
    name: '[奸笑]',
    short_names: ['奸笑'],
    text: '',
    emoticons: [],
    keywords: ['奸笑'],
    imageUrl: require('@/assets/emoji/emoji10.png'),
    customCategory: 'wechat'
  },
  {
    name: '[嘿哈]',
    short_names: ['嘿哈'],
    text: '',
    emoticons: [],
    keywords: ['嘿哈'],
    imageUrl: require('@/assets/emoji/emoji11.png'),
    customCategory: 'wechat'
  }
]

效果

注意事项

1原生库里面的表情包可以通过native属性获取，但是自定义是不行的

2微信对于[表情名称]这种写法，会自动转化成为表情包，所以在输入框中表情拼接直接用[表情名称]即可