概述
最近在工作中遇到了移动端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的更多相关文章
-
用github来展示你的前端页面吧
前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才能访问?对于以上问题我都会回答:用github来展示你的前端页面吧. 工欲善其事,必先 ...
-
web前端页面性能优化
影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...
-
使用原生ajax访问后台数据并将其展现在前端页面中（小菜鸟自己整理玩的，大神勿喷）
首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wam ...
-
前端页面使用 Json对象与Json字符串之间的互相转换
前言 在前端页面很多时候都会用到Json这种格式的数据,最近没有前端,后端的我也要什么都要搞,对于Json对象与Json字符串之间的转换终于摸清楚了几种方式,归纳如下! 一:Json对象转换为json ...
-
Python之路-(js正则表达式、前端页面的模板套用、Django基础）
js正则表达式 前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../ 用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...
-
web前端页面项目经验总结
项目时间:2016年4月5日--4月9日项目名称:阿七果子园web前端页面项目内容: 1.HTML5+CSS+JavaScript(banner+timer)+JQuery(small_bann ...
-
移动前端页面与Chrome的远程真机调试
一年不见,博客园都长草啦...... 前几日刚入手新手机小米5,系统真心流畅呀.为啥要买小米5呢,因为要提高生产力呀,好好玩移动前端开发呀哈哈哈 那么问题来了,要怎么调试手机上的前端页面呢? 很久很久 ...
-
web前端页面性能优化小结
影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...
-
html-javascript前端页面刷新重载的方法汇总
记得我在兴安得力实习要转正的时候,我领导象征性的给我出了一套测试题目,里面就有js闭包和页面刷新等题目.今天把很久之前的测试题目之一,js页面刷新的方法以及页面自动刷新跳转和返回上一页和下一页等方法总 ...
随机推荐
-
使用Android应用调用Web Service
Java本身提供了丰富的Web Service支持,比如Sun公司指定的JAX-WS 2规范,还有Apache开源组织所提供的Axis1.Axis2.CXF等,这些技术不仅可以用于非常方便地对外提 ...
-
Spring的BeanFactoryPostProcessor和BeanPostProcessor
转载:http://blog.csdn.net/caihaijiang/article/details/35552859 BeanFactoryPostProcessor和BeanPostProces ...
-
Unity3D入门(一)：环境搭建
1.Unity3D 目前最新正式版本是4.2.1f 官网下载,以前的版本安装时候需要序列号激活,新版本4.2.1f 不需要,完全免费,但发布的时候需要许可证 2.要学习的同学,下载频道可以找到破解补 ...
-
JDBC基础一
JDBC:java database connectivity SUN公司提供的一套操作数据库的标准规范. JDBC与数据库驱动的关系:接口与实现的关系. JDBC规范(掌握四个核心对象): Driv ...
-
Dataset
1,if(ds == null) 这是判断内存中的数据集是否为空,说明DATASET为空,行和列都不存在!! 2,if(ds.Tables[0].Count == 0) 这应该是在内存中存在一个DAT ...
-
Spark RDD概念学习系列之rdd的依赖关系彻底解密（十九）
本期内容: 1.RDD依赖关系的本质内幕 2.依赖关系下的数据流视图 3.经典的RDD依赖关系解析 4.RDD依赖关系源码内幕 1.RDD依赖关系的本质内幕 由于RDD是粗粒度的操作数据集,每个Tra ...
-
构造方法，this关键字，static关键字，封装，静态变量
1.构造方法 构造方法是一种特殊的方法,是专门用于创建/实例化对象的方法. 构造方法根据是否有参数分为两类:1.无参构造方法 2.有参构造方法 1.1无参构造方法 无参构造方法就是构造方法中没有参数 ...
-
Linux内核中的printf实现
1 #ifndef __PRINT_H_ 2 #define __PRINT_H_ 3 4 void print(char* fmt, ...); 5 void printch(char ch); 6 ...
-
[leetcode]23. Merge k Sorted Lists归并k个有序链表
Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. I ...
-
Oracle PL/SQL，游标，过程
1.PL/SQL 语法相关 -- SQL 语言只是访问,操作数据库的语言,而比并不是程序设计语言,因此不能用于程序开发. -- PL/SQL 是在标准SQl语言上进行过程性扩展后形成的程序设计语言, ...