• 1. HTML5移动App开发框架IONIC入门 合肥研发一部 王礼云
  • 2. 2018/10/17 - 2目录第一章:移动开发简介第二章:IONIC简介第三章:常用CSS第四章:常用组件第五章:angularjs第六章:实例讲解
  • 3. 移动开发移动开发也称为手机开发,或叫做移动互联网开发。是指以手机、PAD等便携终端为基础,进行相应的开发工作,由于这些随身设备基本都采用无线上网的方式,因此,业内也称作为无线开发。 分为三类 2018/10/17 - 3Web应用开发原生态应用开发混合应用开发
  • 4. 移动开发三大框架Web开发:即传统的B/S架构,主要采用web前端技术(html/css/js)等通过web浏览器实现跨平台,使web展示出适应不同终端设备的效果。 原生应用开发:又称为本地应用程序,是指用平台特定的语言及框架进行开发,可以支持系统提供的各种各级功能。如android开发、ios开发 混合应用开发:前端使用移动web技术,利用浏览器、html5、javascript跨平台特性,提供通用的解决方案。中间使用移动中间件包装成客户端支持android、IOS等主流平台,并实现系统高级应用。 2018/10/17 - 4
  • 5. 混合移动开发框架--IONIC框架简介Ionic是一个帮助你使用如HTML、CSS、js等技术来创建具有原生态feeling的移动应用的HTML5 SDK。 Ionic并不是PhoneGap或者javascript等框架的替代品,相反,ionic只是将这些东西进行包装使它们很好的融合在一起使你的工作简单化。 官网:http://www.ionicframework.com 2018/10/17 - 5
  • 6. 混合应用开发-IONICUI层负责页面布局,框架优美之处在于封装常用布局和公共组件。 移动中间件处于UI和终端系统之间,封装各系统差异,提供统一的javascript接口,操作系统资源,如摄像头、通讯录等。 Cordova是贡献给Apache后的开源项目,是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎。 终端系统,处于应用底层。 2018/10/17 - 6
  • 7. IONIC安装1、Nodejs安装 https://nodejs.org/download/ 下载nodejs并双击安装 2、Cordova and Ionic安装 windows: npm install -g cordova ionic mac: sudo npm install -g cordova ionic 3、创建一个Ionic工程(ionic提供了三种初始模板) ionic start myApp tabs ionic start myApp blank ionic start myApp sidemenu 4、运行 ionic platform add ios --增加ios运行平台 ionic build ios --编译 ionic emulate ios –在ios模拟器重运行 或者 ionic platform add android --增加ios运行平台 ionic build android --编译 ionic emulate android –在ios模拟器重运行 或者 ionic serve -- 自动打开浏览器在浏览器中运行2018/10/17 - 7
  • 8. IONIC—工程目录结构2018/10/17 - 8Platforms目录 编译打包文件存放目录 比如android打包后的文件在platforms/android/ant-build/MainActivity-debug.apk目录下 www目录 Web编写工作区域 Templates目录下为html文件 Js目录下有 app.js controllers.js services.js
  • 9. IONIC 常用CSS2018/10/17 - 9Header footer
  • 10. IONIC 常用CSS-BUTTON 不同大小:button-large、button-small;不可用:button-block;最大:button-full无样式:button-clear 外边框 button-outline;多重颜色 图标按钮 Bar按钮等等多种按钮 2018/10/17 - 10
  • 11. IONIC 常用CSS-LIST提供list分割、带按钮或图标图片等多种样式 2018/10/17 - 11
  • 12. IONIC 常用CSS-CARD提供带header、footer、list、image等多种样式的card2018/10/17 - 12
  • 13. IONIC 常用CSS- form input提供各种样式的text输入框 2018/10/17 - 13
  • 14. IONIC 常用CSS- form其他如下: 2018/10/17 - 14
  • 15. IONIC 常用CSS- tab多种演示的tab2018/10/17 - 15
  • 16. IONIC 常用CSS- grid提供按百分比(col-75)、偏移量(col-offset-33)、自适应定义的grid 提供对齐等css样式2018/10/17 - 16
  • 17. IONIC 常用组件Ionic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果,尽管通常组件不需要编码,通过框架扩展可以很容易地使用,比如我们的AngularIonic扩展。 Ionic遵循视图控制模式,通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中,我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。 一个很好的例子就是标签栏(Tab Bar)视图控制器处理点击标签栏在一系列可视化面板间切换。 2018/10/17 - 17
  • 18. IONIC 常用组件—页眉页脚2018/10/17 - 18
  • 19. IONIC 常用组件--tab2018/10/17 - 19
  • 20. IONIC 常用组件--LIST支持缩略图,删除按钮,重新排序,滑动2018/10/17 - 20
  • 21. IONIC 常用组件—actionSheet2018/10/17 - 21
  • 22. IONIC 常用组件—导航2018/10/17 - 22
  • 23. IONIC 常用组件—弹出框2018/10/17 - 23
  • 24. IONIC 常用组件—form标签2018/10/17 - 24
  • 25. IONIC 常用组件—侧边菜单2018/10/17 - 25
  • 26. IONIC -其他手势、键盘、滚动、loading等等。 提供大量图标 更多信息请查看官网。2018/10/17 - 26
  • 27. Angularjs入门ng-app 指令定义一个 AngularJS 应用程序,, ng-controller 定义了控制器。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。 AngularJS 模块(Module) 定义了 AngularJS 应用。 AngularJS 控制器(Controller) 用于控制 AngularJS 应用。 AngularJS 表达式写在双大括号内:{{ expression }}。 2018/10/17 - 27
  • 28. 案例讲解案例讲解 官方实例 ionic start myApp tabs 2018/10/17 - 28
  • 29. 应用案例—安徽掌上运维系统2018/10/17 - 29
  • 30. 应用案例—安徽掌上运维系统2018/10/17 - 30
  • 31. 可及返利app—来源网络2018/10/17 - 31
  • 32. 2018/10/17 - 32