Applet how to use Emoji expression

Applet how to use Emoji expression

 

In the process of development of small programs, like the mall, like the community project, most have encountered the need to use emoji expression, I find some articles on the Internet, gave me some inspiration, the following procedure is to use the expression.

Reference article link ---> https://blog.csdn.net/qq_33744228/article/details/80335440

First, first go to the corresponding website emoji expression they need to find expression

Emoji expression URL -> http://www.oicqzone.com/tool/emoji/

In the site, a red frame column expression can be directly copied to the js used, but require the use of quotation marks wrap, since this type of expression string belongs, can be displayed directly as a string, as in FIG.

Second, the expression of one correspondence into the string, to declare an array of numbers with the corresponding emoji association, of course, in fact, this step can be omitted slightly, it can be directly combined with a digital expression, made of an array of objects, more convenient to use, direct a request to write a file or write json trying to be difficult when the variable declaration, as used herein is the original method, has been defined above figure emoticons, the following figure is the number corresponding to the ID and the corresponding variable

Third, when the two things have been defined by the array after traversing the ID number, the emoji into the appropriate expression and a digital ID into an object to push into the array, as in FIG.

Structure of the page, I use the scroll-view applet for rendering expression, and the use of highly dynamic app to simulate the effect of pop-expression, basic page structure as shown below

 

Four, and then select the text input box in the expression of the js, below

 

Fifth, the rest is an admission analog input box animation and facial expressions show and hide the keyboard, as shown below

 These are on the front emoji expressions used, the rest is the back end of emoji expression of students in how to deal with the storage, deposit and withdrawal encoding format is not the same, the solution:

　Before deposit base64_encode (), when taken base64_decode ()

 

Attached below the complete code:

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
                    })
                },