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  !!!