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

项目源码请移步:bbs

效果



实现思路

  • 表情切换

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

  • emoji表情

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

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

  • 小黄人表情

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

答案是正则

javascript 复制代码
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
			}
		}
	}
html 复制代码
<view class="pub-v3">
			<text class="articled-t3-a4" v-html="$options.filters.formatMinions(articleContent,minions)"></text>
		</view>
相关推荐
盛夏绽放3 小时前
uni-app中获取用户实时位置完整指南:解决权限报错问题
uni-app·notepad++
xixixin_3 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
一夜枫林9 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^10 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
thigh_d1 天前
uniapp 安卓离线本地打包,Android Studio生成apk包
android·uni-app·android studio
珎珎啊1 天前
uniapp+vue3移动端实现输入验证码
前端·javascript·uni-app
前端无涯1 天前
uniapp跨平台开发---switchTab:fail page `/undefined` is not found
uni-app
老李不敲代码1 天前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa1 天前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
七七小报1 天前
uniapp-商城-34-shop 购物车 选好了 进行订单确认
uni-app