参考链接:小程序中如何使用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')
以上设置完成后,存入数据库展示为:
这样就可以直接进行存储调用,不需要在进行编码的转换;额