表情包 - vue/微信小程序/js /数据驱动

渲染：

实施起来相对简单。它使用微信的表达式包地址来更改相应的表达式dom节点。然后用v-html渲染

三、实现/原理

先把表情包展示出来

这里有一个数组，对应于文本的下标是微信表情符号的表情符号名称。例如，第i个表达式下标是索引，与微信表情符号包对应的地址是：

Const img=``复制代码

这样就很简单了，直接初始化表情包

注意：我在这里更改了相应的文本以##开头，并在数字的末尾。一串特定的规则，易于获取解析数据。为什么不直接存储标签，因为它仍然显示在输入框中！如果你可以输入框并显示正常表达式，那就更好了。欢迎留言！

//初始化表达式initEmotion（）{const list=this.emotionList; let emotionArr=[]; list.map（（item，index）=> {emotionArr.push（{name:`＃$ {item};`，Url:``}）;}）; this.emotionArr=emotionArr;复制代码

拿到带有表情地址的数组，知道怎么渲染了吧复制代码

然后点击的时候直接插入到输入框handEmotion(item) { this.sendInfo += item.name;}复制代码

插入到输入框光标位置`` //..... //这个问题问的好！ ```复制代码

获取并展示表情包的消息内容

获取请求数据，它应该是我们为表达式特别修改的字符串，例如'hello world＃hello; '#hello inside;它应该转换为表情符号地址，然后呈现。

正则表达式/\＃[\ u4E00- \ u9FA5] {1,3} \;/gi：表示以＃开头;结尾字符中间可以有1-3个字符

//将匹配结果替换为表情符号item.Info=item.Info.replace（/\＃[\ u4E00- \ u9FA5] {1,3} \;/gi，words=＆gt; {let word=words.replace （/\＃| \;/gi，''）; let index=this.emotionList.indexOf（word）; if（index！==-1）{return``;} else {return words}}）;码