概述

最近在工作中遇到了移动端emoji的显示问题，于是查找了一些相关资料，试验了一番，把心得记录下来，供以后开发时参考，相信对其他人也有用。

参考资料：

为网站添加emoji表情的支持

思路

在页面上使用emoji主要推荐2个库：emojify.js和emoji。

其实所有emoji库的思路都是，用js找出字符串里面表示emoji的字符串，然后将它替换为img标签即可，也可以把它替换为span标签，然后用雪碧图的方式引入emoji图片。

下面来介绍一下这两个库的使用方法。

emojify.js

Github链接：emojify.js

首先去它的github下载它的css，js和images，然后运用它提供的replace这个api来把emoji字符串替换为图片。示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <link rel="stylesheet" href="emojify.min.css" />

</head>

<body>

  <div id="emoji"></div>

  <script src="emojify.min.js"></script>

  <script>

    var a = emojify.replace('I am happy :+1:');

    document.querySelector('#emoji').innerHTML = a;

  </script>

</body>

</html>

当然css和js也可以使用它提供的cdn：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/css/basic/emojify.min.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/js/emojify.min.js"></script>

图片也可以使用它的cdn，只需要在setConfig这个api里面设置图片的cdn路径即可：

emojify.setConfig({img_dir : 'https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic'});

这个库的优点是，图片比较全，功能比较多，star数比较高。但是有一个很严重的缺点：就是只能识别双引号包裹的emoji表情，不能识别Unicode，Utf-16等形式的emoji表情。

emoji

Github链接：emoji

这个库相比上个库，优点是能够识别Utf-16形式的emoji表情，缺点是里面的emoji图片不够完整，有些emoji图片识别不了（我看源码发现js的识别代码还不完整），api就只有一个，而且好久都没有维护了。

使用方法也很简单，示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <link href="http://cdn.staticfile.org/emoji/0.2.2/emoji.css" rel="stylesheet" type="text/css" />

</head>

<body>

  <div id="emoji"></div>

  <div id="haha">												


											
前端页面使用emoji的更多相关文章
	

    
								
  1. 用github来展示你的前端页面吧
		
    前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才能访问?对于以上问题我都会回答:用github来展示你的前端页面吧. 工欲善其事,必先 ...
    
		
    2. 
						
  2. web前端页面性能优化
		
    影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...
    
		
    3. 
						
  3. 使用原生ajax访问后台数据并将其展现在前端页面中（小菜鸟自己整理玩的，大神勿喷）
		
    首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wam ...
    
		
    4. 
						
  4. 前端页面使用 Json对象与Json字符串之间的互相转换
		
    前言 在前端页面很多时候都会用到Json这种格式的数据,最近没有前端,后端的我也要什么都要搞,对于Json对象与Json字符串之间的转换终于摸清楚了几种方式,归纳如下! 一:Json对象转换为json ...
    
		
    5. 
						
  5. Python之路-(js正则表达式、前端页面的模板套用、Django基础）
		
    js正则表达式 前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m  ...
    
		
    6. 
						
  6. web前端页面项目经验总结
		
    项目时间:2016年4月5日--4月9日项目名称:阿七果子园web前端页面项目内容:    1.HTML5+CSS+JavaScript(banner+timer)+JQuery(small_bann ...
    
		
    7. 
						
  7. 移动前端页面与Chrome的远程真机调试
		
    一年不见,博客园都长草啦...... 前几日刚入手新手机小米5,系统真心流畅呀.为啥要买小米5呢,因为要提高生产力呀,好好玩移动前端开发呀哈哈哈 那么问题来了,要怎么调试手机上的前端页面呢? 很久很久 ...
    
		
    8. 
						
  8. web前端页面性能优化小结
		
    影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...
    
		
    9. 
						
  9. html-javascript前端页面刷新重载的方法汇总
		
    记得我在兴安得力实习要转正的时候,我领导象征性的给我出了一套测试题目,里面就有js闭包和页面刷新等题目.今天把很久之前的测试题目之一,js页面刷新的方法以及页面自动刷新跳转和返回上一页和下一页等方法总 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 通过PHP调用微信JSSDK实例
			
    JSSDK使用步骤: 1. 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 2. 采用http GET方式请求获得access_token(有效期7200秒). 3.  ...
    
			
    2. 
						
  2. MyEclipse 编译错误     web项目中的 js,jsp报错  更改
			
    搜索   validation   语法检测 必须 选定一个  不然不编译
    
			
    3. 
						
  3. CNA, FCoE, TOE, RDMA, iWARP, iSCSI等概念及 Chelsio T5 产品介绍 转载
			
    CNA, FCoE, TOE, RDMA, iWARP, iSCSI等概念及 Chelsio T5 产品介绍 2016年09月01日 13:56:30 疯子19911109 阅读数:4823 标签:  ...
    
			
    4. 
						
  4. debian9使用国内源安装docker以及一些使用方法
			
    debian9使用国内源安装docker以及一些使用方法   首先, 我的环境是debian, 容器是centos debian 扔源 # deb-src [arch=amd64] https://m ...
    
			
    5. 
						
  5. node.js 线程调试配置
			
    { // 使用 IntelliSense 了解相关属性. // 悬停以查看现有属性的描述. // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linki ...
    
			
    6. 
						
  6. QTcpSocket 相关知识总结
			
    1.  连接服务器 m_tcpSocket->connectToHost("127.0.0.1", 9877); connected = m_tcpSocket->wa ...
    
			
    7. 
						
  7. python 数据可视化 -- 清理异常值
			
    中位数绝对偏差(Median Absolute Deviation, MAD)用来描述单变量(包含一个变量)样本在定量数据中可变性的一种标准.常用来度量统计分布,因为它会落在一组稳健的统计数据中,因此 ...
    
			
    8. 
						
  8. 2019.03.09 bzoj4999: This Problem Is Too Simple！（树链剖分+线段树动态开点）
			
    传送门 题意:给一颗树,每个节点有个初始值,要求支持将i节点的值改为x或询问i节点到j节点的路径上有多少个值为x的节点. 思路: 考虑对每种颜色动态开点,然后用树剖+线段树维护就完了. 代码: #in ...
    
			
    9. 
						
  9. C++智能指针 auto_ptr、shared_ptr、weak_ptr和unique_ptr
			
    手写代码是理解C++的最好办法,以几个例子说明C++四个智能指针的用法,转载请注明出处. 一.auto_ptr auto_ptr这是C++98标准下的智能指针,现在常常已经被C++标准的其他智能指针取 ...
    
			
    10. 
						
  10. 直播流RTMP 知识
			
    分享直播相关知识点: http://blog.csdn.net/kingroc/article/details/50839994 #!/bin/bash# Order Finish Startup#  ...
    
			
    11.