Ionic3入门与常见问题

一.前言

介绍一个比较火的混合开发技术框架，ionic。之前使用过framework7，但是接触到ionic后，感觉两者的差距还是蛮大的，如果你想要开发功能比较复杂的app，建议还是使用ionic。

二.简单介绍

简单介绍一下，ionic是一款html5手机应用开发框架，它提供了很漂亮、交互性好的UI组件，可以让我们快速开发；基于原生的API，我们可以通过插件的形式来实现原生的功能。官方网站更新很快，而且文档也描述地很详细。在GitHub上可以快速提出issue，ionic team会快速跟进。

三.快速入门

当然，要快速开发ionic app，基本的前端技术肯定是要会的，html+javascript+css。
ionic它是基于Cordova框架的，所以要进行ionic开发的话，那么需要安装npm，node.js，Cordova，这些都可以在网上查找相关的资料进行安装。
ionic是通过typescript来进行开发的，typescript是基于javascript的一层封装，所以要是typescript不是很熟悉的话，用javascript来开发也是可以的，在ionic项目中，新建出来的文件是html文件，ts文件以及scss文件。一般的话，每一个页面都是包含这三个文件。
接下来，我们开始创建app
1）首先，通过命令行安装ionic：

npm install -g ionic

2）创建一个app，ionic有3种模版给你选择，一个是空白模版，一个是tabs模版，另外一个sidemenu模版。现在用的比较多的就是tabs模版：

ionic start myApp tabs

其中的myApp就是项目的名字。
3）还有一步就是run起app，看看你之前的安装的步骤是否正确，首先需要进入这个项目的路径，其次就是调用ionic命令运行app:

cd myApp
ionic serve

注意，通过ionic serve跑起来的是以浏览器的方式，你也可以选择要运行的浏览器，默认是电脑的默认浏览器。
本人比较喜欢用chrome，命令行为：

ionic serve -w google\ chrome

因为chrome浏览器在检查元素的时候特别方便，清晰。
还有一点，当你在修改代码的时候，浏览器也会自动实时刷新，这样就大大提高了开发的效率，不需要自己重新去跑浏览器。
注意，有时候ionic自动刷新，会出现缓存，这样会导致项目报错，但是实际上，这个项目是没有错误的代码的，所以需要重新运行serve，例如用的是chrome，那么:

ionic serve -w google\ chrome

以上创建出来一个app了，之后需要进行其他的业务逻辑，则需要创建页面来开发。

三.添加新页面

通过快速入门，此时你已经搭建了一个基本的框架，如果要进一步的开发，需要创建一些新的页面。
本人用的是webstorm开发神器来开发ionic项目，用webstorm打开刚刚创建的项目myApp，然后找到文件夹pages，右击创建一个文件夹，例如为about，在这个文件夹下面创建三个文件，分别为about.html，about.ts，about.scss，一般都是创建这三个，如果不需要用到某一个文件，那么也可以不需要创建。

1.三个文件需要写什么代码
1）对于ts文件
创建完这三个文件之后，在about.ts的@component的selector中写上page-about，templateUrl写上about.html。

@component({
selector:'page-about',
templateUrl:'about.html'
})

其中selector中写上page-about，代表这个ts文件关联的scss是哪一个，此时需要在about.scss文件里面写上:

page-about{
}

为何要在scss文件写上这句代码？因为后面在定义样式的时候，可能有多个页面用到重名的样式，例如about page里面有一个样式叫about-title，在另外一个page，也有叫做about-title，这样会导致样式的覆盖。
templateUrl写上about.html，就不用多说了，意思就是这个ts文件的模版关联了这个html文件。
定义页面名字，用于后面的导入:

export class AboutPage {
}

其中AboutPage就是你定义的这个页面的名字，在后面导入app.module.ts会讲到。
2）对于html文件
一般都会用到ion-header，ion-content，ion-footer，顾名思义，这个就是app对应的头部，内容和底部，这个根据你的需要来创建。
3）对于scss文件
写上

page-about{
}

后面这个页面的所有样式就写在page-about的大括号里面，防止样式的覆盖。
上面的三个小步骤是对于最初创建ionic页面的时候需要写些什么基本代码。接下来就是需要将你创建的页面与这个项目项关联起来。

