小程序QQ版表情解析组件
代码片段: [https://developers.weixin.qq.com/s/KLaD5MmD7V45)
GitHub: https://github.com/WozHuang/Miniprogram-Demo/tree/master/emoji-parser
本来有人提出要使用表情的时候并不需要做那么多功能,因为utf8
字符集中本来就已经定义有表情了,我只要将mysql的字符集改成utf8mb4
就可以实现预期的功能。
但是后来又有人嫌弃那个表情丑(我懒得告诉他是因为安卓版本低系统自带的emoji才这么难看,苹果华为的可好看了)
于是就计划实现一个自定义表情的功能(目前只做了微信那种小表情,大表情图暂时没考虑,因为已经做发送图片的功能),一顿寻找资源加思考后做了一个能够将设定的字符替换成图片的组件。
参考博客:
https://blog.csdn.net/frankcheng5143/article/details/64129433
表情&表情code来源:
优点:
- 避免使用系统自带的emoji,省的老有人说丑,再嫌丑的话就让他自己去设计表情反正我给你放进去
缺点:
因为是使用图片替换的表情,图片的像素对表情的清晰度有影响,缩放下有时候会出现模糊
使用了组件的方式将字符解析成表情,在硬件条件不佳的情况下可能会影响使用体验
实现原理
核心:
使用[xxx]
的形式代表表情
组件解析过程
将输入的字符串使用正则
/\[[^\[\]]*?\]/g
切割出字符串中'[xxx]'
形式的字符串,得到字符串数组输入字符串:
'你真是太[xxx]了'
切割后得到的字符串数组:
['你真是太', '[xxx]', '了']
这里
'[xxx]'
对应的可能是某一个表情循环字符串数组,如果能够找到
'[xxx]'
对应的表情则显示为一个有对应背景图的<span>
标签,不是'[xxx]'
格式和找不到对应表情的字符串则原样显示
效果图:
最新文章
- [转]java selenium webdriver实战 应用小结
- 22.编写一个类A,该类创建的对象可以调用方法showA输出小写的英文字母表。然后再编写一个A类的子类B,子类B创建的对象不仅可以调用方法showA输出小写的英文字母表,而且可以调用子类新增的方法showB输出大写的英文字母表。最后编写主类C,在主类的main方法 中测试类A与类B。
- Java EE开发平台随手记4——Mybatis扩展3
- Linux历史
- 多级下拉菜单zz
- redmin3 忘记管理密码找回方法
- 微信WeixinJSBridge API
- 读流testDemo
- dubbo使用遇到的问题
- 读写锁ReaderWriterLockSlim
- jquery获取浏览器的高度和宽度
- USACO5.4-Character Recognition
- SpringMVC form:form的一个错误(没有传到前台绑定类)
- 51nod 1682 中位数计数
- Java基础:Java的四种引用
- eclipse创建的maven项目,pom.xml文件报错解决方法
- 原生js移除或添加样式
- SAP MM ME81N PO Value Analysis报表中Net Value 为负数是怎么回事?
- nodejs 支付宝app支付
- Nancy的基本用法