Ionic简介
一个H5的移动应用开发框架,非常适合 Hybrid APP 混合开发模式,使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS) 的原生App应用,ionic是一个轻量级别的手机UI库,具有速度快,界面现代化、美观等特点。
为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1及以下的版本支持,来获取更好的使用体验。
主要包括三个部分:
- CSS框架 - 提供Native App质感的CSS样式模拟,ionic这部分的实现使用了ionicons图标样式库。
- JavaScript框架 - 提供移动Web应用开发框架,ionic基于AngularJS基础框架开发,因此,自然遵循AngularJS的框架约束;此外,ionic使用AngularJS UI Router实现前端路由。
- 命令行/CLI - 命令行工具集,用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova,依赖于平台SDK(Android & iOS)实现将移动web项目打包成原生app。
Ionic安装
参考地址:http://www.runoob.com/ionic/ionic-install.html
Tip:Node.js的版本必须为6+,npm版本为3+,才能正确的安装最新版的Ionic
Cordova配置
参考地址:http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
Cordova支持的Android平台版本升级,参考地址http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
ndroid/IOS平台项目的创建与编译
参考地址:http://www.runoob.com/ionic/ionic-install.html
以创建一个Android平台项目为例:
命令行输入命令,创建一个项目
$ ionic start MyIonicProject tutorial |
start———————-会告诉CLI创建一个新的应用程序
MyIonicProject——-项目中的目录名称或应用程序名称
tutorial—————–作为您的项目的起始模板(官方提供的默认模板)
官方提供的默认模板:
tabs :一个简单的3选项卡布局
sidemenu:侧面有可滑动菜单的布局
blank:一个单独的启动器
super:启动项目超过14个可以使用的页面设计
tutorial:引导项目
进入项目根目录,执行
$ ionic serve |
创建web站点, 自动打开项目的网址,ionic会监测www文件夹的文件是否发生变化, 从而实时用websocket通知浏览器进行刷新
真机调试
连接真机后,开启“开发者调试”模式后,执行
$ ionic cordova run android |