2.关联页面
1）首先，去到项目的app文件夹，再去到app.module.ts文件，导入刚刚创建的页面:

import { AboutPage } from '../pages/about/about';

其中AboutPage就是刚刚定义的页面的名字。
2）在declarations中导入AboutPage ，在entryComponents中导入AboutPage。

3.页面的方法

ionViewDidLoad(){
  console.log("ionViewDidLoad 当页面加载的时候触发，仅在页面创建的时候触发一次");
}

ionViewWillEnter(){
  console.log("ionViewWillEnter当将要进入页面时触发");
}

ionViewDidEnter(){
  console.log("ionViewDidEnter 当进入页面时触发");
}

ionViewWillLeave(){
  console.log("ionViewWillLeave 当将要从页面离开时触发");
}

ionViewDidLeave(){
  console.log("ionViewDidLeave 离开页面时触发");
}

ionViewWillUnload(){
  console.log("ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");
}

ionViewCanEnter(){
  console.log("ionViewCanEnter");
}

ionViewCanLeave(){
  console.log("ionViewCanLeave");
}

上面几个方法在实际开发中用的比较多的是ionViewDidLoad，第一次进入这个页面的时候调用此方法，这个和原生的iOS的方法viewDidLoad基本是同一个意思。数据请求经常是写在这个方法里面，还有一些元素的动态添加等等。这样不会导致每次进入页面都需要进行数据请求和页面元素的添加。当然，实际的开发是怎么样，就需要根据你自己的情况来选择方法。

以上是ionic的页面导入步骤。至此，你就可以进行ionic开发了，页面已经关联起来了。ionic提供了大量的UI组件，可以大大提高开发速度，在官网上面有很全面的介绍和demo演示。
下面我就介绍进一步的开发和一些开发中遇到的问题。

四.导入插件

在ionic的官网上面有很多插件，可以自行查找。
我们以keyboard插件为例子。
1.安装

ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install --save @ionic-native/keyboard

其中@ionic-native/keyboard是指将keyboard安装到ionic-native文件夹下。

2.在app.module.ts文件需要导入：

import { Keyboard } from '@ionic-native/keyboard';

还需要在providers中需要写入Keyboard，这样就完成了一个插件的导入。

3.使用
如果你需要在about page中使用这个插件，那么需要在ts文件中：
1）导入

import { Keyboard } from '@ionic-native/keyboard';

2）在constructor中声明一下实例：

constructor(private keyboard: Keyboard){}

3）在ts文件中调用你需要的API，如：

this.keyboard.hideFormAccessoryBar(false);

五.共用工具方法

在实际的开发中，例如iOS原生开发，我们会使用添加.h文件和.m文件来封装共用方法，然后通过实例方法或者类方法来调用，前端开发可能我们就单独抽取出一个js文件来封装共用方法，但是现在我们是用的是ionic框架开发，不像前端开发直接在html导入js文件，当然我们可以在index.html文件中直接导入，但是ionic也我们提供了统一的方式-provider。
假如我们需要共用一个loading，那么我们此时可以创建一个provider，步骤为：
1.生成这个共用方法

ionic g provider method

其中method就是这个共用方法的名字，ionic会自动帮你创建好这个文件在项目的providers文件下面。
去到method.ts文件中，写入代码:
1）导入

import {LoadingController} from "ionic-angular";

2）声明

constructor(
  private loadingCtrl: LoadingController
) {}

3）实现方法

showLoading(){
  this.loading = this.loadingCtrl.create({});
  this.loading.present();
}

2.使用共用方法
1）在需要使用这个loading的方法的页面导入

import { MethodProvider } from '../../providers/method/method';

其中MethodProvider就是你创建的那个共用方法的名字，在method.ts中找到这个名字。
2）声明实例

private methodProvider: MethodProvider,

3）调用方法

this.methodsProvider.showLoading();

六.数据请求

在ionic中的数据请求有2种，一个是angular数据请求，另一种是原生http数据请求。
1.angular数据请求
1）导入：

