【WebApp】單頁webapp應用開發總結【暫完】

（寫在開頭：優化篇大量都是傳聞，你們自行挑揀中意的看。附個學習地址，固然，我還沒看過，哈哈！尊重做者附地址：http://mobile.51cto.com/web-410291.htm）

性能體驗優化：

一、是否須要小菊花讓用戶知道 「嘿，你在傻等中」 ？

    今年在西雅圖的某個設計者大會，LukeWroblewski講到他的手機應用Polar時，說到他的團隊努力的改進了新版投票的加載速度，而後還人性化的加了等待效果展現（翻滾吧Loading），結果卻獲得了速度變慢的用戶反饋。高程們很不理解，用戶咋那麼難伺候呢，而後又發了一個把等待效果給下掉的補丁，好吧，終於有人說so quickly！

    有人說，明目張膽的用Loading展現告知客戶「你在等待」的事實，簡直就是做死。不過，我不這麼認爲。我不知道有哪一個網站進去是不須要等待的，移植到手機上也同樣。loading的過渡動畫仍是有存在的必要，只是，再以小菊花示人，不免缺少手機上的互動感。這個就須要偉大的設計師和交互師們開動腦子想更好的替代了。（反正我仍是繼續loading着。。）

二、爲按鍵添加touch狀態&去掉觸摸高亮

    :active這個高端洋氣的CSS僞類狀態在WEB頁面開發中已經很經常使用了。但惋惜的是，iOS和Android都沒有在手機端實現這個狀態。不過咱們老是有曲線救國的辦法的不是麼，找到替代的解決方案並不難，只要在JavaScript中增長下述事件就能夠監聽到:active狀態啦。

document.addEventListener("touchstart",function(){}, true)

    然後，您可能會想用CSS來添加個按鈕被按下的效果，且把該死的觸摸高亮給去掉。

    -webkit-tap-highlight-color:rgba(0,0,0,0);

    以上儘管沒有改變實際的運行速度，但它給用戶操做以直接反饋，而非300ms的空虛等待，感知性能get√。

三、利用天然手勢

    手機操做系統老是會惡劣地綁架瀏覽器上的手勢。比方說Facebook這樣的app，使用邊緣滑動會顯示導航欄。可是在Web裏Chrome就切換標籤頁了，而iOS7的Mobile Safari裏則根據歷史記錄來前進後退當前頁面……好吧，既然手勢有諸多限制，那麼哪些是可使用的呢？下文列述了四個： 

• 左右划動：左右划動還是很是強大的一個手勢，只須注意別太靠近屏幕邊緣便可。它最適合用來移動照片瀏覽啊標籤頁啊什麼的。

• 下拉更新：下拉更新是另外一個使用頻繁的手勢，經過許多JavaScript庫都能輕鬆監聽到，我以前使用的是Hook.js。

• 長按：-webkit-touch-callout: none屬性能有效禁止Mobile Safari中的長按效果。但若是換成Android，那就須要多作一點工做了。長按手勢可用於提取圖標（好比重排圖標位置、順序）與顯示更多選項（例如羣分享等）。

• 縮放：大部分人在網絡上看到一張圖，都會試着縮放扭動的手勢來看圖的細節。這裏有瀏覽器綁架手勢的另外一個例子，但情節並無那麼嚴重，就不告訴你是啥，就不告訴你是啥。要實現多點觸控手勢，能夠試試精悍的Hammer.js。它包含了不少手勢操做，也支持自定義。用手機體驗一下imgur.com的縮放或滑動手勢吧少年。（體驗了下，除了發現它是模塊化加載，沒找到上面提到的相關手勢支持。莫非是個人姿式不對？）

四、使用衝量滾動

    你是否有過在手機站點上下拉滾動條的時候，感受有很卡或很慢的狀況啊。Android3+和iOS5+支持CSS的新屬性爲overflow-scrolling，可實現衝量滾動，而後一切都變得美好起來……

    這樣的動態效果一出來，立刻就有too native的感受啦。只要在滾動條上增長下述屬性便可實現。

-webkit-overflow-scrolling:touch;

    不過這個屬性在iPhone下有個問題。在iPhone下點其頂端的狀態條是能夠返回到頁面頂端的，但衝量滾動會形成這一功能的失效。這個BUG已存在一段時間了，但直到iOS7 的Mobile Safari最新版才修復。針對它也有個不太靠譜的解決辦法，就建立一個overflow-scrolling:touch的class，當點出容器時用JavaScript去加class到容器上。

    Android4中對滾動條都有衝量滾動效果，因此徹底不須要考慮這個屬性。

    對於低版本的Android系統，會有一些備選方法。我傾向於使用Modernizer來檢測系統對衝量滾動的支持，而後修改佈局使容器溢出可見（我也不知道這是要說啥）。若是不想選上個方法，有一些JavaScript庫也可供選擇。FilamentGroup的Overthrow和iScroll（贊！！！用一次膜拜一次做者）什麼的。

