uni-app（H5）论坛 | 社区 表情选择 UI组件

项目源码请移步：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
			}
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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