⽤用 Ionic 框架快速开发跨平台移动应⽤用
- 郭建
Rundown
• Hybrid 开发框架介绍
• Ionic 框架简介
• Ionic 基础 UI 组件
• Ionic ⾼高级控件
• Navigation
• Platform
• Ionic Ecosystem
• 总结
• 学习资源分享
Hybrid 开发框架介绍
Hybrid 与 Ionic Framework 简介
Cordova
Native API UI 组件
JS API
Angularjs
Ionic SDK ngCordova
Ionic Application
Cordova — 提供跨平台⽀支持
—
• 前后端分离
• 模板系统 & 双向绑定 & 指令系统
• 依赖注⼊入
• 路由系统
• more (animation, angular-ui)
Ionic 发展回顾
alpha
14 Beta + 5 RC
17000+ stars on Github
Components — UI Components
Components — Controls (1)
Action Sheet
Backdrop
Modal
Popup
Side Menus
Slide Box
Spinner
UIActionSheet
—
Modal
Popup
—
ScrollView
Loading
Ionic UI Kit
Navigation
Platform
Components — Controls (2)
Navigation
UI Router
Multiple Views
Caching
Components — Controls (3)
Platform
平台检测
特定平台的事件处理
Android back button
iOS background awaken
Ecosystem
Platform
Ecosystem — Ionic CLI
Project Template (DRY)
Multiple platform support, Lab (快速调试)
Generators (Splash Screen Image, Icon)
Ecosystem — ngCordova
Touch ID Geolocation Camera OAuth
63+ 扩展
Ecosystem — Ionic Lab
Ecosystem — Ionic view
快速分享，不需要通过
AppStore/Google Play
等商店的审核
Ecosystem — Platform
Platform
总结
缺点
优点
• 布局还不够灵活，不能像 native ⼀一样实现各种过场动画
• 不适合计算量⼤大的 App，⽐比如 3D 游戏
• 强⼤大的开发、调试⼯工具可以提⾼高开发效率
• 维护成本低
• 快速迭代
• 跨平台，降低企业成本
注意
• Made for mobile
• 关于 Hybrid app 能否通过 AppStore 审核的问题
Ionic 学习资源
Ionic Forum
Ionic Docs
Ionic in Action
Thanks !
