Ionic2 开发

1. 背景

HyBrid app(混合模式移动应用)是介于web-app和native-app之间的app, 兼具了Nativa App良好的用户体验和Web App垮平台开发的优势。

2. 什么是Ionic

2.1 了解NPM

在使用Ionic之前需要先了解下NPM：nodejs的出现算是前端里程碑的是一个事件，它让前端工程师们摆脱了浏览器的束缚，踏上了一个更加宽广的舞台。随着一系列基于nodejs的应用和工具的出现，包管理扮演者很重要的作用。NPM（node package manager），作为node的包管理工具，极大的方便了我们的开发工作，主要作用包括：安装、卸载、更新、查看、搜索、发布等。
NPM官网：https://npmjs.org/
NPM官方文档：https://npmjs.org/doc/README.html

2.2 Ionic

Ionic （即ionicFramework）是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。
ionic中文教程

3. 安装Ionic

3.1 安装node.js

在终端中查看node版本，

查看node版本.png

如果没有安装过或版本过低，则需要 Nodejs官网下载最新的版本。

3.2 安装ionic和cordova

由于国内防火墙的原因，需要采用淘宝NPM镜像才能成功安装ionic包和cordova包。依次在终端中依次输入以下两个命令, 然后请耐心等候安装成功。

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

sudo cnpm install -g cordova ionic

3.3 创建ionic项目

cd ./Desktop // 终端进入桌面
ionic start demo_1 // 创建demo_1项目

创建ionic项目.png

3.4 创建iOS应用

cd demo_1
ionic platform add ios
ionic build ios
ionic emulate ios // 打开模拟器

生成的iOS应用在platform文件中显示

创建iOS应用.png

3.5 运行iOS应用

点击demo_1.xcodeproj打开应用，可以看到界面就像原生app那么炫酷了。

iOS应用.png