Emoji 實(shí)戰(zhàn)問題：iOS王带，Android填帽，Server
2016-05-27 11:34?編輯：?lansekuangtu?分類：iOS開發(fā)?來源：lu5914018 投稿
10?15960
招聘信息：
Android / iOS / Web / Backend 資深開發(fā)工程師
前言
關(guān)于emoji麸折，有的同學(xué)會很奇怪，為什么要特意寫這個(gè)，原生的本來不就支持了emoji輸入以及顯示嗎罗侯？的確清笨，原生的控件都支持emoji的顯示以及輸入月杉。但是有的需求一旦進(jìn)入了開發(fā)階段，你就會發(fā)現(xiàn)并不是那么簡單的一件事情抠艾。
Server端：
由于server一開始并不支持emoji苛萎，現(xiàn)在你post含有emoji的數(shù)據(jù)到server，server會出現(xiàn)異常检号，主要是server的mysql開始的時(shí)候沒有定義4位的字段腌歉，varchar都是3位的(普通的字符串或者表情都是占位3個(gè)字節(jié)，所以utf8足夠用了齐苛，但是移動端的表情符號占位是4個(gè)字節(jié)翘盖，普通的utf8就不夠用了，為了應(yīng)對無線互聯(lián)網(wǎng)的機(jī)遇和挑戰(zhàn)凹蜂、避免 emoji 表情符號帶來的問題馍驯、涉及無線相關(guān)的 MySQL 數(shù)據(jù)庫建議都提前采用 utf8mb4 字符集，這必須要作為移動互聯(lián)網(wǎng)行業(yè)的一個(gè)技術(shù)選型的要點(diǎn))玛痊。
Android端：
大家都知道汰瘫，Android和iOS的表情顯示是不一樣的(Android的更萌，不信去試試)卿啡，據(jù)說Android N的推出使Android的emoji更加像iOS的了吟吝。圖不同編碼相同倒不是什么問題，致命的是我們需要做得和微信那樣颈娜，emoji表情保持一致性剑逃，而且Android里面的輸入法(例如搜狗)鍵盤顯示的是iOS樣式的(emoji最原始樣式)浙宜，想一下如果用戶輸入的和看到的是不一樣的會是什么樣的體驗(yàn)？所以我們這里必須拿emoji出來處理蛹磺！而且和iOS一樣需要做過濾處理粟瞬！這里的過濾處理主要是過濾掉iOS8.3推出的膚色。但是本文提到的Android庫里面包含了膚色萤捆，所以如果Android需要顯示膚色的話裙品，可以不用過濾，對了俗或，就算你可以顯示帶膚色的emoji市怎，你是輸入不了的，因?yàn)锳ndroid的輸入法不支持輸入帶膚色的emoji辛慰。更多處理請看下面区匠。
iOS端：
別以為iOS端自帶了emoji就輕松，因?yàn)樾枰龊蛃erver端帅腌，Android的一致性驰弄，我們這里需要將emoji轉(zhuǎn)化為共用的字符(下文會知道他們是以兩個(gè)“:”來定義的例如 :emoji:)，除開兼容速客，我們還要做emoji的過濾戚篙！emoji的列表不是一成不變的！在不同的版本蘋果都會推出新的emoji溺职，也就是說emoji是動態(tài)的岔擂！參考微信朋友圈的實(shí)現(xiàn)我們就知道，在一些低版本的設(shè)備中不支持高版本的emoji的話微信會直接過濾掉辅愿！所以我們這里也需要做過濾處理智亮！更多處理請看下面。
走過的彎路
參考文獻(xiàn)：iOS & Android:
解決方案：
https://github.com/arvida/emoji-cheat-sheet.com/
https://github.com/quxionglie/emoji-convertor
http://blog.csdn.net/qdkfriend/article/details/7576524
http://www.cnblogs.com/YungMing/p/5080437.html
emoji過濾（用于缺失定義的emoji）:?http://www.pigg.co/emoji-filter.html
iOS:
http://jeason.gitcafe.io/blog/iOS+Anroid+Emoji/
http://cenalulu.github.io/linux/character-encoding/
emoji編碼范圍：http://blog.csdn.net/liujinlongxa/article/details/44207003
ANDROID:
https://github.com/rockerhieu/emojicon
SERVER：
升級數(shù)據(jù)庫：https://segmentfault.com/a/1190000000616820
用于前端網(wǎng)頁顯示emoji：https://github.com/pepibumur/emojize
EMOJI列表：
http://apps.timwhitlock.info/emoji/tables/unicode
http://www.emoji-cheat-sheet.com/
https://en.wikipedia.org/wiki/Emoji
http://punchdrunker.github.io/iOSEmoji/table_html/index.html
工具庫：(GITHUB上STAR最多的)
iOS：
https://github.com/valeriomazzeo/NSString-Emoji
https://github.com/diy/NSStringEmojize/
ANDROID：
https://github.com/rockerhieu/emojicon
MAC OS X 查看所有EMOJI圖片的方法：
快捷鍵：control + command + 空格
彈出如下圖：
點(diǎn)擊左上角設(shè)置按鈕–>自定義列表—>勾選Unicode—>點(diǎn)擊完成点待。
就可以看到完整emoji列表和對應(yīng)的Unicode碼或者UTF-8碼了阔蛉。
遇到的問題：iOS端從iOS8.3開始出現(xiàn)的emoji膚色
最終的解決方案
Android：
使用工具：https://github.com/rockerhieu/emojicon
安卓的同學(xué)比較懶，沒有寫文字的習(xí)慣癞埠。故這里我僅貼出工具状原。
iOS：
使用工具庫：https://github.com/valeriomazzeo/NSString-Emoji
注意：
這個(gè)工具里面的emoji字符表不全，需要自己新增一些進(jìn)去苗踪。
這個(gè)工具里面沒有iOS8.3開始Apple新增的emoji膚色選擇颠区！
沒有使用另外一個(gè)cheat-emoji官方工具的原因是官方工具只是將“:test:”等字符的轉(zhuǎn)化為emoji，但是卻缺少了將emoji反轉(zhuǎn)成“:test:”的方法Ｍú毕莱！。想想也是醉了！
我這里給出膚色對應(yīng)的編碼：
1
2
3
4
5
6
7
8
9
//by?Vbon?haha
//here?is?emoji?color?unicode?sinces?iOS8.3
//default?is?not?containt?color?unicode?which?look?like?yellow?color?sinces?iOS8.3
//Before?iOS8.3?emoji?is?no?color?unicode?containt?and?look?like?white?color.
@"??":?@":skinColor1:",//white?????????????-->?Unicode:?U+1F3FB
@"??":?@":skinColor2:",//white&littleBrown?-->?Unicode:?U+1F3FC
@"??":?@":skinColor3:",//white&deepBrown???-->?Unicode:?U+1F3FD
@"??":?@":skinColor4:",//brown?????????????-->?Unicode:?U+1F3FE
@"??":?@":skinColor5:"http://black?????????????-->?Unicode:?U+1F3FF
注意一點(diǎn)：emoji的不斷新增朋截！
iOS&Android的同學(xué)注意了蛹稍！
由于emoji會不斷新增，也就是說emoji的Unicode范圍會一直增大部服！所以需要做一下處理唆姐，對于不在自己代碼定義的范圍內(nèi)的emoji需要過濾掉！例子：微信朋友圈廓八。
小道消息稱Unicode協(xié)會將會在明年新增多150個(gè)emoji奉芦，具體時(shí)間還沒定。新增表情對于大家的使用時(shí)很爽剧蹂！(例如iOS9后多了個(gè)中指的表情)声功。但是對于我們程序本身來說就意味著必須要做emoji字庫和對應(yīng)的key不全的問題的處理！就算以后他新增1000個(gè)我也無所謂了国夜！因?yàn)槲沂前凑瘴⑿诺淖龇ǎㄖ苯雍雎詻]有的emoji减噪，不信你試試在iOS端發(fā)????這個(gè)emoji，去Android設(shè)備看看车吹，你就知道了，微信是直接過濾掉的４妆铡）窄驹。下面我直接點(diǎn)，貼代碼证逻，大家直接拿去用乐埠。
注意：這里的代碼是結(jié)合上面的工具來用的。
Android：
工具：https://github.com/rockerhieu/emojicon
修改工具里面的編碼：
安卓的同學(xué)需要特別注意兩點(diǎn)：
這個(gè)emoji庫是通過不斷對比map里面的數(shù)據(jù)來查詢的囚企，會導(dǎo)致在列表中的多emoji時(shí)滾動會很卡丈咐。解決辦法：在得到列表json數(shù)據(jù)的時(shí)候，在映射的時(shí)候轉(zhuǎn)碼成emoji龙宏，并將該emoji直接放入實(shí)體棵逊。這樣就避免了滾動list的時(shí)候轉(zhuǎn)碼帶來的卡頓！
在輸入emoji的地方(發(fā)表內(nèi)容)银酗，連續(xù)輸入多個(gè)emoji會卡頓甚至卡死辆影，原因同上衣屏，因?yàn)檫@個(gè)庫是對比查找的祖很，默認(rèn)的算法是假如有1000個(gè)emoji，那么就1個(gè)emoji的key對比1000次遇西，而輸入的時(shí)候由于每次輸入都進(jìn)行了轉(zhuǎn)碼灭衷，所以輸入一個(gè)emoji就要對整段text進(jìn)行emoji對比次慢。性能嚴(yán)重下滑！解決辦法是改變自己的算法，只轉(zhuǎn)碼新輸入的那個(gè)字符迫像。
總的來說就是特殊場景特殊處理拭抬，看自己的解決問題的能力了！
iOS：
工具：https://github.com/valeriomazzeo/NSString-Emoji
修改工具里面的編碼：
需要注意的幾種情況：
上傳字符串前需要將字符串使用工具轉(zhuǎn)碼侵蒙。
用戶輸入字符串的時(shí)候看情況是否需要轉(zhuǎn)碼造虎。
如果有字?jǐn)?shù)限制的！注意emoji轉(zhuǎn)碼帶來的字?jǐn)?shù)問題喲纷闺！
安卓的同學(xué)注意了算凿！上面推薦的工具是十分強(qiáng)大的！里面包括了iOS的膚色emoji犁功。需要和iOS端溝通處理氓轰。例如我這里用skinColor1-5來區(qū)分除了默認(rèn)顏色(白種人)的之外的5中顏色。安卓也是需要定義這幾種編碼的浸卦！用于過濾或者顯示不同膚色署鸡！
（更新：2016.5.12）
測試今天發(fā)來了bug，說是有的字符沒過濾掉限嫌。我看了一下的確靴庆，在iOS9.3開源的代碼中沒有添加進(jìn)去一些新的emoji。而且值得注意的是：新增的emoji中竟然出現(xiàn)了新的[emoji語法]Ｅ健Ｂ恪！新增了同性之間的emoji和家庭的emoji有著不同的語法稚叹！一個(gè)emoji可能有很多個(gè)編碼焰薄。
例如：“????????????” 這個(gè)emoji表示的是女女之間的同志關(guān)系。
你會發(fā)些這一類emoji竟然連控制臺也打印不出來扒袖！(我的系統(tǒng)是最新的10.11.4)塞茅。
打開emoji列表，我們可以看到他的編碼語法季率。
總共由6個(gè)4字節(jié)的編碼組成野瘦！比以前的最多3個(gè)4字節(jié)編碼翻了一倍！
細(xì)心的同學(xué)可以在上面控制臺的圖片里面發(fā)現(xiàn)一些端倪蚀同，上面6個(gè)4字節(jié)組成的實(shí)際上可以用已經(jīng)有的emoji進(jìn)行翻譯缅刽！像“????????????”翻譯過來就是:woman::heart::woman:，看是不是通俗易懂蠢络？至于中間的“衰猛？”號我們可以看回emoji列表里面的字節(jié)是什么，可以知道的是“U+200D”這樣的東西刹孔。這樣就好辦了啡省，我們可以將它轉(zhuǎn)換成“U0000200D”娜睛，那樣程序就知道了。由于安卓沒有這樣新增的圖片我們只好過濾掉這樣的東西了卦睹。在文件中新增key-value如下：
這樣就可以完美過濾了畦戒。
我在新增iOS9.3 emoji的過程中發(fā)現(xiàn)文件中的emoji國旗沒有多少支持。
對比系統(tǒng)emoji列表可以在文件中新增進(jìn)去结序。
這樣就可以將app的emoji支持到最新的iOS9.3了障斋。
為了大家方便我將文件開源到這里：https://github.com/vbonluk/iOS_Emoji
文件隨著系統(tǒng)升級及時(shí)更新，歡迎star徐鹤。謝謝
