Add emoticons to the applet

Here is the effect display

Realization principle

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

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

index.wmxl

<textarea value="{}" bindinput="onInputTextarea"></textarea> <emoji bind:clickEmoji="clickEmoji" value="{}" />

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

14 December 2019, 09:23 | Views: 2792