Ionic开发入门

1. 什么是Ionic

Ionic前身是PhoneGap，一款老牌混合开发框架，但是Ionic并不是PhoneGap的替代品，PhoneGap只是一个壳子，Ionic提供了强大的Ionic Framework和许多基于Cordova的插件，让开发人员可以更好的使用设备能力，缩小与原生app的性能差距。

Ionic具有如下特点：

· ionic 基于Angular语法，简单易学.

· ionic 是一个轻量级框架.

· ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，MVVM代码易维护.

· ionic 提供了漂亮的设计，通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用.

· ionic 专注原生，让你看不出混合应用和原生的区别.

· ionic 提供了强大的命令行工具.

· ionic 性能优越，运行速度快.

Ionic由两部分组成，Ionic CLI和Ionic Framework，通常人们提到Ionic一般指的是Ionic Framework。

2. 第一个Ionic应用

2.1 Ionic环境安装

a. 安装Node.js

b. 安装Ionic和Cordova

npm install –g cordova ionic

2.2 移动开发环境安装

2.2.1 Android开发环境配置

a. java环境安装

下载jdk安装后配置环境变量

b. android sdk安装

下载sdk ，安装后配置环境变量。

建议在安装并配置好java环境后下载安装AndroidStudio，使用AndroidStudio来下载并管理Android SDK等开发环境。

2.3 第一个Ionic App

a. 创建应用

ionic start MyApp tabs

运行该命令后，Ionic CLI将会自动创建tabs模板项目，并下载对应的依赖包。

b. 进入目录

cd MyApp

c. 编译

ionic build

d. 在浏览器中运行

ionic serve

e. 在安卓上运行

ionic cordova platform add android

ionic cordova bulid android

ionic cordova run android

f. 在ios上运行

ionic cordova platform add ios

ionic cordova prepare ios

打开Xcode， 点击File>Open打开项目目录下的platforms/ios文件夹，编译并运行。

3. Ionic项目结构

· hooks：编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中

· node_modules ：node各类依赖包

· resources ：android/ios 资源（更换图标和启动动画）

· src：开发工作目录，页面、样式、脚本和图片都放在这个目录下

· www：静态文件

· platforms：生成android或者ios安装包路径（platforms\android\build\outputs\apk：apk所在位置）

· plugins：插件文件夹，里面放置各种cordova安装的插件

· config.xml: 配置文件

· package.json: node安装模块时的依据

· tsconfig.json: TypeScript项目的根目录，指定用来编译这个项目的根文件和编译选项

· tslint.json：格式化和校验typescript

Ionic使用node进行管理，当拿到一个项目时，首先要执行的命令是

npm install

下载对应的依赖项。

我们编码目录在src中

3.1 程序入口——App.component.ts

一个Ionic应用的程序入口是App.component.ts。在这里编写进入程序时需要进行初始化的任务。

通常涉及到设备能力的初始化工作，我们放在platform.ready的回调中进行。

3.2 页面编写

一个页面由4个文件组成

· .html文件编写页面结构

· .module.ts文件管理页面的依赖

· .scss文件管理页面样式

· .ts文件负责页面逻辑

4. Ionic生命

上图为官网截图，常用的生命周期有如下六个。