微信小程序加表情

原生的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
    })
  }
})

以上是 微信小程序加表情 的全部内容， 来源链接： utcz.com/a/16678.html

回到顶部