相關框架和庫：

一、文件（夾）模板 Boilerplate

    有人問我，Boilerplate到底有啥做用。我說，說穿了真的沒啥做用。不過，沒有規矩不成方圓，我喜歡一切能用123456來排序整理的東西。在學習之初，想讓webapp顯得不那麼業餘，能夠參考 Boilerplate給出的文件夾和文件模板。

二、MVC框架選擇：backbone

    我很懶，認準了一個就是一個。作假裝的nativeAPP，我就認準phonegap。作標準版webapp，我就認準backbone。沒那麼多精力去學習一大堆工具，使得順手就行。

    Backbone的依賴等等：

• underscore.js：工具庫。做用相似 Boilerplate 中的 modernizr.js 和 helper.js。不過，Boilerplate中的是可選，能夠刪除，這個userscore倒是必須的。有點小不爽。

• jsmarty：模板插件。若是有大量數據解析工做，推薦該插件。爲何不用其餘五花八門的插件，緣由是，我以爲它名字好聽，O(∩_∩)O哈哈~

三、替代JQ的底層框架 zeptojs

    閹割版jQuery，gzip壓縮後只有9.2k。

    得跟 zeptojs 說聲sorry。這是標準框架插件，我以前卻一直把它歸類在小工具中。無知真可怕！

    （ 被擱置的那個webapp項目，對方要求整個文件夾包括圖片不能超過300K，跟頭商量，JS最多留50K。這個時候，每一K都顯得格外重要了。）

四、現成組件庫 jQuery Mobile & topcoat & Effeckt.css 

• 只用過jQuery Mobile的UI組件，很漂亮

• topcoat 提供了不少漂亮的小組件，包括按鈕、經常使用表單元素等。

• Effeckt.css 據說 「他們的目標就是創建一個以60fps爲基準的過渡動畫庫，儘管尚未所有完成，但成果已經很是明顯了。」不過，我沒用過。

五、幾個好用的插件推薦

    模擬滾動條插件 iScroll.js：

• 上下左右滑動，很好很贊。

• 可是，它的高度是根據滑動內容的容器高度來作滾動的。若是沒有定義容器的固定高度，當內容中的圖片沒有加載完成時，調用該插件，會致使高度的計算出現誤差。

• 暫無其餘問題。

    幻燈插件 swipe.js ：

• 這是移動端最好用的幻燈插件了，最，沒有之一。

• 自適應，知足了把屏幕顛來倒去的需求

• 支持touch

• 滑動效果至關流暢

• 須要的接口和回調、參數配置，簡單明瞭，能知足做爲一個幻燈的所有要求

• 能夠自動播放或點擊播放等等    

    兼容PC自定義滾動條插件http://manos.malihu.gr/：

• 最大的優勢就是兼容PC上不兼容CSS3動畫的插件

• 簡單好用，多看demo便可（這貌似是廢話啊）

    手勢插件Hammer.js：

• 我以前一直用的touchy.js，很輕量，不怎麼推薦；

• Hammer.js 接下來會換這個，推薦下，哈哈。
  

動畫特效問題：

一、可使用jQueryRotate.js

    封裝的還不錯，旋轉效果很好，用來寫大轉盤抽獎更好，緩動效果很贊。

二、直接用jQuery的animate深刻版

    http://api.jquery.com/animate/

三、本身寫傳說中的「高性能動畫」

• 先學點高大上的知識：SteamlockSoftware的Allen Pike在2011年寫了一篇很是好的文章。主要講的是他們在開發nativeapp時的一些注意事項。想提供給用戶一些喜聞樂見的動畫效果，但性能很差的動畫是會嚴重影響app體驗的哦。這些注意事項一樣適用於native-feeling的web動畫效果，都是金科玉律呀，要好好膜拜下。文章中，他提出了「感知時間軸（timeline of perception）」這個概念。 

• 動畫幀率應爲60fps。這意味着每幀~16ms走完。這是達到native流暢的最小值。iOS的內置動畫都是60fps，因此iPhone的滾動效果比Androidu要好不少（儘管近來Google針對這個問題已有很大改進）。努力讓全部與用戶相關的動畫都追上這個幀率吧。

• 100ms內進行響應。100ms是人對慢的感知閾限，在這時間段內所發生的事，用戶都會以爲是即時的。

