在做前端開發webapp之前，使用都的是響應式的網頁，在移動端的效果並不好也只能說是能看，特別是一些稍微複雜的頁面，很難達到pc和移動端都有良好的效果，經過了近半個月的資料查詢整理，加上和技術總監的溝通，最終決定單獨做一個webapp專案。從5月初開始準備webapp的開發到現在大概有一個月的時間，總共完成的頁面18個左右，主要是一些瀏覽檢視的功能，互動之類的操作比較少，下面主要介紹一下開發的經歷。龍熙軟體

第一步：ui框架的選擇

為了減少開發的工作量，所以決定選擇一個ui框架進行基礎開發。查了各個地方的資料之後，選出了四個ui框架選擇，分別是WeUI（微信出品）、FrozenUI（手Q出品）、SUI-Mobile（阿里出品）、mui（不太瞭解）。最終選擇阿里的sui-mobile進行基礎框架進行開發，這個框架提供了挺多不錯的控制元件，大小也比較合理。下面貼出總結的四個ui框架的特點：

1、WeUI

微信原生視覺體驗一致的基礎樣式庫。

特點：提供微信的ui效果，樣式較少，沒有類似側邊欄等外掛。

js+css大小：40k

2、FrozenUI

基於手機QQ的樣式庫。

特點：提供

手機qq

的ui效果，有少量的外掛和動效庫，樣式更加豐富，但較長時間未更新。

js+css大小：83k

3、SUI-Mobile（iOS風格）

基於Framework7開發的UI庫

特點：提供類似ios的ui效果，樣式比較豐富，有少量的外掛。

js+css大小：52k

4、mui（iOS風格）

適合webApp的前端框架，封裝了原生api。

特點：提供類似ios的ui效果，樣式比較豐富，不依賴任何第三方js庫，在webapp上有較好的體驗。

js+css大小：160+k

mui適用場景說明：

為解決HTML5在低端Android機上的效能缺陷，mui引入了原生加速，其中最關鍵的就是webview控制元件，因此mui若要發

揮其全部能力，需和5+App配合適用，若脫離5+App，mui功能會受限。

第二步：基礎框架選擇

1、sui-mobile自帶zepto，所以選擇zepto而放棄了jquery。

2、使用了淘寶適配框架flexible。js，基本達到各手機瀏覽一直的效果。（默默吐槽一句：雖然sui-mobile和flexble。js都是淘寶出的，但是用在一起的時候還得處理處理，兩個框架都用了rem，但是基準不同，得自己調整。）

3、使用了

layer-mobile

，一個小巧的彈窗框架。

4、使用了arttemplate模板引擎，一個性能良好的模板引擎，簡化了程式碼書寫。

5、使用了jplayer，良好的多媒體播放功能。

第三步：各頁面編寫

這個就沒有太多好說了，按照設計圖一一實現就好了，sui-mobile有很多現成的程式碼可以使用。

遇到的問題：

1、sui-mobile框架預設會攔截a標籤，同時會有一個載入的動畫。按照官方文件做法導致頁面白屏，最後在每個a標籤處加上external。

2、使用sui-mobile框架無限滾動時，需要加上$。init（）。

3、上面提到的sui-mobile和flexble衝突，需要刪除sui-mobile的css中程式碼如下。

‘@mediaonlyscreenand（min-width：400px）{html{font-size：21。33px！important}}@mediaonlyscreenand（min-width：414px）{html{font-size：22。08px！important}}@media

onlyscreenand（min-width：480px）{html{font-size：25。6px！important}}’