ionic3核心代码分析

前几节我们搭建了ionic3的环境，创建了ionci3新的项目，分析了项目的目录结构，本篇将要对ionic3的核心代码（src目录下）进行分析。

---

目录位置：src/app

app目录下

（黑体是主要关注的核心）

app.components.ts： app的根组件，主要用来app启动时和启动后的操作

app.config.ts：这个是自定义的文件，也就是新建的项目是没有的，但也是开发习惯常用的一些代码的配置

app.html：根加载页面

app.module.ts：app根模块，一些插件组件的引用需要在这里声明，告诉app如何组装应用

app.scss：对应于app.html的scss

main.ts：入口文件

代码分析：

app.component.ts

目录位置：src/app/app.component.ts

import { Component } from '@angular/core'; 引入angular/core就是angular基础核心里的组件

import { Platform } from 'ionic-angular';引入ionic-angular里的platform组件

import { StatusBar } from '@ionic-native/status-bar';引入ionic-native即ionic中于手机适配的原生组件statusBar-状态栏

import { SplashScreen } from '@ionic-native/splash-screen';引入ionic-native即ionic中于手机适配的原生组件SplashScreen -启动幕布

import { TabsPage } from '../pages/tabs/tabs'; 引入src/pages/tabs/tabs.ts文件中的tabs类

@Component({ templateUrl: 'app.html'}) export class MyApp {} 注解声明Myapp类为component(组件)并且向外export（暴露、公开） Myapp 类（这样其他的类才可以引用）

export class MyApp {

  rootPage:any = TabsPage; //声明一个变量rootPage 他的类型是any，就是任意类型。并且赋值 TabsPage

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {//ts文件的构造器，除了静态文件的引用，其他动态文件的引用都要经过构造器 自动注入，例如：Platform指的是我们上面通过import引入的Platform类，而platform指的是Platform类构造的对象。

    platform.ready().then(() => {//上面我们构造了Platform的对象platform，这里我们就可以用Platform类里的方法ready()，这里ready()方法是指APP在手机上运行启动成功后会执行ready()方法，然后我们就可以做一些其他操作，比如下面的 statusBar.styleDefault();设置一下手机的statusBar为默认样式；splashScreen.hide();让手机启动的幕布隐藏起来

      statusBar.styleDefault();

      splashScreen.hide();

    });

  }

}

ES6的语法与ES5有很大的差别，比如ES6引入了类、对象、封装、继承等概念，这里我们想用tabs.ts中的方法或变量，首先就需要引入src/pages/tabs/tabs.ts文件中的tabs类，后面我们将会详细分析代码

---

目录位置：src/pages

pages目录下

（这里是以tabs样式的APP为例）

src/pages/tabs:

tabs.html：页面构建的tabs风格的页面加载入口

tabs.ts：对应于tabs.html页面的交互代码文件

src/pages/home：

home.html：html页面

home.scss：home.html对应的scss样式

home.ts：home.html页面的交互代码文件，相当于js代码，当然是es6的语法

作者：凌风大师兄
链接：https://www.jianshu.com/p/3b86ff5ed2b1