代码片段: [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来源:

https://www.oschina.net/code/snippet_146430_27448

优点:

  1. 避免使用系统自带的emoji,省的老有人说丑,再嫌丑的话就让他自己去设计表情反正我给你放进去

缺点:

  1. 因为是使用图片替换的表情,图片的像素对表情的清晰度有影响,缩放下有时候会出现模糊

  2. 使用了组件的方式将字符解析成表情,在硬件条件不佳的情况下可能会影响使用体验

实现原理

核心:

使用[xxx]的形式代表表情

组件解析过程

  1. 将输入的字符串使用正则 /\[[^\[\]]*?\]/g 切割出字符串中 '[xxx]' 形式的字符串,得到字符串数组

    输入字符串: '你真是太[xxx]了'

    切割后得到的字符串数组: ['你真是太', '[xxx]', '了']

    这里 '[xxx]' 对应的可能是某一个表情

  2. 循环字符串数组,如果能够找到 '[xxx]' 对应的表情则显示为一个有对应背景图的 <span> 标签,不是 '[xxx]' 格式和找不到对应表情的字符串则原样显示

效果图:

最新文章

  1. [转]java selenium webdriver实战 应用小结
  2. 22.编写一个类A,该类创建的对象可以调用方法showA输出小写的英文字母表。然后再编写一个A类的子类B,子类B创建的对象不仅可以调用方法showA输出小写的英文字母表,而且可以调用子类新增的方法showB输出大写的英文字母表。最后编写主类C,在主类的main方法 中测试类A与类B。
  3. Java EE开发平台随手记4——Mybatis扩展3
  4. Linux历史
  5. 多级下拉菜单zz
  6. redmin3 忘记管理密码找回方法
  7. 微信WeixinJSBridge API
  8. 读流testDemo
  9. dubbo使用遇到的问题
  10. 读写锁ReaderWriterLockSlim
  11. jquery获取浏览器的高度和宽度
  12. USACO5.4-Character Recognition
  13. SpringMVC form:form的一个错误(没有传到前台绑定类)
  14. 51nod 1682 中位数计数
  15. Java基础:Java的四种引用
  16. eclipse创建的maven项目,pom.xml文件报错解决方法
  17. 原生js移除或添加样式
  18. SAP MM ME81N PO Value Analysis报表中Net Value 为负数是怎么回事?
  19. nodejs 支付宝app支付
  20. Nancy的基本用法

热门文章

  1. CDR发展史-CorelDRAW经历了哪些版本?
  2. 初见UDP_Server
  3. gcp – 源于CP的高级命令行文件拷贝工具
  4. php 密码hash加密
  5. Linux下pyftplib简单的脚本
  6. ElasticSearch启动报错,bootstrap checks failed
  7. PHP下的异步尝试二:初识协程
  8. mybatis 按照条件查询
  9. javascript-datatable错误提示
  10. mycat的配置和学习