1. Ionic 项目结构
这是初始化创建的 Ionic 项目结构,接下来将一一讲解。
因为 Ionic 使用了 Cordova 技术,所以项目的文件架构基本和 Cordova 的项目类似。
1.1 app 文件夹
项目文件夹,后续的代码编写都将在这里进行,因为使用的语言就是 HTML5/CSS(Sass)/JavaScript,所以项目结构类似于静态网站的项目结构。
1.2 hooks 文件夹
hooks 文件夹 主要放置在提交给 Cordova 处理的时候,自定义的一些动作,主要用于一些自动化处理的动作,如在编译前、编译后、运行前等等时刻插入自己定义好的动作。具体的介绍可以查看其中包含的文件 README.md
。
1.3 node_modules 文件夹
包含了所有使用 npm 安装的依赖包。
1.4 platforms 文件夹
platforms 包含了 iOS 平台和 Android 平台的项目文件,一般不需要去修改,除非你需要修改一些原生的配置,如需要配置不同平台的推送通知的时候,才需要对其中的相关文件进行修改。
1.5 plugins 文件夹
存储所有 Cordova 插件的位置,注意区别于 npm 安装依赖包的位置。
安装命令如下,{plugin} 是插件的 ID 或者 插件 GitHub 的 URL:ionic plugin add {plugin}
1.6 resources 文件夹
放置了平台的图标(icon)和启动界面图片(splash),注意适配不同的分辨率,后续章节会作详细介绍。
1.7 www 文件夹
独立的项目,用于在浏览器调试时生成的文件夹,这样项目生成的 cordova/ionic 等编译文件将不在项目文件夹中存在,可以用于单纯的 web 发布使用。具体的配置在下面的 ionic.project
文件中有详细的介绍。里面的 index.html 是 app 的入口。
1.8 config.xml
项目整体配置,配置文件的节点和 Cordova 是一样的,具体的节点解释可以参见。
1.9 gulpfile.js
是一个基于流的自动化构建工具,文件中配置了项目编译过程中执行的构建流事件。大型项目需要自动构建的时候才会去修改相关配置,一般不去修改即可。
1.10 ionic.config.js
配置用于执行 Ionic CLI 时候使用。
1.11 ionic.config.json
可以自定义配置值,供项目读取。
1.12 ionic.project
除了基本信息的配置,还可以在其中添加一些外部的配置,如添加一个 Gulp Watch,用于实现 LiveReload。
"gulpStartupTasks": [ "watch"],"watchPatterns": [ "./scss/**/*.scss", "./www/js/**/*.js", "./www/build/index.html"]
1.13 package.json
项目依赖的包在这里管理,如果项目中丢失或者初始化,使用 npm install
命令的时候,会加载此配置文件中的依赖包。
这里只是大概了解了每个文件夹、文件的作用,更多的使用方法将在接下来的实际项目中有详细地讲解。