ionic3入门
ionic简介
ionic 是一个强大的HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework),可以帮助您使用Web技术,比如HTML、CSS和Javascript构建接近原生体验的移动应用程序。
ionic3特点:
- 基于Angular语法。
- 清晰的项目结构:应用是模块化的,每个页面的控制层代码、模板、样式都放在一起。
- 提供了漂亮的设计,通过SASS构建应用程序,提供了很多UI组件来帮助开发者开发强大的应用。
- 提供了强大的命令行工具:ionic cli可以生成pages,provides,tabs,pipes,components,directives等。
- 性能优越,运行速度快。
环境搭建
- 安装Node.js
- 全局安装Cordova和ionic:npm install -g cordova ionic
- 安装Java JDK和Android SDK用于安卓打包
- 创建项目:ionic start MyIonic3Project tutorial
- 项目下安装依赖:npm install
- 浏览器运行:ionic serve
- 安卓打包真机运行:
ionic cordova platform add android
ionic cordova run android
相关语法掌握
ES6
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准。
下面介绍ES6的主要语法:
- 变量声明const和let
- 函数的扩展:函数参数的默认值和箭头函数
- 对象的扩展:属性的简洁表示法
- Promise:异步操作
- 模块:import和export
- 类
- 装饰器
变量声明const和let
在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升。
在ES6中,我们通常用let声明变量,const声明常量。let和const都是块级作用域。
块级作用域: {}大括号内的代码块即为let 和 const的作用域。
- 在一个函数内部
- 在一个代码块内部
函数参数的默认值
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
箭头函数
箭头函数最直观的三个特点:
- 不需要function关键字来创建函数
- 省略return关键字
- 继承当前上下文的 this 关键字
注意:
- 当你的函数有且仅有一个参数的时候,是可以省略掉括号的。
- 当你函数返回有且仅有一个表达式的时候可以省略{}。
- 如果箭头函数直接返回一个对象,必须在对象外面加上括号(),否则会报错。
属性的简洁表示法
ES6 允许直接写入变量和函数,作为对象的属性和方法。
- 直接写变量时,属性名为变量名, 属性值为变量的值。
- 直接写函数时,可省略冒号和function关键字。
Promise:异步操作
在promise之前代码过多的回调或者嵌套,可读性差、耦合度高、扩展性低。通过Promise机制,扁平化的代码机构,大大提高了代码可读性;用同步编程的方式来编写异步代码,保存线性的代码逻辑,极大的降低了代码耦合性而提高了程序的可扩展性。
模块:import和export
import导入模块、export导出模块。import大括号里面的变量名,必须与export被导入模块对外接口的名称相同。
类
JS定义类:
ES6定义类:
装饰器
修饰器是一个对类进行处理的函数。修饰器函数的第一个参数,就是所要修饰的目标类。
TypeScript
TypeScript 是一种由微软开发的自由和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法。
语法特性:
- 类 Classes
- 接口 Interfaces
- 模块 Modules
- 类型注解 Type annotations
- 编译时类型检查 Compile time type checking
- Arrow 函数 (类似 C# 的 Lambda 表达式)
类型批注
TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。这是可选的,而且可以被忽略而使用 JavaScript 常规的动态类型。
对于基本类型的批注是number, bool和string。而弱或动态类型的结构则是any类型。
当类型没有给出时,TypeScript编译器利用类型推断以推断类型。如果由于缺乏声明,没有类型可以被推断出,那么它就会默认为是动态的any类型。
类
MVC和MVVM设计模式
MVC模式
MVVM模式
ionic3基于angular4,而angular4的模式更接近于MVVM设计模式。
- 低耦合:View可以独立于Model变化和修改,同一个ViewModel可以被多个View复用;并且可以做到View和Model的变化互不影响;
- 可重用性:可以把一些视图的逻辑放在ViewModel,让多个View复用;
- 独立开发:开发人员可以专注与业务逻辑和数据的开发,设计人员可以专注于UI(View)的设计;
- 可测试性:清晰的View分层,使得针对表现层业务逻辑的测试更容易,更简单。
Angular4
angular4的构架如下:
模块
Angular 或者 ionic 新建的项目,都会存在一个根模块,默认名是 AppModule。如果你使用了模块化来创建应用,包括 AppModule,每个都会存在一个 @NgModule 装饰器的类。我们新建的页面,如果不使用懒加载,都要在 @NgModule 中先声明后使用。
ionic3实战
实例代码请查看github项目:ionic2app
ionic3使用Cordova插件
- 安装camera和fileTransfer插件
ionic cordova plugin add cordova-plugin-camera cordova-plugin-file-transfer
npm install --save @ionic-native/camera @ionic-native/file @ionic-native/file-transfer
- app.module.ts引入依赖注入
- 在需要上传的文件中引入实例化
- 在构造函数中实例化