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的语法

你可能感兴趣的:(ionic3核心代码分析)