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引入依赖注入
- 在需要上传的文件中引入实例化
- 在构造函数中实例化