• 若必定要超過100ms才能作出響應，那也必須控制在1000ms內。Allen建議用時超過這一時間的，能夠先給進度條什麼的，以告知用戶等待過程當中並不是什麼都沒發生。可是上面Polar的案例告訴咱們，將用戶的注意力集中在等待上，反而會弄巧成拙。以後我將再講怎麼處理這種狀況。  

• 超過1s就會有很差的事發生了……

• 亂七八糟的目錄表

• 簡約版大轉盤

• http://www.w3.org/TR/css3-transitions/

• 好吧，CSS3 3D transform變換，不過如此！

• CSS3 transition實現超酷圖片牆動畫效果

• 示例一：

<style type="text/css">  
        .animation-form{  
            /* -webkit-animation: animate-stripes 1s linear infinite; */  
            -webkit-transition:all 0.5s ease-in;  
            -webkit-transform:rotate(0deg);  
        }  
        .animation-form:hover{  
            -webkit-transform:rotate(30deg);  
        }  
    </style>  
  
    <div class="animation-form" style="background-color:red;width:100px;height:100px;">

• 示例二：

<style type="text/css">  
        .animation-form{  
            -webkit-animation: animate-stripes 1s linear infinite;  
        }  
        @-webkit-keyframes animate-stripes {    
            0% {-webkit-transform: rotate(0deng);left:0;}   
            100% {-webkit-transform: rotate(180deng);left:50px}    
        }   
    </style>  
  
    <div class="animation-form" style="background-color:red;width:100px;height:100px;position: absolute;">

• 簡單說明：

/*
代碼部分最關鍵的就是：-webkit-transition:all 0.5s ease-in;目前而言，transition僅webkit核心的瀏覽器支持，因此此效果僅在chrome或是Safari下有。 

transiton屬性有這幾個值： 
transition-property :* //指定過渡的性質，好比transition-property:backgrond 就是隻指定backgound參與這個過渡 
transition-duration:*//指定這個過渡的持續時間 
transition-delay:* //延遲過渡時間 
transition-timing-function:*//指定過渡類型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier 

熟悉flash顯示與動畫編程的應該知道，這裏的過渡類型的含義與flash中緩動類型（遠不及flash豐富）是一致的： 
linear //線性過分 
ease-in //由慢到快 
ease-out //由快到慢 
ease-in-out //由慢到快在到慢 

額外的些知識：timing-funciton的幾種過分類型都是基於cubic-bezier的某些特定數值。好比ease-in-out的類型它也能夠寫成cubic-bezier(0.42, 0, 0.58, 1.0)。參見這裏。 
transition還支持CSS僞類。 

因此，-webkit-transition:all 0.5s ease-in表示的意思就是全部的屬性都執行過渡效果，像角度啊，投影大小，邊框色或是下面要講到的比例啦等，執行時間爲0.5秒，過渡動畫類型爲先慢後快。
*/

應用輔助功能：

一、點擊 a 連接直接撥打電話（tel：//）

<a href=」tel://110 」>撥打電話</a>

    測試報告：

• 安卓：直接在瀏覽上打開，點擊link進入電話撥號界面；在微信掃描二維碼打開，點擊link無反應。

• IOS：都可進入電話撥號界面。

    繞過安卓屏蔽的方法：（親測可用，測試機，note2+土豪金，方案來源【戳我去看】）

• 步驟一：按照上面的格式添加連接；

• 步驟二：在訪問連接後面加上「#mp.weixin.qq.com 」，如，你的單頁的網址是 www.danye.com，則，訪問的地址改成   www.danye.com#mp.weixin.qq.com，其餘不變。
  

二、點擊 a 直接發送郵件（maito：）

    測試報告：

• 安卓：直接在瀏覽上打開，若是用戶手機上有郵件app，可行；在微信打開，無反應。（繞過安卓屏蔽的方法同上）

• IOS：都可進入郵件發送界面。

三、點擊跳轉到微信app指定用戶關注頁面（weixin：//）

<a href="weixin://profile/gh_6fe6e4f85b4a">【****】</a>

    測試報告：

• 安卓：直接在瀏覽上打開，無反應；在微信打開，無反應。

• IOS：只能跳到微信app內部，沒法跳到指定微信帳號的我的信息頁。(New:最新版點擊以後無反應，因此，對於這個功能，仍是死心吧。等微信正兒八經開放了對webapp的接口再說。)

四、百度地圖的不一樣使用狀況

• 不調用百度API：http://api.map.baidu.com/lbsapi/creatmap/index.html

• 點擊跳轉到百度移動端地圖網頁版：進入移動版，輸入指定地點，而後獲取瀏覽器中連接便可

五、設置分享到朋友圈的圖片和標題

• 如何查看：

