爲網站添加emoji表情的支持

  • 項目框架
    • React.js + webpack + ES6 + Jquery
  • 需求描述
    • 使用客戶端的用戶經常喜歡發emoji表情,而在瀏覽器打開網頁版的時候,emoji表情不能正常顯示。在chrome下,emoji表情顯示的是黑白的線框表情。
    • 所以須要經過前端來實現全部瀏覽器的emoji表情顯示支持。
  • github上關於emoji的開源方案的嘗試
twemoji

Twitter的開源項目 http://twitter.github.io/twemoji ,是目前應用最普遍的,不少其它的開源方案都是基於它來實現的。前端

項目主頁  https://twemoji.maxcdn.com/react

經過script標籤加一個js文件就可使用twemoji了。webpack

twemoji.parse函數既能夠處理文本(將文本中的emoji的code轉變爲相應的img標籤),git

也能夠處理DOM(經過document.createDocumentFragment()將現有的DOM中的emoji code轉變爲img標籤,再經過appenchild加載到頁面上)。程序員

問題:twemoji對DOM的操做不適合React框架,並且只能在window.onload以後執行;github

         服務器是在國外,表情的圖片加載的比較慢,js有放到cdn上的版本就會好一些。web

最後我選用了twemoji的處理文本的方案。以後會考慮將js作些修改,把js和表情圖片放到網站服務器上提升請求速度。chrome

附加一篇簡易的使用教程 https://blog.farrant.me/adding-emoji-support-to-any-website/npm

emojify

MIT的開源項目 http://hassankhan.github.io/emojify.js/瀏覽器

一樣是js模塊,可是表情包使用的是一整張大的sheet,而不是分別請求單個表情。一整張真的很大啊!

有多個不一樣版本表情包能夠切換

具體使用我沒有多作了解

react-emoji

https://github.com/banyan/react-emoji   https://www.npmjs.com/package/react-emoji

用於React框架的npm moudle

有兩個版本的表情包

我在嘗試使用的時候發現瞭如下問題:

須要經過Class的mixins屬性來使用這個模塊,而在ES6的class寫法中是不支持mixins,所以放棄了這個方案

 

react-emojify

https://github.com/pladaria/react-emojione  https://www.npmjs.com/package/react-emojify

MIT出品

這是一個支持React ES6的npm moudle

感受這個還不錯,之後能夠更深刻的瞭解和試用一下

更多類型的emoji開源項目

https://github.com/showcases/emoji

還有一個程序員哥哥本身把twemoji應用到react的方案 https://blog.datawallet.io/emojis-in-react-d733d3ae120b#.mxsnegimp

react-easy-emoji  https://github.com/appfigures/react-easy-emoji#readme 感受也不錯

相關文章
相關標籤/搜索