博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ionic3学习之目录结构分析
阅读量:7114 次
发布时间:2019-06-28

本文共 1396 字,大约阅读时间需要 4 分钟。

ionic3目录结构

新建工程

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

ionic start myApp tabs

如果不熟悉搭建环境的同学,可以去看下

工程图示

工程目录

工程目录说明:

  • 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 目录说明

src 目录说明

  • app: 应用根目录
  • assets: 资源目录(静态文件(图片, JS 框架)),本人用到最多的是图片资源
  • theme: 主题文件, 里面有一个 scss 文件, 设置主题信息。

src 下面文件说明

app 目录:

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

pages目录:

clipboard.png

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

项目运行图

clipboard.png

转载地址:http://mcwel.baihongyu.com/

你可能感兴趣的文章
MyBatis学习总结(三)——优化MyBatis配置文件中的配置
查看>>
BZOJ2793[Poi2012]Vouchers——枚举
查看>>
Ajax学习总结(1)——Ajax实例讲解与技术原理
查看>>
elisp片段(1)--文件保存时自动上传到远程FTP
查看>>
perl测试文件
查看>>
JavaScript强化教程——javascript性能优化
查看>>
搭建 Postfix、Dovecot 邮件服务
查看>>
日志behavior行为
查看>>
导航栏二级下拉菜单的js特效
查看>>
npm安装gulp-sass报错: checking for Python executable "python2" in the PATH
查看>>
OSI 七层模型与各层设备对应 详细解释<TCP/IP下数据是如何进行传输>
查看>>
mysql分区性能测试
查看>>
Android中设置ListView内容刷新问题
查看>>
jqgrid调整宽度自适应
查看>>
MM即兴之作
查看>>
解决Performance Dashboard 两个datetime 列的差别导致了运行时溢出
查看>>
mysql 常用命令
查看>>
检测网络通开启exe
查看>>
IE6,IE7,firefox火狐浏览器兼容性在DIV+CSS中的写法
查看>>
AVPlayer播放本地视频没有声音
查看>>