Add emoticons to the applet

The native textarea has discarded the button of selecting expression, so it simulates an expression selector

Here is the effect display

Realization principle

Preparation

The expression can be qq expression zone Mid view

  1. Through the two functions of escape() and unescape(), the expression is parsed and reconstructed

    escape("😃") // %uD83D%uDE04
    unescape("%uD83D%uDE04") // 😃

  2. The expression returned here is hexadecimal. In order to calculate the subsequent expression, convert the hexadecimal to the decimal

    parseInt("D83D",16) // 55357
    parseInt("DE04",16) // 56836

  3. Get the subsequent expression data through addition and subtraction and convert it to hexadecimal to reconstruct the expression with unescape()

    const high = parseInt("D83D",16)
    const low = parseInt("DE04",16)
    const U_high = "%u" + high.toString(16)
    const U_low = "%u" + (low+1).toString(16)
    unescape(U_high + U_low)

code implementation

Component code

// components/emoji/index.js
Component({
 /**
  * Property list of component
  */
 properties: {
   value: String, // Value of input box
 },

 /**
  * Initial data of components
  */
 data: {
   emojis: [],
 },

 /**
  * Method list for component
  */
 methods: {
   // Click expression
   onTapEmoji: function(e) {
     const {
       currentTarget: {
         dataset: {
           emoji
         }
       }
     } = e;
     const {
       value
     } = this.properties;
     this.triggerEvent('clickEmoji', {
       emoji: emoji,
       value: value + emoji
     })
   },
 },

 lifetimes: {
   attached: function() {
     const _high = 55357;
     const _low = 56832;
     const _nums = 18;
     const emojis = [];
     for (let i = 0; i < _nums; i++) {
       const U_high = "%u" + _high.toString(16)
       const U_low = "%u" + (_low + i).toString(16)
       emojis.push(unescape(U_high + U_low))
     }
     this.setData({
       emojis
     })
   },
 }
})

call

index.wmxl

<textarea value="{{textareaValue}}" bindinput="onInputTextarea"></textarea>

<emoji bind:clickEmoji="clickEmoji" value="{{textareaValue}}" />

index.js

Page({

  /**
   * Initial data of the page
   */
  data: {
    textareaValue: "",
  },

  /**
   * Life cycle function -- listening to page loading
   */
  clickEmoji: function(e) {
    const {
      detail: {
        value
      }
    } = e;
    this.setData({
      textareaValue: value
    })
  },
  onInputTextarea: function(e) {
    const {
      detail: {
        value
      }
    } = e;
    this.setData({
      textareaValue: value
    })
  }
})

Tags: Javascript emoji

Posted on Sat, 14 Dec 2019 09:23:54 -0500 by farkewie