概述

最近在工作中遇到了移动端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. linux服务器使用Jenkins+gradle+git打apk包，报错Gradle build daemon disappeared unexpectedly (it may have been killed or may have crashed)
			
    linux服务器使用Jenkins+gradle+git打apk包,遇到的错误Gradle build daemon disappeared unexpectedly (it may have bee ...
    
			
    2. 
						
  2. linux下编译protobuf(可以编译成pb.go)
			
    编译前需要安装gtest $ cd googletest $ cmake -DBUILD_SHARED_LIBS=ON . $ make $ sudo cp -a include/gtest /hom ...
    
			
    3. 
						
  3. Linux初次修改环境变量
			
    对于刚刚从windows系统跳到Linux的小白们,相信多少都会出现一些强迫症,希望能将Linux的Terminal能调出点色彩,让其好看些.之前自己也不知道怎么按着百度的教程操作完成的,直到组里新来 ...
    
			
    4. 
						
  4. 记一次Struts2 内核问题分析解决
			
    问题场景描述 生产环境某个处理耗时比较长的接口,吞吐能力极差.客服反馈此功能长期处于毫无响应状态. 具体表现 系统启动后第一次调用耗时极慢,长时间不响应.紧随之后发起的请求也同时没有响应. 等待第一次 ...
    
			
    5. 
						
  5. 对js原型及构造函数的相关理解
			
    一.js中的原型创建(声明)一个函数,浏览器在内存中会创建一个对象.每个函数都默认会有一个属性prototype指向了这个对象,就是说prototype的属性的值就是这个对象.此对象就是该函数的原型对 ...
    
			
    6. 
						
  6. laravel 默认所有请求带session解决办法
			
    laravel  app/Http/Kernel.php protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware\Encr ...
    
			
    7. 
						
  7. FFMPEG增加和提取字幕流
			
    转自 https://www.cnblogs.com/satng/p/5514683.html 防抽复制一遍 增加字幕流ffmpeg -i video.avi -i sub.ass -map 0:0  ...
    
			
    8. 
						
  8. AIX X11卡顿严重
			
    在AIX上安装数据库,使用xshell开启dbca,发现卡顿严重,数据包也时断时续,排除掉网络问题,发现字符集采用的是中文,发现ftp服务业异常,将字符集修改成英语,重启机器,问题解决: 修改如下:  ...
    
			
    9. 
						
  9. lwip协议栈学习---udp
			
    书籍:<嵌入式网络那些事-lwip协议> udp协议的优点: 1)基于IP协议,无连接的用户数据报协议,适用于传送大批量数据, 2)实时性比较高,适用于嵌入式网络 发送函数:udp_sen ...
    
			
    10. 
						
  10. DOM对象和jQuery对象的转换
			
    <script type="text/javascript"> //js的页面加载事件 window.onload = function () { //获取DOM对象  ...
    
			
    11.