微信小程序在聊天中如何插入表情？

一、使用QQ地带Emoji表情代码大全

参考链接：小程序中如何使用Emoji表情 - Jo太郎 - 博客园

如何使用：

 index.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    emoji: '☀-☔-👷-😜',
    emojiArr: ['01', '02', '03', '04'],
    motto: 'Hello World',
    emojis: [],
    isEmoji: false, //显示与隐藏表情栏
    emojiHetght: 0, //动态改变表情框的高度
    footHeight: false, //动态改变外部容器的高度
  },

  onShow: function () {
    this.showEmoji();
  },
  /**
   * 渲染emoji表情
   */
  showEmoji: function () {
    var emo = {};
    var emoChar = this.data.emoji.split('-');
    this.data.emojiArr.forEach((val, index) => {
      emo = {
        char: emoChar[index],
        emoji: val
      }
      this.data.emojis.push(emo);
    })
    this.setData({
      emojis: this.data.emojis
    })
  },
  /**
   * 选中emoji表情并显示在输入框内
   */
  emojiBtn: function (e) {
    let index = e.currentTarget.dataset.i;
    if (this.data.commentText) {
      this.setData({
        commentText: this.data.commentText + this.data.emojis[index].char
      })
    } else {
      this.setData({
        commentText: this.data.emojis[index].char
      })
    }
  },
  /**
   * 获取用户评论内容
   */
  getCommentValue(e) {
    this.setData({
      commentText: e.detail.value
    })
  },
  /**
   * 点击显示emoji表情框
   */
  onEmoji: function () {
    this.setData({
      isEmoji: true,
      emojiHetght: 400,
      footHeight: 500
    })
  },
  /**
   * 隐藏emoji表情框
   */
  hidEmoji: function () {
    this.setData({
      isEmoji: false,
      emojiHetght: 0,
      footHeight: 100
    })
  },
})

index.wxml

<view class="footer" style="height:{{footHeight}}rpx">
  <view class="comment_bot">
    <input bindfocus="hidEmoji" class="comment_input" type="text" placeholder="输入你想说的话......"
      placeholder-class="input-placeholder" maxlength="500" name="userComment" bindinput="getCommentValue"
      value="{{commentText}}"></input>
    <view catchtap="onEmoji">表情</view>
  </view>
  <view class="emoji_box" style="height:{{emojiHetght}}rpx">
    <scroll-view class="scro_box" scroll-y="true" enable-flex="true">
      <block wx:for="{{emojis}}" wx:key="index">
        <view class="char_box" catchtap="emojiBtn" data-i="{{index}}">{{item.char}}</view>
      </block>
    </scroll-view>
  </view>
</view>

index.wxss

.footer {
  display: flex;
  justify-content: space-between;
  flex-flow: column;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 2rpx solid #f0f0f0;
  line-height: 100rpx;
  font-size: 16px;
  background-color: #fff;
  z-index: 999;
  transition: 0.3s ease-in-out;
  }
  
  .comment_bot {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20rpx;
  }
  
  .comment_input {
  width: 400rpx;
  height: 50rpx;
  border: 2rpx solid #000;
  border-radius: 50rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  text-align: left;
  color: #000;
  }
  
  .tijiao {
  width: 50rpx;
  height: 50rpx;
  vertical-align: middle;
  }
  
  .pinglunbtn {
  margin: 0;
  padding: 0;
  background-color: transparent;
  }
  
  .pinglunbtn::after {
  display: inline-flex;
  height: 100%;
  align-self: center;
  justify-content: center;
  line-height: 30rpx;
  border: none;
  }
  
  .emoji_btn {
  width: 50rpx;
  height: 50rpx;
  padding: 0;
  margin: 0;
  line-height: 0;
  color: #3333;
  background-color: transparent;
  }
  
  .emoji_btn::after {
  border: none;
  border-radius: 0;
  }
  
  .emoji_img {
  width: 50rpx;
  height: 50rpx;
  }
  
  .emoji_box {
  width: 100%;
  transition: 0.3s ease-in-out;
  }
  
  .scro_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;
  }
  
  .char_box {
  display: inline-block;
  padding: 0 20rpx;
  }

二、表情如何存入数据库？

通过encodeURIComponent() 函数把字符串作为 URI 组件进行编码；

    var nickName = this.data.commentText;
    let regex = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig
    let nickNameNew = nickName.replace(regex, function (res) {
      return encodeURIComponent(res)
    })
    console.log(nickNameNew)
    console.log(decodeURIComponent(nickNameNew))

 

三、最新更新手机自带表情存入数据库的方法   2022-04-28

1、把数据库的类型设置为utf8mb4_general_ci
2、把数据表类型设置为utf8mb4_general_ci
3、把存入文字的字段类型设置为utf8mb4_general_ci
4、把数据库的连接设置为utf8mb4
 mysqli_query($conn, 'set names utf8mb4')

以上设置完成后，存入数据库展示为：

 这样就可以直接进行存储调用，不需要在进行编码的转换；额