• 在微信內部打開單頁app，右上角點擊，選擇分享到朋友圈，進入編輯頁面，而後就能看到你設置好的縮略圖和標題。

• 設置方法：

• 步驟一：修改標題，直接改頁面的title便可，標題不能過長，不然會有省略號，三十字之內是最佳了；

• 步驟二：修改圖標，將你須要的圖片插入到頁面中，該圖片的最佳位置爲「body中第一張圖片」，若是這張圖片是內容圖片，設置到這裏就完成了。若是這張圖片是非內容圖片，須要隱藏，必須直接在標籤上加「display：none；」，親測，在css樣式表中添加該屬性而後掛上類或id，該圖片都會被過濾掉。（微信安卓版立刻又要更新，不知道過濾規則會不會有新的變化，無論怎樣，起碼如今仍是能用的-2013-12-31）

基礎知識科普：

一、開發基礎知識參考列表

• 【WebApp】離線webapp （android）開發

• 【WebApp】webApp開發總結（集合貼）

• webkit webApp 開發技術要點總結

二、手機瀏覽器分辨率詳細說明

• 手機分辨率：咱們常說的手機分辨率，指的是「手機屏幕分辨率」。而咱們在web開發中，提到的手機分辨率，指的是「瀏覽器分辨率」。瀏覽器的分辨率由瀏覽器的類型決定，與手機自己無關。

• 關於微信中訪問webapp的說明：咱們在微信中訪問朋友圈或者公衆帳號推送的網頁時，當前的瀏覽器是微信自帶的瀏覽器（能夠簡單理解爲騰訊瀏覽器）。當咱們點擊右上角，選擇在「瀏覽器中瀏覽」，會跳轉到手機自帶的瀏覽器（若是使用的是iphone，會跳轉到safari）。

• 名詞解釋：「**（手機品牌）自帶瀏覽器」，簡單說來就是買回手機，手機默認的已經裝載好的瀏覽器（水貨手機中雜七雜八的不算），舉例如，iphone中的safari。「用戶安裝的瀏覽器」，從網絡上下載的瀏覽器，如在iphone中使用的chrome瀏覽器，在note中使用的UC瀏覽器等。「應用的內置瀏覽器」，國內巨頭所作的app如微信，瀏覽網頁時會用自家的瀏覽器（能夠認爲該瀏覽器隱藏在app中，只有訪問網頁時會打開該瀏覽器）。

• 瀏覽器標準參考：

• chrome開發文檔viewport相關說明

• safari開發文檔viewport相關說明

• 不一樣手機瀏覽器渲染分辨率(px)：

• 檢測網頁頭部參考標準：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

疑難雜症集合：

1. 先focu再blur收起虛擬鍵盤

1. 直接調用input的focus，是不能真正將其focus的，出虛擬鍵盤的，經過其餘元素來觸發input的focus，光標和鍵盤都可以出來。一樣，直接blur，也不會收起鍵盤，發現先focus，再blur能夠將鍵盤收起。

2. ipad上對元素綁上click ，有默認操做

1. 當鍵盤出來focus時，頁面默認會上彈一段距離，致使在橫屏時，每點一個操做按鈕，頁面就上跳一下，由於在每一個按鈕上綁定了click事件，後來把click給禁了，經過採用tap。

3. 輸入input時，會觸發頁面scroll

1. 發如今編輯框中每輸入一下，就會觸發頁面的一次滾動，這個還未解決，因此會致使toolbar算位置的函數調好屢次。

4. 修改chrome中font-size默認最小值

1. chrome中默認字體最小值是12px，若是要再進一步縮小字體，需設置-webkit-text-size-adjust: none

5. Ipad上在document的click無效

1. Ipad上在document上註冊的點擊事件無效，在某一個具體元素上綁的click事件纔有效，需將click轉化成touchstart

6. 須要綁定resize設置自身大小的元素，最好用absolute替代fixed

1. 我用swipe插件作了一個fixed定位的全屏幻燈，幻燈中有一屏包含一個模擬微信對話框的功能。用戶輸入時，虛擬鍵盤彈出，頁面自動上移。點擊「發送」以後，虛擬鍵盤消失，可是頁面上方會出現大量空白。這個空白就是虛擬鍵盤出現以後，頁面上移所產生的。我發現，將fixed改成absolute以後就再也不有這個問題。

綜上所述：

    各類輔助功能，都被微信安卓版滅掉了。推webapp的渠道，基本上都是利用微信服務號或者訂閱號來推，爲神馬爲神馬，微信安卓版這麼弱必定要通通沒法實現？？？？？？

（最後的吐糟：爲了一個單頁webapp，熬了幾乎兩個通宵。內心真不是滋味，總結起來，卻沒什麼內容。）