這段時間在做移動端的開發, 有一個功能就是發表評論,其實這個功能本身是比較簡單的, 但是在提測是的時候QA給哦提了一個bug,說輸入手機自帶的emoji表情傳送失敗了.我就奇怪了,emoji表情也是文字內容,怎麼就傳送失敗呢,我通過Chrome除錯之後發現,向後臺傳送的時候就顯示失敗了,也就是後臺沒有存進去,之後我就去找後臺聯調, 查閱資料之後發現,emoji所佔的位元組數為4個位元組,就是js的編碼導致的問題,後臺資料庫一般設定的是UTF-8儲存形式,儲存不進去.
那麼怎麼解決呢, 有好多辦法來解決,前端後臺都可以解決
1. 後臺更改資料庫格式
執行sql語句將資料庫的編碼格式改成utf8mb4 儲存形式,這種4位元組的UTF-8儲存形式可以完美的相容以前的3位元組的儲存形式,並且可以直接儲存emoji表情,這是最完美的解決方案.
2. 使用base-64編碼
列如可以使用base-encode來編碼emoji表情之後儲存在UTF-8之中,取出的時候decode一下就可以了,但是我沒有試過
3. 幹掉emoji表情
暴力幹掉,估計PM不會同意這麼做
4. 前端處理
就是通過第三方外掛, 將輸入的emoji轉為span標籤,並賦上相應的class,找一大堆emoji,表情圖片,向後臺傳送的時候就是傳送span表情,這個後臺當讓就可以儲存了, 這樣做的好處就在所有的裝置上展示的都是一樣的,不會產生歧義,當然缺點就是emoji表情在更新,有可能你所找到的emoji表情圖片庫不全,有的表情無法展示到頁面上,這個就需要定期維護
推薦一個比較好用的外掛庫 github.com/node-module…
使用方法 先下載emoji外掛
<link href="http://cdn.staticfile.org/emoji/0.2.2/emoji.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.staticfile.org/emoji/0.2.2/emoji.js"></script>複製程式碼映入這兩個程式碼庫,這個外掛完全不需要依賴jquery庫
接下來就更加簡單了
var text = document.querySelector(`emojiText`);
cosnoel.log(jEmoji. unifiedToHTML(text.value))複製程式碼如果使用了commenJS規範
$ npm install emoji
var emoji = require(`emoji`);
console.log(`?`, emoji.unifiedToHTML(`?`));複製程式碼