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版本,
如果没有安装过或版本过低,则需要 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项目
3.4 创建iOS应用
cd demo_1
ionic platform add ios
ionic build ios
ionic emulate ios // 打开模拟器
生成的iOS应用在platform文件中显示
3.5 运行iOS应用
点击demo_1.xcodeproj打开应用,可以看到界面就像原生app那么炫酷了。