web app開發流程步驟、技術框架和語言有哪些？

web app開發即h5前端開發，學習web開發我們需要掌握web app開發語言、web app開發框架和web app開發步驟，下面，就分別介紹一下web app開發涉及到的相關知識：

一、web app開發語言

前端開發的基礎語法，由HTML+CSS+JavaScript組成，這是前端開發基本的3個語言。

1、網頁布局基礎：HTML+CSS

HTML就是超文本標記語言，組成網頁內容的基本語言。你可以直接說他是網頁的骨架，網頁的圖片、文字、視頻、音頻、程序都需要他引入到網頁中體現。

HTML(div)+CSS布局，是基礎入門的基本步驟，在這個階段，你需要學習的內容，包括有：

1）標簽語義化，SEO

2）頁面加載的流程和原理

3）網頁結構

4）盒子模型（W3C盒子模型和IE盒子模型）

5）CSS選擇器

6）CSS布局浮動、定位

在剛剛開始的階段，大家學習的布局方式基本都是以px為單位的靜態布局方法。熟悉好布局方法，先給自己一個小目標，做一個簡單的電商網頁的基本結構出來，不用有效，不需要交互。

2、瀏覽器腳本語言：JavaScript

JavaScript是我們學習前端開發中非常重要的一個內容，也是一個大家經常掉坑里的難點。JavaScript現在可以說是互聯網時代使用率較高的腳本語言了，在網頁中，所有的數據渲染，有效的交互都需要利用JavaScript，來影響瀏覽器的顯示。JavaScript不只是開發網頁有效和渲染數據的重要內容，在學習前端開發的后期，大量使用算法和框架的時候，對JavaScript基礎的考驗也是很多的。

在基礎階段，我們學習JavaScript需要注意：

1）基本關鍵字指令

2）基本數據類型、數組

3）函數

4）面向對象編程

5）原型鏈、閉包

6）JSON

7）Ajax

8）DOM(文檔對象模型 原生DOM操作)

9）事件捕獲、冒泡、代理

10）常用函數方法

11）ES5、6、7

在JavaScript部分學習，主要還是要去理解好交互的原理，把原理分析清楚，真的理解語法，那寫出多復雜的邏輯也是手到擒來。

二、移動web app開發框架

1、PhoneGap

官網：http://phonegap.com/
簡介： PhoneGap是一個用基于HTML，CSS和JavaScript的，創建移動跨平臺移動應用程序的快速開發平臺。它使開發者能夠利用iPhone，Android，Palm,Symbian,WP7,WP8,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯系人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以調用。

優點：
1）可跨平臺。phonegap框架幫我們解決了差異性，javascript與平臺系統的連接由phonegap框架完成。成為連接移動終端的適配器，或者說中間件。
2）提供硬件訪問控制。可調用加速計、攝像頭、羅盤、通訊錄、文檔、地理定位、媒體、網絡、通知(警告、聲音和振動)、存儲。
3）可利用成熟javascript框架。如：Ext js、jQuery。

缺點：
1）性能差。運行速度慢，UI反應延時——這是個致命傷。(高端機影響不大)
2）不能完全跨平臺。不同平臺代碼需要微調。
3）內存消耗大。
4）調試難度大。

2、ApiCloud(國產)

官網：http://www.apicloud.com/
簡介：APICloud是中國領先的“云端一體”的移動應用云服務提供商。APICloud推行“云端一體”的理念，重新定義了移動應用開發。APICloud為開發者從“云”和“端”兩個方向提供API，簡化移動應用開發技術，讓移動應用的開發周期從一個月縮短到7天。APICloud由“云API”和“端API”兩部分組成，可以幫助開發者快速實現移動應用的開發、測試、發布、管理和運營的全生命周期管理。

優點：
1）提供開發的IDE。
2）提供數據云API、統計云API、推送云API

缺點：
與Hbuilder存在版權問題，抄襲Hbuilder

3、Wex5(國產)

官網：http://wex5.com/
簡介：WeX5應用快速開發框架（含完整的SDK API及全部源碼），一次開發、跨端運行。
【定位】開發面向消費者和公眾的開放應用系統
【適用】一般app、電商app、客服app、會員app、微店微商等
【前端】安卓app/蘋果app/微信服務號/PC web app
【后端】后端數據處理組件，對接各主流技術平臺
【費用】完全開源，徹底免費，無任何限制

優點：
1）高效精致的UI組件體系，基于jquery和bootstrap技術，采用增強的RequireJS模塊化技術。
2）基于phonegap(cordova)框架，如相機、地圖、LBS定位、指南針、通訊錄、文件、語音、電池等。
3）可視化拖拽式集成開發環境IDE，全能力的調試支持和智能代碼提示。

缺點：
1）使用范圍有限：適用：一般app、電商app、客服app、會員app、微店微商等
2）用戶量小，存在不穩定因素。

三、web app開發流程

1、開發前需求分析

其實主要是分析一下這個APP的需求有一個整體的規劃，比如：APP開發的成本周期、具體的功能、能夠帶來的好處等等。

2、UI界面設計

設計就需要UI設計師進行設計了，會根據同行的設計作為參考再來設計，主要是確定整體布局風格、配色、窗口的彈出方式以及數據輸入方式等。

3、APP開發實施階段

這里主要是各個模塊和功能的代碼編寫，當然也是根據需求去隨時調整，各個功能和接口調用聯動。這個階段應該是耗費時間比較長的。

4、APP測試運行階段

完全功能編寫完畢后，測試人員開始對APP進行測試，主要是功能和安全的測試，看一下APP是否滿足設計需求以及測試系統是否有安全漏洞，然后測試后可以上線試運行了。

以上內容就是關于Web App開發的相關知識總結，對于技術小白來說，也可以利用app可視化拖拽生成工具-應用公園，進行免編程app制作，并且在應用公園平臺制作的app都是基于原生技術的，不管是在功能多樣化、性能兼容、加載速度上，原生app會比web app更有優勢。平臺上所有的app功能組件和模板都是事先開發好的，只需一鍵套用模板、對所需的app控件進行拼圖拖拽式操作，快的化不出一周，就可以完成原生app開發到上線。

移動app開發框架" width="650" height="391" title="移動app開發框架" align="" />