ionic3入门

小咪咪 2022-05-10 00:20 441阅读 0赞

# 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等。
 *  性能优越，运行速度快。

## 环境搭建 ##

1.  安装[Node.js][]
2.  全局安装Cordova和ionic：npm install -g cordova ionic
3.  安装Java JDK和Android SDK用于安卓打包
4.  创建项目：ionic start MyIonic3Project tutorial
5.  项目下安装依赖：npm install
6.  浏览器运行：ionic serve
7.  安卓打包真机运行：  
    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关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升。

![在这里插入图片描述][70]

在ES6中，我们通常用let声明变量，const声明常量。let和const都是块级作用域。

块级作用域： \{\}大括号内的代码块即为let 和 const的作用域。

*  在一个函数内部
 *  在一个代码块内部

![在这里插入图片描述][70 1]

#### 函数参数的默认值 ####

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

![在这里插入图片描述][70 2]

#### 箭头函数 ####

箭头函数最直观的三个特点：

*  不需要function关键字来创建函数
 *  省略return关键字
 *  继承当前上下文的 this 关键字

注意：

*  当你的函数有且仅有一个参数的时候，是可以省略掉括号的。
 *  当你函数返回有且仅有一个表达式的时候可以省略\{\}。
 *  如果箭头函数直接返回一个对象，必须在对象外面加上括号()，否则会报错。

![在这里插入图片描述][70 3]

#### 属性的简洁表示法 ####

ES6 允许直接写入变量和函数，作为对象的属性和方法。

*  直接写变量时，属性名为变量名, 属性值为变量的值。
 *  直接写函数时，可省略冒号和function关键字。

![在这里插入图片描述][70 4]

#### Promise：异步操作 ####

在promise之前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。通过Promise机制，扁平化的代码机构，大大提高了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。

![在这里插入图片描述][70 5]

![在这里插入图片描述][70 6]

#### 模块：import和export ####

import导入模块、export导出模块。import大括号里面的变量名，必须与export被导入模块对外接口的名称相同。

![在这里插入图片描述][70 7]

![在这里插入图片描述][70 8]

#### 类 ####

JS定义类：

![在这里插入图片描述][70 9]

ES6定义类：

![在这里插入图片描述][70 10]

#### 装饰器 ####

修饰器是一个对类进行处理的函数。修饰器函数的第一个参数，就是所要修饰的目标类。

![在这里插入图片描述][70 11]

### TypeScript ###

TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。

语法特性：

*  类 Classes
 *  接口 Interfaces
 *  模块 Modules
 *  类型注解 Type annotations
 *  编译时类型检查 Compile time type checking
 *  Arrow 函数 (类似 C\# 的 Lambda 表达式)

#### 类型批注 ####

TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。这是可选的，而且可以被忽略而使用 JavaScript 常规的动态类型。

对于基本类型的批注是number, bool和string。而弱或动态类型的结构则是any类型。

当类型没有给出时，TypeScript编译器利用类型推断以推断类型。如果由于缺乏声明，没有类型可以被推断出，那么它就会默认为是动态的any类型。

![在这里插入图片描述][70 12]

#### 类 ####

![在这里插入图片描述][70 13]

### MVC和MVVM设计模式 ###

#### MVC模式 ####

![70 14][]

#### MVVM模式 ####

![在这里插入图片描述][70 15]

ionic3基于angular4，而angular4的模式更接近于MVVM设计模式。

[MVVM的优点][MVVM]

*  低耦合：View可以独立于Model变化和修改，同一个ViewModel可以被多个View复用；并且可以做到View和Model的变化互不影响；
 *  可重用性：可以把一些视图的逻辑放在ViewModel，让多个View复用；
 *  独立开发：开发人员可以专注与业务逻辑和数据的开发，设计人员可以专注于UI(View)的设计；
 *  可测试性：清晰的View分层，使得针对表现层业务逻辑的测试更容易，更简单。

### [Angular4][] ###

angular4的构架如下：

![在这里插入图片描述][70 16]

#### 模块 ####

Angular 或者 ionic 新建的项目，都会存在一个根模块，默认名是 AppModule。如果你使用了模块化来创建应用，包括 AppModule，每个都会存在一个 @NgModule 装饰器的类。我们新建的页面，如果不使用懒加载，都要在 @NgModule 中先声明后使用。

![在这里插入图片描述][70 17]

## ionic3实战 ##

实例代码请查看github项目：[ionic2app][]

### ionic3使用Cordova插件 ###

1.  安装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

1.  app.module.ts引入依赖注入

![在这里插入图片描述][70 18]

![在这里插入图片描述][70 19]

1.  在需要上传的文件中引入实例化

![在这里插入图片描述][70 20]

1.  在构造函数中实例化

![在这里插入图片描述][70 21]

[Node.js]: https://nodejs.org/en/
[ES6]: https://blog.csdn.net/fighting_no1/article/details/79545682
[ECMAScript 6.0]: http://es6.ruanyifeng.com/#README
[70]: /images/20220510/b0d97e4fee1840709927f1d4c863a143.png
[70 1]: /images/20220510/1dacc63a21bf4bf0a30fb3d1a0f0d73e.png
[70 2]: /images/20220510/32d2283817824dad89c3212c0dcb4784.png
[70 3]: /images/20220510/ca250863920d4324bf29092a04bc75a3.png
[70 4]: /images/20220510/2255edc1c2854b819639aa3c6db9b9e4.png
[70 5]: /images/20220510/9a3c08bbb2b54c1785a57e1bdeaaae1c.png
[70 6]: /images/20220510/78115ca075ec47e0a480da95c2d36175.png
[70 7]: /images/20220510/0b2f9f23e6be45f7a183953332b3ed59.png
[70 8]: /images/20220510/e2c83dbaf776407f8993de623a33dcf8.png
[70 9]: /images/20220510/765f0e1bf4eb4eeea32c7e887b856408.png
[70 10]: /images/20220510/f00a34627c044b02a99d0233eee007b2.png
[70 11]: /images/20220510/cf9340304a694220a767ce4ed9b23b93.png
[70 12]: /images/20220510/3f43dcbba24442e989a5cf8d44928d7f.png
[70 13]: /images/20220510/0bab4aea055746d28dce01ee748eca29.png
[70 14]: /images/20220510/726c6df7edf84d6ea50796f0c41e6777.png
[70 15]: /images/20220510/f241961e8d3e4a27bf2bdb975dfd17f1.png
[MVVM]: https://blog.csdn.net/cz_sky/article/details/76064227
[Angular4]: https://www.jianshu.com/p/3c06260e6015
[70 16]: /images/20220510/2d25d41a52f94b0ba574cf5c6c20eaa7.png
[70 17]: /images/20220510/90824553937b48b28e0a74b71dd8b9dc.png
[ionic2app]: https://github.com/AngelaFighting/ionic2app
[70 18]: /images/20220510/fa4b546f55dc40d9825513f452e852d2.png
[70 19]: /images/20220510/c155cb91341d49839faef233d8005a99.png
[70 20]: /images/20220510/82ccce42728848389ab4296a07927bd9.png
[70 21]: /images/20220510/6f87b32f2f104acab1af88c903e2a81b.png