Web App開發(fā)入門

《Web App開發(fā)入門》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、WebApp與NativeApp有何區(qū)別呢？　　NativeApp：　　1、開發(fā)成本非常大。一般使用的開發(fā)語言為JAVA、C++、Objective-C?！　?、更新體驗較差、同時也比較麻煩。每一次發(fā)布新的版本，都需要做版本打包，且需要用戶手動更新（有些應(yīng)用程序即使不需要用戶手動更新，但是也需要有一個惡心的提示）。　　3、非?？帷Ｒ驗閚ativeapp可以調(diào)用IOS中的UI控件以UI方法，它可以實現(xiàn)WebApp無法實現(xiàn)的一些非常酷的交互效果?！　?、Nativeapp是被Apple認可的。Nativea

2、pp可以被Apple認可為一款可信任的獨立軟件，可以放在AppleStroe出售，但是Webapp卻不行。　　WebApp：　　1、開發(fā)成本較低。使用web開發(fā)技術(shù)就可以輕松的完成webapp的開發(fā)?！　?、升級較簡單。升級不需要通知用戶，在服務(wù)端更新文件即可，用戶完全沒有感覺?！　?、維護比較輕松。和一般的web一樣，維護比較簡單，它其實就是一個站點。　　Webapp說白了就是一個針對Iphone、Android優(yōu)化后的web站點，它使用的技術(shù)無非就是HTML或HTML5、CSS3、JavaScrip

3、t，服務(wù)端技術(shù)JAVA、PHP、ASP?！　‘斎唬驗檫@些高端智能手機（Iphone、Android）的內(nèi)置瀏覽器都是基于webkit內(nèi)核的，所以在開發(fā)WEBAPP時，多數(shù)都是使用HTML5和CSS3技術(shù)做UI布局。當使用HTML5和CSS3l做UI時，若還是遵循著一般web開發(fā)中使用HTML4和CSS2那樣的開發(fā)方式的話，這也就失去了WEBAPP的本質(zhì)意義了，且有些效果也無法實現(xiàn)的，所以在此又回到了我們的主題–webapp的布局方式和技術(shù)。　　在此所說的移動平臺前端開發(fā)是指針對高端智能手機（如Ipho

4、ne、Android）做站點適配也就是WebApp，并非是針對普通手機開發(fā)Wap2.0，所以在閱讀本篇文章以前，你需要對webkit內(nèi)核的瀏覽器有一定的了解，你需要對HTML5和CSS3有一定的了解。如果你已經(jīng)對此有所了解，那現(xiàn)在就開始往下閱讀吧……　　1、首先我們來看看webkit內(nèi)核中的一些私有的meta標簽，這些meta標簽在開發(fā)webapp時起到非常重要的作用

5、user-scalable=0;”name=”viewport”/>　　　　　　　　　　　　復(fù)制代碼　　第一個meta標簽表示：強制讓文檔的寬度與設(shè)備的寬度保持1

6、:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；　　第二個meta標簽是iphone設(shè)備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；　　第三個meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；　　第四個meta標簽表示：告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼。　　2、HTML5標簽的使用　　在開始編寫webapp時，哥建議前端工程師使用HTML5，而放棄HTML4，因為HTML5可以實現(xiàn)一些HTML4中無法實現(xiàn)的豐富的WE

7、B應(yīng)用程序的體驗，可以減少開發(fā)者很多的工作量，當然了你決定使用HTML5前，一定要對此非常熟悉，要知道HTML5的新標簽的作用。比如定義一塊內(nèi)容或文章區(qū)域可使用section標簽，定義導航條或選項卡可以直接使用nav標簽等等?！　?、放棄CSSfloat屬性　　在項目開發(fā)過程中可以會遇到內(nèi)容排列排列顯示的布局(見下圖)，假如你遇見這樣的視覺稿，哥建議你放棄float，可以直接使用display:block;　　4、利用CSS3邊框背景屬性　　這個按鈕有圓角效果，有內(nèi)發(fā)光效果還有高光效果，這樣的按鈕使用C

8、SS3寫是無法寫出來的，當然圓角可以使用CSS3來寫，但高光和內(nèi)發(fā)光卻無法使用CSS3編寫，這個時候你不妨使用-webkit-border-image來定義這個按鈕的樣式。-webkit-border-image就個很復(fù)雜的樣式屬性?！　?、塊級化a標簽　　請保證將每條數(shù)據(jù)都放在一個a標簽中，為何這樣做？因為在觸控手機上，為提升用戶體驗，盡可能的保證用戶的可點擊區(qū)域較大?！　?、自適應(yīng)布局模式　　在編寫CSS時，我不建議前端工程師把容器（不