美文网首页
Ionic3入门与常见问题

Ionic3入门与常见问题

作者: vanTu | 来源:发表于2018-09-10 19:03 被阅读0次

    一.前言

    介绍一个比较火的混合开发技术框架,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-headerion-contention-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中加入:

    <splash src="src/assets/imgs/ios/Default@2x~universal~anyany.png" />
    <splash src="src/assets/imgs/ios/Default@3x~universal~anyany.png" />
    

    其中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。

    相关文章

      网友评论

          本文标题:Ionic3入门与常见问题

          本文链接:https://www.haomeiwen.com/subject/hiqegftx.html