ionic3学习之目录结构分析

ionic3目录结构

新建工程

在要创建项目的目录下使用命令：

ionic start myApp tabs

如果不熟悉搭建环境的同学，可以去看下 ionic3学习之环境搭建

工程图示

这里写图片描述

工程目录说明:

hooks：编译 cordova 时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
node_modules ： node 各类依赖包，程序开发时需要的依赖包
resources ： android 或者 ios 资源（更换图标和启动动画相关）
src：开发工作目录，页面、样式、脚本和图片都放在这个目录下（我们开发主要是在这里）
platforms：生成 android 或者 ios 安装包路径（platforms\android\build\outputs\apk： apk所在位置）
执行 cordova platform add android 后会生成
www：静态文件
plugins：插件文件夹，里面放置各种 cordova 安装的插件
config.xml: 打包成 app 的配置文件
package.json: 配置项目的元数据和管理项目所需要的依赖
tsconfig.json: TypeScript 项目的根目录，指定用来编译这个项目的根文件和编译选项
tslint.json：格式化和校验 typescript

src 目录说明

这里写图片描述
- app：应用根目录
- assets：资源目录（静态文件(图片， JS 框架))，本人用到最多的是图片资源
- theme：主题文件，里面有一个 scss 文件，设置主题信息。

src 下面文件说明

app 目录：

main.ts ：为文件的入口文件
app.module.ts ：根模块，告诉 ionic如何组装应用。这个和 angular2 以上是一致的
app.component.ts ：根组件

pages目录：
这里写图片描述

tabs ：就是界面底部的tab切换配置界面
tabs以外 ：就是对应于不同的界面组件（也可以叫做页面），(可以看下项目运行图)

Tabs 分析

打开 app.component.ts 可以看到代码

导入了 TabsPage 这个页面，并且设置为了根页面

import { TabsPage } from '../pages/tabs/tabs';

rootPage:any = TabsPage;

接着我们打开 src/pages/tabs/tabs.ts

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

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

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

  constructor() {

  }
}

这个 TabsPage，就代表了应用最下面的三个 TabBar页面。