链接：
ionic3 教程（一）安装和配置
ionic3 教程（二）登录页制作
ionic3 教程（三）设置页制作
ionic3 教程（四）安卓硬件返回键处理
ionic3 教程（五）基本的网络请求
学习本教程前你需要了解以下内容：
- 前端基本知识（HTML5、JavaScript、CSS）
- TypeScript
- Angular
TypeScript的话至少需要了解基本语法，可以看看
TS 中文官方文档
对 Angular 不太熟悉的可以点这里：
Angular 4.0 架构详解
Angular 4.0 内置指令全攻略
什么是 ionic？他和 Cordova、Angular2 有什么联系？
ionic = Cordova + Angular + ionic CSS
Cordova 提供了使用 JavaScript 调用 Native 功能，ionic CSS 是一套 UI 框架，ionic 对 Angular 进行了封装。
ionic3
ionic 基于 AngularJS 开发。由于 AngularJS1.x 版本在性能上已经很难有较大提升，Google 推出了全新设计的 Angular 2，ionic 也对应着出了2。
ionic2 与一代相比有较大的变化，基于最新的 Angular 2 ，使用 TypeScript 进行开发，如果您没有接触过 AngularJS 或 Ionic1.x，完全不用担心，直接从 ionic2 开始学习即可。
ionic3 是 Angular4.0 推出之后的跟进版本，变化幅度不大。
安装和运行
如果没有安装过 Node.js，先去官网下载一下。
// 安装（失败的话 Mac 尝试使用 sudo，Windows 尝试管理员身份运行 cmd）
$ npm install -g cordova ionic
// 安装后可以验证一下 ionic cli 版本
$ ionic -version
3.5.0
// 创建应用
// cd 到要创建项目的目录，输入以下内容创建ionic项目
// ionic3Demo 是项目名，tabs是模板（默认是tabs，其他还有blank的单页等）
$ ionic start ionic3Demo tabs
// 安装依赖
// 会生成一个 node_modules 文件夹，并在里面安装 package.json 上写下的文件
$ cd ionic3Demo/
$ npm install
// 在浏览器中运行项目
$ ionic serve
有的朋友可能对 cli 不太熟悉，简单说两句。
-g 代表全局安装、install 可以简写为 i、-version 可以简写为 -v
剩下的还有 --save、--dev 等，想要了解更多可以参考官方文档
http://ionicframework.com/docs/cli/
如图：
ionic serve
在web上运行 iOS、Android、WindowsPhone 项目
把浏览器中的地址改为：
http://localhost:8100/ionic-lab
ionic serve lab
不喜欢使用命令行的朋友，可以试一试 ionic lab，他是桌面版的开发环境。不过我没有尝试过，感兴趣的可以下载看看。
下载地址：http://lab.ionic.io
ionic lab
// 如果需要在手机运行，则执行以下命令
// 添加iOS项目
$ ionic platform add ios
// 把src里的内容同步到ios项目中(src后面会讲到)
$ ionic cordova build ios
// 运行iOS项目,相当于在Xcode里面按Command+R
$ ionic cordova emulate ios
//安卓的话同理，把ios替换为android即可
$ ionic platform add android
$ ionic cordova build android
$ ionic cordova emulate android
成功后目录结构如下，platform 里面是你添加的 iOS 和 Android 项目。
目录结构
src 就是以后开发写代码主要的地方。每次写完要同步到手机项目中，需要使用
$ ionic cordova build ios
$ ionic platform add android
同步到 iOS 和 Android 平台里。
Tabs 分析
打开 app.component.ts 可以看到这句代码
rootPage:any = TabsPage;
这个相当于 iOS 的 rootViewController 和 Android 的 MainActivity。
回忆一下我们一开始选择的 Tabs 模板，所以这里生成的是 tabs。打开 src/pages/tabs/tabs.ts，可以看到这些代码：
import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = ContactPage;
constructor() {
}
}
这个 TabsPage，就代表了应用最下面的三个 TabBar。上面分别指出了他们的路径。
Ionic 3 的导航和 iOS 一样是一个栈，push 到新界面，pop 回旧界面。我们在构造函数中设置了 this.navCtrl 属性，我们可以调用 this.navCtrl.push() 方法，来导航到一个新的页面。
好了，这一节内容就到这里。
补充
最近有很多朋友私信问我，如何升级 ionic 版本和 ionic cli 版本，也搞不清楚这两个东西的区别和联系，这里统一进行解释。
ionic 版本是 package.json 中的 ionic-angular。
// 升级方法：
// 修改 ionic-angular 的版本号，并在项目目录下执行以下命令
npm install
ionic cli 版本是一套 ionic 的命令行界面，用于执行各种命令行的命令。
// 升级方法：
// 在任意目录下，执行以下命令
npm install -g ionic@lastest
网友评论
The platform command has been renamed. To find out more, run:
ionic cordova platform --help
请问怎么回事，我还找不到platform这个文件
(node:11144) UnhandledPromiseRejectionWarning: CordovaError: Failed to fetch platform cordova-android@~7.0.0
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: cmd: Command failed with exit code 1 Error output:
npm ERR! SLB:184 is not a legal HTTP header value
npm ERR! SLB:184 is not a legal HTTP header value
这是啥情况啊 搞不懂 ，
E:\workspace_ionic\myApp>ionic info
cli packages: (C:\Users\Administrator\AppData\Roaming\npm\node_modules)
@IONIC/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@IONIC/app-scripts : 3.1.9
Cordova Platforms : none
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 23.0.0
Node : v8.11.1
npm : 6.0.0
OS : Windows 10
Environment Variables:
ANDROID_HOME : G:\AndroidTools\android-sdks
Misc:
backend : pro
这是我的基本信息
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: cmd: Command failed with exit code 4294963221 Error output:
这个是什么问题啊
Running command -failed！ 出现了错误这是怎么回事？
Using cordova-fetch for cordova-android@~6.3.0
Error: Failed to fetch platform cordova-android@~6.3.0
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: cmd: Command failed with exit code 1 Error output:
npm ERR! Maximum call stack size exceeded
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\admin\AppData\Roaming\npm-cache\_logs\2017-12-02T09_34_09_811Z-deb
ug.log
1、Cordova is not available 出现了这个警告
2、livereload.js?snipver=1:74 WebSocket connection to 'ws://localhost:35729/livereload' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED还有好多这种错误
第一个问题：ionic cordova build android 报错
[ERROR] An error occurred while running cordova build android (exit code 1):
ANDROID_HOME=C:\Users\dell\AppData\Local\Android\Sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_31
Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
第二个问题：ionic cordova platform add android,生成的android项目不是以TypeSCript的形式生成的项目
2.但是里面还是ionic1.x 实现的方式(Js)，不是angular4+ionic3+typescript的方式
2.就是普通安卓项目加载一个webview
详细的信息请参考一下官方文档的 CLI 大全：
http://ionicframework.com/docs/cli/
按照上面的说明 build 的意思应该是，
Build web assets and prepare your app for any platform targets
Using cordova-fetch for cordova-android@~6.2.2
Error: Failed to fetch platform cordova-android@~6.2.2
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: cmd: Command failed with exit code ENOENT
platform 安装不上，，什么鬼，，
是 ionic cordova platform add android
把 platform 里面的东西删掉，再试一试。也有可能是网络原因
E:\>npm install -g cordova
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
npm ERR! code EINTEGRITY
npm ERR! sha1-Jw4Gtnsq6UvP7mWS7TnrQjA9GG8= integrity checksum failed when using sha1: wanted sha1-Jw4Gtnsq6UvP7mWS7TnrQjA9GG8= but got sha1-pZQZvb685dOz3Sl1xetS7KpflqU=. (379931 bytes)
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2017-08-04T02_50_46_704Z-debug.log
sudo npm install -g cordova