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>
相关推荐
web_Hsir4 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir4 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa5 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘7 小时前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界1 天前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨1 天前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆1 天前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na011 天前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir1 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽1 天前
uniapp编译的app在ios上内存泄漏了
uni-app