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
    })
  }
})