windows环境下利用ionic+Cordova创建自己的一个WebApp

首先，看下官网介绍的ionic，

Ionic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果，尽管通常组件不需要编码，通过框架扩展可以很容易地使用，比如我们的AngularIonic扩展。

Ionic遵循视图控制模式，通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中，我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。一个很好的例子就是标签栏（Tab Bar）视图控制器处理点击标签栏在一系列可视化面板间切换。

浏览我们的API文档来了解视图控制器和Ionic中可用的Javascript实用工具。

Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。

然后有这个一段：

如果你已经熟悉Anguar1和Ionic1，那么请不要嚣张，Angular2是一个全新的框架，它从ReactJS以及其他web移动框架借鉴了不少经验和优点，巨大的改进使得开 发体验和性能已经超越了Angular1，而且Ionic2/Ionic3无论是从UI交互效果和跨平台的差异性都优于Ionic1，如果你继续为维护Ionic1的项 目我我无法阻挡，但是如果你正在再发新的APP跨平台项目，我建议你考虑一下Ionic2/Ionic3。 ionic2/Ionic3的架构使得“单一职责原则”得到了体现，组件、页面之间相互独立，有利于内聚和解耦。

Cordova 是用于使用HTML，CSS和JS构建移动应用的平台。我们可以认为Cordova是一个容器，用于将我们的网络应用程序与本机移动功能连接。

PhoneGap是一个采用HTML，CSS和JavaScript的技术，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够在网页中调用IOS，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以调用。

 

以上内容做简单介绍，下面来搭建开发环境。因为我的安卓模拟器老是出问题，半天打不开，所以直接用的是chrome浏览器，通过控制台改为手机端的方式来进行查看。

首先安装node.js，必须的，npm安装工具，懂得人都知道。百度下载最新版node.js，是一个软件，安装过程傻瓜式一直下一步。

安装完成后，打开命令提示窗口，因为直接用npm命令可能比较慢，因为这个服务器是挂在国外的，为了提高速度，可以利用淘宝镜像，然后通过cnpm命令进行安装会比较快。在命令提示框输入一下命令：

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

安装完成后，利用cnpm进行安装ionic和cordova以及phoneGap：

　　安装ionic：

cnpm install ionic -g

　　安装完成后可用通过   ionic -version命令查看是否安装成功，成功则显示安装的版本

　　安装cordova：

cnpm install cordova -g

　　安装完成后可用通过   cordova -version命令查看是否安装成功，成功则显示安装的版本

　　

一起安装完成以后，创建第一个webapp应用，利用cd命令进入到自己要创建应用的文件夹，

在命令提示框输入命令：

ionic start myApp

　　这个命令是创建一个空白的名称为myApp的应用，创建完成之后，打开开发工具WebStorm，打开创建应用的文件夹，然后目录结构如下，两个gradle文件夹不是。

之后点击Run->EditConfigurations:

打开之后，点击左上角的+，途中的PhoneWebApp为我已经创建好的一个运行服务器，

选择

进行创建一个运行服务器，

 

 Name：服务器的名称，

 Cordova executable：ionic或者cordova的cmd路径，一般默认给出，可选择更改，

Cordova working directory：创建的应用的路径

Command：有serve，run，emulate，prepare四个选项，因为我是直接在浏览器运行的，所以直接选择serve，

Platform：有android，ios，browser，more options四个选项，我选择的是browser

 

之后点击Ok保存配置，显示完成配置的服务器

点击绿色小三角运行服务器，之后启动服务器，浏览器会自动打开，默认显示打开的是src文件夹下的index.html文件

在页面中添加一点代码：

之后再浏览器中会显示添加的内容，

 

 

至此，一个webapp就创建成功了，后面你就可以编写自己的代码进行开发了。

如果要运行在android设备上，需要sdk，jdk，安卓的模拟器，安装方式自行百度；运行在安卓模拟器的时候可能会发生很多问题，可能需要gradle，可自己下载一个。

如果要运行在ios设备上，需要Xcode，以及ios的模拟器，并且只能在mac系统进行，安装方式一样，自行百度。

 

转载于:https://www.cnblogs.com/wang-bo/articles/7507349.html