网站建设 首选百川互动58创业网

项目源码请移步：bbs

效果

实现思路

• 表情切换

人物、动物、小黄人不同表情之间的切换实际就是组件的切换

• emoji表情

emoji表情本身就是一种字符 如需其他emoji表情可参考 EmojiAll中文官方网站

需要注意的就是数据库的存储格式需要支持emoji表情，我项目中使用的mysql（utf8mb4）

• 小黄人表情

我的方案是gif图或png（或其他格式）图，在输入框内可以看到点击小黄人实际录入的是“[小黄人-微笑]”一段文案，实际上数据库内存的也是“[小黄人-微笑]”。但我们更关心的是页面如何反显这张图呢？

答案是正则

export default {data() {return {minions:{'[小黄人-微笑]':'f0/xhrnew_weixiao_org.png','[小黄人-剪刀手]':'63/xhrnew_jiandaoshou_org.png','[小黄人-不屑]':'b2/xhrnew_buxie_org.png','[小黄人-高兴]':'41/xhrnew_gaoxing_org.png','[小黄人-惊讶]':'fd/xhrnew_jingya_thumb.png','[小黄人-委屈]':'79/xhrnew_weiqu_org.png','[小黄人-坏笑]':'be/xhrnew_huaixiao_thumb.png','[小黄人-白眼]':'e2/xhrnew_baiyan_org.png','[小黄人-无奈]':'15/xhrnew_wunai_org.png','[小黄人-得意]':'c8/xhrnew_deyi_org.png'}}},filters:{formatMinions:function(content, minions){var res = ""if(content){res = content.replace(/\[(.*?)\]/gi,(item)=>{if(item.indexOf('小黄人-') != -1){let suffix = minions[item]return `<image class="emoji-sticker" src="https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/${suffix}" mode=""></image>`}return ""})}return res}}}

<view class="pub-v3"><text class="articled-t3-a4" v-html="$options.filters.formatMinions(articleContent,minions)"></text></view>