小程序中加入表情組件

原生的textarea已經把選擇表情的按鈕丟棄了，因此本身就模擬了一個表情選擇器

---

下面是效果展現

實現原理

準備工做

表情能夠在qq表情地帶中查看

1. 經過 escape() 和 unescape() 兩個函數來對錶情進行解析和重構

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

   

2. 這裏返回的表情是十六進制的，爲了計算出後續的表情，將十六進制轉換成10進制

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

   

3. 經過加減來獲得後續表情數據並轉換成16進制用 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)

   

代碼實現

組件代碼

// components/emoji/index.js
Component({
 /**
  * 組件的屬性列表
  */
 properties: {
   value: String, // 輸入框的值
 },

 /**
  * 組件的初始數據
  */
 data: {
   emojis: [],
 },

 /**
  * 組件的方法列表
  */
 methods: {
   // 點擊表情
   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="{{textareaValue}}" bindinput="onInputTextarea"></textarea>

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

index.js

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    textareaValue: "",
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  clickEmoji: function(e) {
    const {
      detail: {
        value
      }
    } = e;
    this.setData({
      textareaValue: value
    })
  },
  onInputTextarea: function(e) {
    const {
      detail: {
        value
      }
    } = e;
    this.setData({
      textareaValue: value
    })
  }
})