396
基於phonegap開發app的實踐
app開發告一段落，期間遇到不少問題，寫篇文章記錄一下。
為蝦米要用phonegap
開發app，至少要考慮android和ios兩個版本吧，android偶可以應付，ios表示完全木有接觸過，於是時間成本、開發成本上去了。phonegap則解決了這個問題，而且對po主而言，用web開發的方式來搞app很爽啊有木有！
當然，用之前還是要調研下，基於phonegap的app有木有成功案例。大公司裏騰訊的qq郵箱ios版，豆瓣的豆瓣音樂人都是基於phonegap。重點看了看豆瓣音樂人，很無恥的反編譯了一下apk，居然代碼都木有壓縮過 
，正好方便了偶研究。
豆瓣音樂人的實踐
從體驗上講，豆瓣音樂人和native的app還是有差距，首先，點擊tab有明顯的延遲，另外，豆瓣音樂人整個頁麵隻有一個view，即下圖中的frame（view可以理解為app的一個界麵，每個app看成是由很多個視圖界麵組成的），視圖之間的切換效果，是先在frame下麵再創建一個新frame，裏麵是將要切換進來的視圖代碼，然後用css3 transform做視圖切換動畫，動畫結束之後，把原來的frame刪除。也就是，在頁麵中保證隻存在一個frame。
這麼做應該是基於性能考慮，但是犧牲了部分體驗，比如一個列表，滾動到第3屏，點到列表詳情，再返回，視圖不是停留在點進詳情頁之前的位置，而是回到了頂部。
豆瓣音樂人其實還是以瀏覽為主的app，功能比較輕，而我們的app則是包含了發帖、傳圖片等功能，表示鴨梨很大，但值得嚐試。
技術方案
整體技術方案是：
phonegap負責和底層OS通信，調用攝像頭、獲取網絡狀態等
backbone+underscore做路由以及視圖渲染
iscroll做布局
css3做動畫效果
路由及視圖管理
整個app其實是個single page application（SPA），對於SPA來說，路由和視圖的管理很重要，我用了backbone+underscore來做這個事情。
通過backbone的router實現不同hash值對應不同視圖，視圖裏用到的模版用underscore。
app布局
典型的app布局如下圖，header和footer固定，中間內容可以滾動，第一個想到的就是用position:fixed，但是po主google一下，android 2.x，ios5以下不支持position:fixed，然後po主看到了業界比較推薦的iscroll，試了些demo，po主就決定用iscroll了。
用iscroll有以下幾點好處：
1、很容易實現app的布局，而且每個視圖是用的絕對定位，這樣做視圖切換動畫的時候很方便
2、下拉刷新，上拉加載也一並實現了
3、iscroll自帶左右滑動的手勢功能
弊端：
1、滾動區域裏圖片多了，低端機卡爆- -
2、iscroll引發的“fake click”問題
其他倒沒有什麼弊端了
視圖切換
考慮到體驗問題，沒有采用豆瓣的做法， 其實本來我是想用angularJs而不是backbone+underscore，但是angularJs的視圖切換原理也是先append一個frame，動畫結束再刪掉這個frame，這種做法一是無法保留原有視圖的狀態，第二視圖渲染是需要時間的，導致動畫切換時，下一個視圖會有很短暫的空白時間。
所以我的做法是，多個視圖並存，要展示哪個視圖就加上current，並調用計算視圖相對位置和滑動動畫的函數。
屏幕大小及分辨率適配
屏幕大小：布局要自適應不同的屏幕大小，所以固定寬度神馬的盡量少用，改用百分比
屏幕像素密度：主要影響到css裏引用的圖片，以及頁麵中展示的圖片（即img標簽的圖片），豆瓣音樂人的做法是對不同密度提供不同的圖片，但是po主比較懶，隻針對像素密度為2的做了一套，比如有個叫icon的div，我們可以這樣
.icon{
width:20px;
height:20px;
background: url(‘../images/icon.png’) no-repeat 0 0;
background-size: contain;
}
icon.png的大小其實是40*40，這樣雖然有點浪費資源，但是減輕了工作量啊有木有 
對於頁麵中的img標簽，提供的圖片也是2倍展示寬度的，這個倒是浪費部分用戶流量了- -
其他
dom操作和事件還是用的jquery，不要問偶為什麼- -
關於開發中遇到的各種問題，請看下一篇
參考文獻
最後更新：2017-04-03 05:39:04