ionic3项目实战记录

作者：IonicBlog
链接：https://www.jianshu.com/p/4b07a3c57afe
來源：简书
原因：文章中个别地方有错误，做此记录。

一、新建项目

ionic start ionic3-dress tabs

二、搭建基础框架

此项目主要用到三个tab：首页推荐、优惠精选、个人中心；对应的更改tabs.html代码：

<ion-tabs>
        <ion-tab [root]="tab1Root" tabsHideOnSubPages="true" tabTitle="首页推荐" tabIcon="home"></ion-tab>
        <ion-tab [root]="tab2Root" tabsHideOnSubPages="true" tabTitle="优惠精选" tabIcon="megaphone"></ion-tab>
        <ion-tab [root]="tab3Root" tabsHideOnSubPages="true" tabTitle="个人中心" tabIcon="person"></ion-tab>
    </ion-tabs>

三、运行

ionic serve

四、ionic3懒加载配置

配置懒加载需要以下几个步骤：

1、给需要懒加载的页面配置module.ts;

2、在对应的页面的.ts文件里增加@IonicPage()特性；

3、在app.module.ts移除页面引用；

4、使用懒加载；

1、配置module.ts

依次配置about.module.ts、contact.module.ts、home.module.ts、tabs.module.ts

about.module.ts

import { AboutPage } from './about';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
@NgModule({
    declarations:[
        AboutPage,
    ],
    imports:[
        IonicPageModule.forChild(AboutPage),
    ],
    exports:[
        AboutPage,
    ],
    entryComponents:[
        AboutPage
    ]

})
export class AboutPageModule{}

contact.module.ts

import { ContactPage } from './contact';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
@NgModule({
    declarations:[
        ContactPage,
    ],
    imports:[
        IonicPageModule.forChild(ContactPage),
    ],
    exports:[
        ContactPage,
    ],
    entryComponents:[
        ContactPage,
    ]
})
export class ContactPageModule{}

home.module.ts

import { HomePage } from './home';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
@NgModule({
    declarations:[
        HomePage
    ],
    imports:[
        IonicPageModule.forChild(HomePage),
    ],
    exports:[
        HomePage
    ],
    entryComponents:[
        HomePage
    ]
})
export class HomePageModule{}

tabs.module.ts

import { IonicPageModule } from 'ionic-angular';
import { TabsPage } from './tabs';
import { NgModule } from '@angular/core';
@NgModule({
    declarations:[
        TabsPage,
    ],
    imports:[
        IonicPageModule.forChild(TabsPage),
    ],
})
export class TabsPageModule{

}

配置完成后目录如下:

2.增加@IonicPage()特性

以about.ts为例，在@Component上方�加上@IonicPage特性(行号4),其他需要懒加载的页面也需要配置。

 

 

3.在app.module.ts移除页面引用；

将�配置过懒加载的页面，在app.module.ts中进行移除引用，移除后的代码如下：

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

4.使用懒加载

使用懒加载，只需要将之前的页面名字用引号引起来即可，对应的也不需要在顶部进行import导入

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = 'TabsPage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

tabs.ts

import { IonicPage } from 'ionic-angular';
import { Component } from '@angular/core';

@IonicPage()
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = 'HomePage';
  tab2Root = 'ContactPage';
  tab3Root = 'AboutPage';

  constructor() {

  }
}

5、懒加载运行效果图

首次加载时，只会加载tabs和home

当点击个人中心时才会加载about