开发一个微信小程序表情组件就这么简单

先上效果图(无图无真相)

image

1. 第一步准备表情包素材

我这里用的微博的表情包可以点击下面的链接查看具体JSON格式这里不展示
表情包文件weibo-emotions.js

2. 第二步编写表情组件(基于wepy2.0)

如果不会 wepy 可以先去了解下如果你会vue那非常容易上手

首先我们需要把表情包文件weibo-emotions.js中的JSON文件转换成我们需要的格式

emojis = [
 {
      id: 编号,
      value: 表情对应的汉字含义 例如:[偷笑],
      icon: 表情相对图片路径,
      url: 表情具体图片路径
  }
]

具体转换方法

function () {
    const _emojis = {}
    for (const key in emotions) {
        if (emotions.hasOwnProperty(key)) {
            const ele = emotions[key];
            for (const item of ele) {
                _emojis[item.value] = {
                    id: item.id,
                    value: item.value,
                    icon: item.icon.replace('/', '_'),
                    url: weibo_icon_url + item.icon
                }
            }
        }
    }
    return _emojis
}

编写组件的html代码

<template>
  <div class="emoji" style="height:{{height}}px;" :hidden="hide">
    <scroll-view :scroll-y="true" style="height:{{height}}px;">
      <div class="icons">
        <div class="img" v-for="img in emojis" :key="img.id" @tap.stop="onTap(img.value)">
          <img class="icon-image" :src="img.url" :lazy-load="true" />
        </div>
      </div>
      <div style="height:148rpx;"></div>
    </scroll-view>
    <div class="btn-box">
      <div class="btn-del" @tap.stop="onDel">
        <div class="icon icon-input-del" />
      </div>
    </div>
  </div>
</template>

html代码中的height变量为键盘的高度，通过props传入

编写组件的css代码

.emoji {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  transition: all 0.3s;
  z-index: 10005;
  &::after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 0.4px solid rgba(235, 237, 245, 0.8);
    color: rgba(235, 237, 245, 0.8);
  }
  .icons {
    display: flex;
    flex-wrap: wrap;
    .img {
      flex-grow: 1;
      padding: 20rpx;
      text-align: left;
      justify-items: flex-start;
      .icon-image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
  scroll-view {
    background: #f8f8f8;
  }
  .btn-box {
    right: 0rpx;
    bottom: 0rpx;
    position: fixed;
    background: #f8f8f8;
    padding: 30rpx;
    .btn-del {
      background: #ffffff;
      padding: 20rpx 30rpx;
      border-radius: 10rpx;
      .icon {
        font-size: 48rpx;
      }
    }
  }
  .icon-loading {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

这里是使用less来编写css样式的,flex布局如果你对flex不是很了解可以看看 这篇文章

组件JS代码比较少

import { weibo_emojis } from '../common/api';
import wepy from '@wepy/core';
wepy.component({
  options: {
    addGlobalClass: true
  },
  props: {
    height: Number,
    hide: Boolean
  },
  data: {
    emojis: weibo_emojis,
  },
  methods: {
    onTap(val) {
      this.$emit('emoji', val);
    },
    onDel() {
      this.$emit('del');
    }
  }
});

表情组件基本已经编写完成是不是很简单

那么编写好的组件怎么用呢？

其实也很简单

第一步把组件引入到页面

<config>
{
    "usingComponents": {
      "emoji-input": "../components/input-emoji",
    }
}
</config>

第二步把组件加入到页面html代码中

<emoji-input
      :height="boardheight"
      @emoji="onInputEmoji"
      @del="onDelEmoji"
      :hide="bottom === 0"
    />

第三步编写onInputEmoji，onDelEmoji方法

    /**
     * 选择表情
     */
    onInputEmoji(val) {
      let str = this.content.split('');
      str.splice(this.cursor, 0, val);
      this.content = str.join('');
      if (this.cursor === -1) {
        this.cursor += val.length + 1;
      } else {
        this.cursor += val.length;
      }
      this.canSend();
    },
    /**
     *  删除表情
     */
    onDelEmoji() {
      let str = this.content.split('');
      const leftStr = this.content.substring(0, this.cursor);
      const leftLen = leftStr.length;
      const rightStr = this.content.substring(this.cursor);
      const left_left_Index = leftStr.lastIndexOf('[');
      const left_right_Index = leftStr.lastIndexOf(']');
      const right_right_Index = rightStr.indexOf(']');
      const right_left_Index = rightStr.indexOf('[');
      if (
        left_right_Index === leftLen - 1 &&
        leftLen - left_left_Index <= 8 &&
        left_left_Index > -1
      ) {
        // "111[不简单]|23[33]"left_left_Index=3,left_right_Index=7,leftLen=8
        const len = left_right_Index - left_left_Index + 1;
        str.splice(this.cursor - len, len);
        this.cursor -= len;
      } else if (
        left_left_Index > -1 &&
        right_right_Index > -1 &&
        left_right_Index < left_left_Index &&
        right_right_Index <= 6
      ) {
        // left_left_Index:4,left_right_Index:3,right_right_Index:1,right_left_Index:2
        // "111[666][不简|单]"right_right_Index=1,left_left_Index=3,leftLen=6
        let len = right_right_Index + 1 + (leftLen - left_left_Index);
        if (len <= 10) {
          str.splice(this.cursor - (leftLen - left_left_Index), len);
          this.cursor -= leftLen - left_left_Index;
        } else {
          str.splice(this.cursor, 1);
          this.cursor -= 1;
        }
      } else {
        str.splice(this.cursor, 1);
        this.cursor -= 1;
      }
      this.content = str.join('');
    },

好了基本就完成了一个表情组件的编写和调用

如果你想看完整的代码请点击这里

如果你想体验可以扫下面的二维码自己去体验下

image

下篇 我们写写怎么实现一个简单的富文本编辑器