直接上效果：
表情与文字切换部分
点击识别表情部分
体验
实现思路：
1、动画控制切换
2、emoji-parse解析表情
代码：
const emojiList = require('components/emoji-parser/wechat_emotion.js')const emojiKeys = Object.keys(emojiList)const emojiValue = Object.values(emojiList)Page({/*** 页面的初始数据*/data: {emojiKeys,emojiValue,backgroundPosition:{x:10,y:5},systemInfo:{},emojiImageInfo:{},isEmoji:false,switchImageSrc:"emoji.png",isFocus:false,emojiPositions:[],emojiText:"/::B"},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(emojiKeys)var that = thiswx.getSystemInfo({success: function(res) {var systemInfo = resconsole.log(systemInfo)wx.getImageInfo({src: 'https://6e6f-normal-924598.tcb.qcloud.la/meinv/qqface.png?sign=675ae84c299870334763ddd840dff0d7&t=1583653126',success: res => {var emojiImageInfo = resconsole.log(emojiImageInfo)var ratio = emojiImageInfo.width/systemInfo.windowWidthconsole.log(ratio)that.setData({systemInfo:systemInfo,emojiImageInfo:emojiImageInfo,ratio:ratio})}})},})},chooseEmoji(e){console.log(e)var index = e.currentTarget.dataset.indexthis.setData({backgroundPosition: this.data.emojiValue[index],emojiText: emojiKeys[index]})},switchFocus(e){if (this.data.isEmoji) {// animationEmojiShow.translateY(0).step()this.data.isEmoji=falsethis.setData({switchImageSrc: "emoji.png",isFocus:true})} else {var animationEmojiShow = wx.createAnimation({duration: 300,timingFunction: 'linear'})animationEmojiShow.translateY(-250).step()this.data.isEmoji = truethis.setData({switchImageSrc: "keyboard.png",animationEmojiShow: animationEmojiShow.export()})}},closeDiscuss(){var animationEmojiShow = wx.createAnimation({duration: 300,timingFunction: 'linear'})animationEmojiShow.translateY(0).step()this.data.isEmoji = falsethis.setData({switchImageSrc: "emoji.png",animationEmojiShow: animationEmojiShow.export()})}})
wxml
<view class="container" bindtap="closeDiscuss"><!-- <image class="emoji-control" mode="aspectFit" src="https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/meinv/qqface.png?sign=675ae84c299870334763ddd840dff0d7&t=1583653126" bindtap="chooseEmoji"></image> --><view>您点击了<icon class="face" style="background-position:{{-backgroundPosition.x*29}}px {{-backgroundPosition.y*29}}px"></icon></view><emoji-text text="[{{emojiText}}]"></emoji-text></view><import src="../../WxEmojiView/WxEmojiView.wxml"/><view class="discuss-container" animation="{{animationEmojiShow}}"><view class="control-container"><input class="input-discuss" focus="{{isFocus}}" placeholder="评论" /><image class="image-switch" src="{{switchImageSrc}}" bindtap="switchFocus"></image></view><scroll-view class="emoji-container" scroll-y><block wx:for="{{emojiValue}}"><icon class="face" style="background-position:{{-item.x*29}}px {{-item.y*29}}px;margin-left:10rpx" data-index="{{index}}" bindtap="chooseEmoji"></icon></block></scroll-view></view>
wxss
page{width: 100%;height: 100%;}.container{width: 100%;height: 100%;}.emoji-control{width: 100%;}.face {background: url('https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/meinv/qqface.png?sign=675ae84c299870334763ddd840dff0d7&t=1583653126') no-repeat scroll 0 0 transparent;width: 29px;height: 29px;vertical-align: middle;}.discuss-container{width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;background: rgb(216, 216, 216);position: fixed;bottom: -500rpx;}.input-discuss{width: 600rpx;height: 80rpx;background: white;margin:10rpx 20rpx;padding-left: 20rpx;border-radius: 5rpx;}.image-switch{width: 60rpx;height: 60rpx;}.control-container{width: 100%;height: 100rpx;display: flex;justify-content: center;align-items: center;flex-direction: row;}.emoji-container{width: 100%;height: 500rpx;display: flex;justify-content: center;align-items: center;}
其中使用到的emoji-parse可点击下载
