码迷,mamicode.com
首页 > 微信 > 详细

小程序中如何使用Emoji表情

时间:2020-01-05 09:56:15      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:targe   显示   输入框   net   ping   文章   code   content   max   

小程序中如何使用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
                    })
                },

小程序中如何使用Emoji表情

标签:targe   显示   输入框   net   ping   文章   code   content   max   

原文地址:https://www.cnblogs.com/BingDaYe/p/12151324.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!