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

一、使用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/iglet 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')

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