web app開發入門

前言：

　　PhoneGap是一個用基於HTML，CSS和JavaScript的，建立移動跨平臺移動應用程序的快速開發平臺。它使開發者可以利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯繫人，聲音和振動等，此外PhoneGap擁有豐富的插件，能夠調用。Phonegap是一款開源的開發框架，旨在讓開發者使用HTML、JavaScript、CSS等Web APIs開發跨平臺的移動應用程序。本來由Nitobi公司開發，如今由Adobe擁有。

　　Cordova提供了一組設備相關的API，經過這組API，移動應用可以以JavaScript訪問原生的設備功能，如攝像頭、麥克風等。Cordova還提供了一組統一的JavaScript類庫，以及爲這些類庫所用的設備相關的原生後臺代碼。Cordova支持以下移動操做系統：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

　　像 Titanium 和 PhoneGap 等框架，它們能讓開發者用 Web 技術構建移動應用。這是一個優點，支持開發者使用原先網絡和移動開發的相關技術。不只如此，相同的代碼庫通過小幅度的修改便能適用多個平臺——這就是著名的「一次編寫，處處運行」。然而，當涉及到構建應用的性能時，這些框架的缺點顯露無遺，儘管它們有一些吸引力，但卻一直更適用於構建原生應用。React Native 卻不同凡響。像 PhoneGap 這樣的框架是將網頁內容包裝成 WebView，致使 UI 元素並無原生的感受，而 React Native 則使用原生 iOS 或 Android 組件支持的 JavaScript 組件，因此你構建的應用是徹底原生的。

關係闡述

　　Cordova是貢獻給Apache後的開源項目，是從PhoneGap中抽出的核心代碼，是驅動PhoneGap的核心引擎。你能夠把它們的關係想象成相似於Webkit和Google Chrome的關係。

　　本文基於Cordova來介紹的，系統爲Mac OS，平臺iOS，工具Xcode.

--來自百度百科

 

1、環境準備 

　　安裝 nodejs 環境

　　　　安裝cordova須要npm命令，因此咱們安裝node.js建立cordova安裝環境，打開終端，輸入命令 node -v 查看系統是否安裝過node.js，顯示not found說明須要安裝，能夠　　到nodejs官網下載最新版本。

　　雙擊下載的pkg包默認安裝便可。安裝成功後能夠看到node.js和npm的安裝位置：

　　　而後在終端輸入node -v檢測是否安裝成功，安裝成功則會顯示一個版本號：

 

2、cordova建立項目

1. 安裝 cordova 環境

　　國內安裝cordova 會出現錯誤，所以要翻越GFW。採用淘寶NPM鏡像打開終端直接輸入如下命令便可。

npm install -g cnpm --registry=https://registry.npm.taobao.org

　　而後經過淘寶鏡像安裝

sudo cnpm install -g cordova

　　出現以下圖的時候說明安裝成功，而後就能夠建立項目了

 

2. 建立 cordova 項目

　　建立app相關項目，命令以下:

sudo cordova create hellowebapp

　　回車以後，會在你當前目錄下生成一個hellowebapp文件夾，這樣一個app相關的空項目就算建好了.hellowebapp目錄下的platforms目錄是空的

　　接下來咱們來建立支持平臺 ios 和 android(之後補充).在終端輸入如下命令

cd hellowebapp/

sudo cordova platform add ios

//sudo cordova platform add android

　　以後會在platforms目錄下生成相關平臺文件夾

　　很是順利，恭喜你建立成功，接下來就能夠雙擊xxx.xcodeproj來打開項目，編譯運行，在模擬器的效果圖以下

　　以後就能夠編寫本身的工程了。

 

3、react建立項目

1. 安裝 React Native CLI 工具

npm install -g react-native-cli

　　出現下圖說明安裝成功

 

2. 安裝 watchman 

Watchman 是 Facebook 的文件監控器。React Native 用它來檢測代碼變化，以便從新編譯。

 

 

3. 建立react項目

 

建立成功示例

 

PERFACT  !!!