小程序中如何使用Emoji表情

小程序中如何使用Emoji表情

 

在小程序開發的過程中，類似商城、社區之類的項目，大多數都遇到過使用emoji表情的需求，我在網上查找到一些文章，給了我一些靈感，以下就是使用表情的步驟。

參考文章鏈接--->https://blog.csdn.net/qq_33744228/article/details/80335440

一、首先去相應的emoji表情網站尋找自己需要的表情

Emoji表情網址-->http://www.oicqzone.com/tool/emoji/

在網站中，紅框一欄中的表情是可以直接復制到js中進行使用的，但是需要使用引號包起來，因為這種類型的屬於字符串表情，可以直接以字符串形式展示，如下圖

二、把表情一一對應的放到字符串中后，可以聲明一個數組把相應的數字與emoji對應起來，當然，這一步其實可以稍微省略，可以直接把表情與數字結合，做成數組對象，使用起來更方便，直接寫在json文件進行請求或者在聲明變量的時候寫好就行，這里還是用的原來的方法，上圖中已經定義好表情符號了，下圖是對應的數字ID以及對應的變量

三、當把兩樣東西都定義好后就可以通過遍歷數字ID的數組，把相應的emoji表情以及數字ID存入到一個對象中推到數組中去，如下圖

頁面的結構，我是使用了小程序中的scroll-view進行表情的渲染，並且使用動態高度去模擬app彈出表情的效果，基本的頁面結構如下圖

 

四、然后在js中對表情的選中以及輸入框文字的處理，如下圖

 

五、剩下的就是模擬輸入鍵盤的出入場動畫以及表情框的顯示和隱藏，如下圖

 以上就是前端關於emoji表情的使用了，剩下的就是后端的同學在對emoji表情如何進行存儲的處理了，存入和取出的編碼格式是不一樣的，解決方法：

　存之前base64_encode()，取的時候base64_decode()

 

下面附上完整代碼:

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>
                <button class="emoji_btn" catchtap="onEmoji">
                    <image class="emoji_img" src="./images/quanzi/emoji_1.png"></image>
                </button>
            </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>

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: transparent;
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;
}

js:

/**
     * 渲染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
                    })
                },