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的页面。

项目运行图