Ionic2入门教程——初识Ionic2

##项目结构
ionic2是基于Angular2的,所以它的项目结构和Angular2类似,具体目录结构如下:
|——ionic.config.json #ionic的配置文件
|——package.json
|——resources #打包app使用的icon图标和加载页图片
…….|——android #生成的android平台的各个尺寸的图标和加载页图图片
…….|——icon.png #应用程序图标
…….|——ios # 生成的ios平台的各个尺寸的图标和加载页图片
…….|——splash.png # 加载页图片
|——src #页面源文件
…….|——app
…….|——assets
…….|——declarations.d.ts
…….|——index.html
​ …….|——manifest.json
…….|——pages
…….|——service-worker.js
…….|——theme
|——tsconfig.json
|——tslint.json
|——www #编译后的文件夹,Cordova默认用www路径并打开里面的index.html
|——plugins
|——platforms
|——hooks

###项目环境相关文件说明

  1. package.json:每个基于node平台的项目都有这样一个文件,里面定义了项目的基本信息,还有开发和运行需要用到的库。

  2. ionic.config.json:ionic项目的基本配置文件,里面的内容部分如下:

1493718125065

设置了proxies以后,我们的服务端就不需要考虑跨域访问的问题。当然,如果你的服务器端不允许跨域访问,在你部署你的应用的时候,也需要相应的配置,例如在nginx中设置反向代理。

  1. config.xml:当项目启用了cordova并且打算封装成Hybird App就会有这个文件,里面的内容部分如下:

1493718625450

其中,name就是app的显示名,plugin就是使用的cordovas插件,更多内容可参考cordova的文档。

  1. tslint.json、tsconfig.json:这是用tslint做代码检查的配置。

  2. plugins:存放所添加的cordova插件。

  3. platforms:存放平台相关的文件,每次编译app的时候,就会根据添加的平台,在这里面生成编译文件和打包的文件。

  4. hooks:我们可以编写脚本,来定义在每次执行某些任务的时候被调用的任务。也可以定义某个插件相关的脚本。例如,如果你加了某一个微信的插件,这个插件可能有一个钩子,帮助你在每次添加完这个插件的时候,运行一些任务,来进行一些项目的配置,例如微信的appId等。