import {HttpClient} from "@angular/common/http";

2）声明：

private http: HttpClient

3）使用：

this.http.post(MyApp.SERVER + this.path, params, {}).subscribe(res => {
// 网络请求发生成功
  let resObj = JSON.parse(JSON.stringify(res));
  console.log("---resObj--" + resObj);
}, err => {
  // 网络请求发生错误
});

注意，在真机测试中，angular数据请求不会起作用。

2.原生http数据请求
1）安装和导入

ionic cordova plugin add cordova-plugin-advanced-http
npm install --save @ionic-native/http

在需要的页面中导入

import {HTTP} from "@ionic-native/http";

2）声明

private nativeHttp: HTTP

3）使用

this.nativeHttp.setDataSerializer('json');
this.nativeHttp.post(MyApp.SERVER + this.path, params, {})
  .then(data => {
    let resObj = JSON.parse(data.data);
    console.log("---resObj--" + resObj);
  })
  .catch(error => {
  });

在浏览器中，原生http请求是不起作用的。
所以，在实际的代码开发中需要根据platform来区分需要的数据请求方式。
注意，有时候你区分了使用方式，但是就是一直报错，而且通过postman测试API是没有问题的，那么此时需要注意2点：
1）请求的API，后台是否解决了跨域的问题。
2） ionic项目需要移除一下whitelist，然后重新再添加进去。

ionic cordova plugin rm cordova-plugin-whitelist
ionic cordova plugin add cordova-plugin-whitelist

七.注意点

1.启动图
ionic项目的启动图插件在创建项目的时候，是默认帮我们添加了，在iOS上面是没有问题的，在config.xml中加入：

其中Default@2x~universal~anyany.png的大小为2732*2732，为
Default@3x~universal~anyany.png的大小为2208*2208，具体可以Cordova官网，上面有详细的介绍: splashscreen
但是接下来在config.xml中导入android的代码时候，就一直出不来启动图，后面发现是android的splashscreen没有安装，所以就安装了一下这个插件：

ionic cordova plugin add cordova-plugin-splashscreen

会发现，在安装的过程中，提示iOS已经安装，但是android没有安装。
安装成功之后，android的启动图就出现了。

2.virtual scroll
ionic3版本，如果使用ion-segment的话，并且ion-segment对应的有使用到list的话，就不能使用virtual scroll，否则会出错，这个virtual scroll找不到了。在GitHub上有很多人提出了这个issue，本人也查找了里面讨论的内容，有人说是用hidden可以解决，但是实际上是没有用的，原因就是ion-segment本身也是类似于判断的意思，但是对于virtual scroll而言，在ion-list上面不能有*ngIf，否则就会找不到这个virtual scroll。

3.android硬件返回事件处理
在网上面找到很多关于android硬件返回按钮处理的方法，其中一篇文章写的比较好的文章，它是通过抽成一个公用的方法，然后在tabs文件夹中创建定义一个registerBackButtonAction方法即可，除非是有特殊页面，例如login页面，需要重新定义registerBackButtonAction，因为点击login页面的android硬件放回按钮，是要退出app的。
这样做是没有问题的，但是本人遇到有一个页面是通过ModalController来跳转页面的，此时如果还是使用它的方法就会出错，因为它没有区分出modal的情况。所以在这个ModalController页面，点击返回，会直接退出app。
在网上查找了一种也是大致相同的方法，但是返回事件是在app.component.ts文件中定义了，增加判断面是否有toast或loading或Overlay，如果有的话，需要先隐藏，这样就避免了直接退出app，导入的IonicApp如果应用在抽成一个公用的方法里面会出现报错。所以关于android硬件返回按钮的处理事件，还是放在了app.compoent.ts文件中处理。
注意，注册registerBackButtonAction需要写在platform.ready里面，而且需要做一下延时。

八. 总结

总体而言，ionic是一个很不错的手机应用开发框架，版本的更新很快，文档齐全，用户体验好，近乎原生，而且有一个强大的讨论社团，对于bug的跟进速度很快，而且对于后面app的更新迭代有很大帮助。如果你要开发一个稳定，快速迭代的app，推荐使用ionic。