基於phonegap，html5，ratchet，handlebars等技術的微表情APP

該app是由不少有意思的微表情構成的，支持40種表情，而且每種表情都有不一樣的狀態，主要有搜索表情，分享表情，搖一搖換表情等功能。目前只支持安卓版。由前期構思，到技術選型，到界面設計，到編碼測試，再到發佈，過程仍是花了很多心思...

 

app截圖

前期構思

目的：作一個關於表情方面的有意思的app；鍛鍊和提高本身的各方面能力，從構思到設計到編碼到測試，使本身更清晰整個開發流程。因而尋找市面上的一些表情app，例如臉萌啥的，對比了下一些功能點和差別化….IEmoji也就所以誕生了，因爲本人技術和經驗有限，因此設計的功能點比較簡單，主要有一套表情，描述不一樣狀態的表情，以下列英文表情所示：’blink’, ‘chill’, ‘chuckle’, ‘confused’, ‘cry’, ‘drooling’, ‘drowsy’, ‘embarrassed’, ‘flushed’, ‘grimace’, ‘grin’, ‘hellooo’, ‘hotkiss’, ‘hypnotized’, ‘inthedark’, ‘laugh’, ‘like’, ‘onfire’, ‘panic’, ‘pig’, ‘pleased’, ‘pucker’, ‘puke’, ‘scold’, ‘scowl’, ‘scream’, ‘sick’, ‘silence’, ‘skull’, ‘sleep’, ‘smile’, ‘smug’, ‘sneer’, ‘sniffle’, ‘sob’, ‘sobeye’, ‘strive’, ‘surprised’, ‘sweating’, ‘wantmoney’, ‘wink’，提供表情搜索，本地下載，社會化分享，搖一搖隨機換表情（這個是比較有意思的）等功能，服務器端用戶如何交互的功能沒有作，這個花費的時間和精力比較大，而且像臉萌等一些拼臉軟件也沒有作。關於素材的準備，這個是比較蛋疼的，因爲本身沒有設計功底和細胞，主要是用一個php微表情生成系統，能根據定義的一些規則，根據臉部不一樣部位的組合，生成一套表情，這個是比較有意思的哈。圖片主要採起svg圖，體積小，縮放不失真，圖片外部連接下載主要託管到github服務器上，要想搭建本身的圖片服務器，no money no talk。說了這麼多，感受尚未說到重點，哎，本身的語言表達能力愈來愈差了。。。

技術選型

PhoneGap主要依賴於webkit瀏覽器的內核解析，因此它的運行效率不及於原生。可是爲了提升APP性能，選擇一個小而靈活的框架就顯得尤其重要。其實phonegap能夠和不少移動框架搭配，可是前期不考慮合適的框架，後期維護的成本就高，坑就越多，來看下如下的一些框架狀況：

jQuery Mobile：資源載入慢，流量損耗大

Sencha Touch：比較舊，學習成本相對較高，也比較笨重

jqmobi：Intel的app框架，比jQuery Mobile體積小，兼容性也不錯

ratchet ui：輕量級ui，上手比較快

handlebarsjs：前端模板引擎，是Mustache的升級版，推薦

ionic：體積小，基於html5的hybird app框架，沒用過

功能點和解決方案

在開發過程當中遇到的問題和解決方案主要有如下點，代碼就不貼了：

• 數據初始化和下拉加載：iscroll5.js，也用於局部內容滾動
• 切換頁面閃爍：定義不一樣頁面模板，根據定義的路由規則渲染模板
• 漢字轉拼音：表情搜索和中英文識別，這個還沒作
• 表情資源準備：svg矢量圖，體積小，縮放不失真，本地化和託管到github服務器上
• 社會化分享：umeng phonegap平臺，微信不支持，svg轉爲png圖
• 地理位置獲取：html5 geolocation，百度地圖api
• 圖片上傳/下載：phonegap FileTransfer插件，圖片資源是外部連接
• 安卓手機sd卡位置獲取：生成圖片保存的目錄
• 搖一搖：html5 devicemotion，phonegap accelerometer插件
• 本地存儲：localStorage？web sql？ajax json？、index db？
• 前端依賴包管理：bower
• 前端自動化構建工具：gulp

總結

其實還有不少的功能點能夠作，但時間有限，蘋果版就不搞了，先來個安卓版v1.0.0吧，app下載地址：http://pan.baidu.com/s/1i3HyRrf   github代碼（完整版）：https://github.com/hcy2367/iEmoji/

歲月安好！