webapp開發

基礎dom操做庫

首先對於頁面上的交互仍是以dom操做爲主，雖然說如今javascript的dom api已經很好用了，可是對於用慣jquery的人來講仍是很不方便，因此我選擇 zepto，它的api和jquery徹底一致，可是更爲輕量。

路由處理

再手機端上頁面切換會出現白屏，也沒法作轉場動畫，爲了堅定這些問題，咱們須要開發一個單頁面應用程序（ SPA ），經過解析url #後面的路徑（#後面路徑轉換不會產生頁面條件）加載不一樣的dom，這裏也能夠加上轉場的動畫，以獲取和原生同樣的用戶體驗。

director.js 是最純粹的路由註冊/解析器，它在不刷新頁面的狀況下，利用「#」符號組織不一樣的URL路徑，並根據不一樣的URL路徑來匹配不一樣的回調方法。director.js不只能夠應用在客戶端，在使用node.js的後臺，它也可以實現前面說的後端路由功能。

緩存

移動端的網絡須要考慮流量的消耗，沒必要要的重複請求是很粗糙的，因此很移動端須要大量使用緩存，來獲取更好的用戶體驗。html5提供了webstorage機制儲存數據，須要加一些簡單的封裝就可使用了 js緩存封裝

1 2 3

localStorage.setItem(key, value); localStorage.getItem(key); localStorage.removeItem(key);

手勢事件

移動端須要監測用戶不一樣的手勢來作相應的處理，例如：微信上列表上長按顯示操做菜單，滑動返回。。。。，咱們能夠經過監測touch事件來判斷用戶的手勢，touch事件有如下幾種：

touchstart 手指接觸屏幕事件
touchmove 手指再屏幕上移動事件
touchend 手指離開屏幕事件
touchcancel 非正常離開屏幕事件（例如在觸摸時，別的應用打開，或者程序意外退出。。。）

簡單的手勢用以上幾種事件配合就能夠處理了，若是手勢相對複雜，可使用 touch.js, 百度開發的手勢事件庫，api至關簡單

1 2 3 4

touch.on('.target', 'swipeleft swiperight', function(ev){ console.log("you have done", ev.type); });

滾動條

再android4.0之前手機上是不支持div滾動條的，不少的應用都引進了 iscoll.js，用js模擬滾動條，再4.0 之後有了div滾動條，可使用原生滾動。可是在長列表渲染時，div滾動條會有閃白的狀況，因而，你們就都使用，iscoll和div滾動切換的方式，再較低版本例如android 4.4以前用iscoll 4.4以上用原生滾動條。

下拉刷新和infinite-scroll

下拉刷新和無限滾動式手機端的必不可少的功能，js須要監聽滾動和touch事件來實現這兩個功能; jQuery模擬原生態App上拉刷新下拉加載效果代碼

現有框架解決方案

app.js

App.js 的目標是爲移動webapp提供一個健壯良好的開端，處理常見的功能而且兼容其餘流行的JS庫。提供良好的路由控制，有controller的mvc設計，也能夠良好的兼容其它的框架，缺點是組件相對較少，可是對於簡單的webapp仍是沒有問題的

framework7

Framework7 是一個開源免費的框架能夠用來開發混合移動應用（原生和HTML混合）或者開發 iOS & Android 風格的WEB APP。也能夠用來做爲原型開發工具，能夠迅速建立一個應用的原型。

framework7 組件豐富並且能夠在android和ios兩種風格建切換

打包

webapp須要調用原生方法，例如攝像頭，通知等等，還須要將webapp打包成真正的apk或者app。這些須要經過一些工具完成;

Phonegap

phonegap 是一個跨平臺的移動app開發框架，能夠把html css js寫的頁面打包成跨平臺的能夠安裝的移動app，而且能夠調用原生的幾乎全部的功能，好比攝像頭，聯繫人，加速度等。

HBuilder

HBuilder 是國產的混合是開發解決方案，包括有HBuilder編輯器 H5+規範調用原生api， mui框架，native.js與原生通訊，它提供雲打包以json格式配置app，再性能不錯，經本身的比較再一樣的程序的性能用Hbuilder更加。