预览截图：

demo详细代码：https://gitee.com/mosmos_admin/wxemoji

页面引入js：emoji-parser.esm.js

// 表情组件
const emojiParser = require("../components/emoji/emoji-parser.esm");

数据初始化：

data: {// 获取表情emojis:emojiParser.getEmojis({ size: 30 }),// 输入内容text:"",// 光标位置textCursor:0,// 用于显示的内容textEle:"",},

 onLoad() {// 设置显示结果的表情大小emojiParser.configParseEmoji({ size: 30 })},

页面展示：

<view style="width:100%;height:100%;"><view style="padding:0 20px;"><textarea value="{{text}}" bindinput="inputText" bindfocus="textFocus" bindblur="textBlur" placeholder="输入测试"></textarea></view><view style="padding:0 20px;height:200px;overflow:scroll;"><block wx:for="{{emojis}}" wx:key="index"><view class="emotion_item" data-name="{{item.cn}}" bindtap="textInsertEmoji"><view class="icon_emotion" style="{{item.style}}"></view></view></block></view><view style="padding:20px;">显示结果：<rich-text nodes="{{'<div style=\"white-space: pre-line;\">'+ textEle +'</div>'}}"></rich-text></view></view>