This is the 25th day of my participation in the August Challenge

Blah, blah, blah

Instant Messaging (IM for short), at present, should be the contact method for online customer service chosen by some websites, especially for products selling online services, most of them will choose to embed an Instant message to ensure the needs of some customers.

Some customers too much trouble, a simple and crude way to contact users is absolutely better than adding wechat and other communication methods.

Of course, this isn’t about online communication. Here’s a look at one of the most essential parts of instant messaging: emojis.

QQ emoji is the most classic, also very cute one.

As a side note, in the upper right corner you can export the eIF file of other emoticons that aren’t the default emoticons. Download the special decompressor to extract it into a GIF.

But after I decompress, including the Internet to find a lot of white edge, if it is a personal project or casual words can care. But if you’re obsessed with detail, you’ll want to find a clean emoji with no white edges.

After many twists and turns I found this website

You can download pure emojis without white edges. I wrote a script to download them automatically. You can try it if you need it.

How do I do that?

The company’s project is mobile terminal, of course, mobile terminal can also be directly used, in fact, more diverse.

No more than display emoji list, select emoji, emoji into the input box, send emoji.

However, there is a problem on the mobile side. The Input component of UniApp in IOS system does not support the direct display of emoticons. So it has to be written, but it’s not a problem.

So what we’re doing here is we’re doing conditional compilation, and we’re judging the phone system at the same time, so we’re writing two sets of logic.

Ps: Here’s the code. The code is a hassle.

/* Emoji array: [[smile], [cry]] */
textToImg(str) {
  // Form an array of text that is not an image. The image is "".
  // /\[(?
      
       )[^\[\]]+\]/
      
  str = str.replace(reg, "<span class='clickUrl' style='color:#0d68fa'>$1$2$3$4</span>");
  let result = HTMLParser(
    str.replace(/\[(.+?)\]/g.item= > {
      let index = this.$utils.list.indexOf(item.slice(1, item.length - 1));
      if(index ! = -1) {
        // #ifdef H5
        return `<img src="The ${this.$url}/static/imgs/emoji/${index}.png"/>`;
        // #endif
        // #ifdef APP-PLUS
        return `<img src="The ${this.$url}/static/imgs/emoji2/${index}.png" width="35" height="35"/>`;
        // #endif
      } else {
        returnitem; }}));return result;
}
Copy the code

This is about the core, in order to accurately interchangeable with the text, so in advance defined an array of emoticons, emoticons with index value named: 0.png;

After matching with the re, replace it with the corresponding picture.