Ionic是一个基于Angular2的开发手机web app的框架，它包含了一整套手机端的样式组件，和一系列的功能服务组件。样式包括像按钮、表单、列表、header等都有提供。服务组件的话，包括tab、slider、侧边栏、模态窗口等也有很多，基本上能满足大部分手机web应用的开发需求。
需要说明的是，Ionic的版本也跟随Angular的版本，Ionic1是基于Angular1的，Ionic2是基于Angular2的。而Ionic提供了一个命令行的工具ionic-cli，他同时支持Ionic1和2的版本，只是通过选项来帮助创建不同版本项目脚手架。
同时，我们开发手机web应用的时候，经常会结合Cordova来将它打包成手机应用。对于这一点，ionic也提供了ionic-native来更方便的使用ng-cordova的插件。
总之，ionic提供了一整套完整的手机app开发的解决方案，从创建项目、开发、测试、打包、生成app甚至签名和提交app store都提供了完整的工具。（要使用它的云编译功能，需要上传开发者账号的证书，国内用户一般为了安全都不会这么用。）在这个教程里面，我们就来看看用如何用ionic来创建一个最简单的手机web应用，我们还是实现一个Todolist的例子，大家也可以结合着之前的教程Angular2入门教程-2 实现TodoList App ，来看看ionic2和Angular2在使用上的区别。
在教程的第一部分，我们先介绍Ionic2，包括安装、创建项目，以及了解一下用Ionic2命令行工具创建的项目结构和各个部分的代码。
Ionic在github上的地址是 https://github.com/driftyco/ionic，网站http://ionicframework.com。官方网站上的文档也比较全，大部分组件都有示例代码和效果展示。组件文档可以查看：http://ionicframework.com/docs/components/#overview ，各个组件的api文档可以查看：http://ionicframework.com/docs/api/。
安装Ionic命令行工具
首先我们需要安装Ionic命令行工具，使用npm安装：
npm install -g ionic
因为我们这个实例是只创建web应用，不打包成手机app，如果你需要打包，或使用cordova插件，还需要安装cordova
。安装完成后，可以通过ionic help
来查看各个提供的功能。ionic命令行工具除了提供创建项目、打包web应用（底层使用的是webpack来编译、minify和打包代码）等功能以外，它还封装了cordova
的功能，所以它也可以用来添加cordova
的插件、平台、打包手机app等。
我当前的版本是2.2.1。如果你之前安装过之前的版本，请先更新。虽然2.x版本开始就支持Angular2，但是，新版本总是会修复一些bug，或者完善编译、打包的一些功能和选项。
创建项目和运行
接下来使用下面的命令创建一个应用：
ionic start ionic2-todolist blank --v2 --no-cordova
其中ionic start
就是根据项目脚手架创建一个项目, ionic2-todolist
是我们的app的名字，blank
的脚手架的模板，我们使用blank来从头创建一个应用。ionic2提供了几个模板，有sidemenu
, tabs
， blank
, complex-list
等，可以通过ionic start -l
查看可用的模板。当然你也可以在github上找其他开发者提供的模板或脚手架，可以直接下载下来来使用。--v2
指的是我们要创建ionic2的版本。--no-cordova
是说不使用cordova，因为这个例子里我们不打包手机app。创建创建完以后，它会自动调用npm install
安装依赖包，根据你的网络情况，可能很慢甚至有些无法下载，请自行想办法解决。
然后，进入新建的目录，运行：
ionic serve
它会编译ts文件，打包、使用监听方式启动测试服务器运行，如果修改了文件，会自动编译然后刷新页面。
项目结构
ionic是基于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 ├── manifest.json └── service-worker.js
在上面的目录结构中，对于部分ionic用到的文件，在它的文件后面作了简要的说明，下一节再详细说明每个部分的用途的配置方式。
项目环境相关文件说明
首先，package.json
就不用说了，每个基于node平台的项目都有一个这样的文件，里面定义了项目的基本信息，还有开发和运行需要用到的库。
ionic.config.json
这个ionic项目的基本配置文件，不管你是创建一个单纯的web应用，还是想要封装成cordova的混合app，都会有一个这样的文件。里面的内容也很简单，我们最常用到的可能就是代理设置：
{ "name": "TodoList系统", "app_id": "", "v2": true, "typescript": true, "proxies": [ { "path": "/api", "proxyUrl": "http://service.mydomain.com/api" } ]}
设置了proxies
以后，我们的服务端就不需要考虑跨域访问的问题。当然，如果你的服务器端不允许跨域访问，在你部署你的应用的时候，也需要相应的配置，例如在nginx中设置反向代理。
config.xml
如果你在创建项目的时候，没有使用--no-cordova
，也就是说，你的项目启用了cordova，并且打算封装成混合手机app，那就会有这个文件。这个文件的内容大致如下：
... <name>TodoList系统</name> <description>hunt tickets on-site management system.</description> <author email="mavlarn@test.com" href="http://test.com/">mavlarn@猎票</author> <content src="index.html"/> <access origin=""/> <allow-navigation href="http://ionic.local/"/> <allow-intent href="http:///"/> <platform name="ios"> <allow-intent href="itms:"/> <allow-intent href="itms-apps:"/> </platform> <preference name="webviewbounce" value="false"/> ...... <preference name="SplashShowOnlyFirstTime" value="false"/> <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/> <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/></widget>
其中，name
就是你的app将来打包成app的时候的应用的显示名。plugin是使用的cordovas插件。里面还有一些其他配置，请参考cordova的文档。
tslint.json、tsconfig.json
这是用tslint做代码检查的配置。
resources
里面有2个文件，icon.png和splash.png，分别的打包的应用的显示名称和加载页的图片。你只要加了这两个文件，运行ionic resources
就可以生成各个尺寸的图标文件和图片。它会根据你设置的平台，生成各个平台的图标和文件的各个尺寸的文件。
plugins
这里面存在的你添加的cordova插件。
platforms
里面存放平台相关的文件，每次编译app的时候，就会根据添加的平台，在这里面生成编译文件和打包的文件。
hooks
这里面存放的是hook文件，也就是钩子。我们可以编写脚本，来定义在每次执行某些任务的时候被调用的任务。也可以定义某个插件相关的脚本。例如，如果你加了某一个微信的插件，这个插件可能有一个钩子，帮助你在每次添加完这个插件的时候，运行一些任务，来进行一些项目的配置，例如微信的appId等。
如果你只是想开发一个web应用，上面这些基本都不会管，有些文件甚至都不会生成。而我们开发具体的业务需要的，就是src下面的文件。
业务相关文件说明
index.html
src下面有几个文件，index.html当然就是打开的首页了。这个首页里面的内容(main.js, polyfills.js等)会在编译后生成。
menifest.json
这个文件是在index.html使用，用来设置网页的很多属性，包括网站的图标(favicon.ico)，搜索引擎的参数，应用名等。可以参考：https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json。
theme/variables.scss
ionic有设计良好的手机端的组件，也提供了几个默认颜色，我们可以通过修改这个文件，修改几个默认颜色，也可以设置很多组件的颜色等属性。
assets
这里面就是存放应用中用到的各种图片等资源文件。
app
这里面有几个文件：
main.tsapp.module.tsapp.component.tsapp.htmlapp.scss
这几个文件，从名字就能看出来，跟Angular2项目中的几个入口文件类似。其中main.ts就是入口文件，它用下面的方式初始化我们的app模块：
platformBrowserDynamic().bootstrapModule(AppModule);
app.module.ts里面就是定义的app模块，app.component.ts定义的就是应用的根组件，这里跟Angular2不一样的地方是，需要用ionic的方式来加载根组件：
declarations: [ MyApp, HomePage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ],
在引入根组件的时候，需要用IonicModule.forRoot(MyApp)
来引入，在bootstrap
里面就不是直接初始化MyApp
，而是IonicApp
。同时，对于Ionic2里面的所有的组件（简单来说就是需要显示在页面上的组件），需要加入到entryComponents
的列表里。
除了上面说的以为，其他的配置，像declarations
，providers
，配置方式跟运行机制跟Angular2是一样的。
ionicons
Ionic还提供了一套设计非常好的图标库，ionicons。地址是 http://ionicframework.com/docs/ionicons/ 。Ionic的很多组件也都用到了一些图标，例如后退、关闭等图标。这些图标是在ionic的css里面以字体的方式加载的，所以，你应该在项目中尽量使用这些图标。
@ionic/app-scripts
最后需要说明的就是ionic-app-scripts，它在package.json文件中作为devDependencies加入，里面有很多帮助我们编译、运行项目的脚本。除了创建是项目里面自带的build, clean，还有很多其他的脚本可以允许。例如下面的内容：
"scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "min": "ionic-app-scripts minify", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" },
当我们运行ionic serve
时，实际上就是运行的是npm run ionic:serve
，也就是对应的ionic-app-scripts serve
这个命令。当我运行npm run min
时，运行的是ionic-app-scripts minify
。一般情况下，你运行build
就会执行项目的编译（将TypeScript文件编译成js），然后把所有的js文件打包成main.js
，以及把所有的css合并成一个main.css
。但是，这样生成的文件比较大，也没有做代码混淆，你可以在运行build
以后，再运行min
,来进行代码的压缩、混淆等。运行完minify以后，main.js文件可以从原先的6.5M左右，减少到不到1.6M。在进行gzip压缩的话，基本上下载所有的文件是550K左右。已经基本可以满足手机端下载文件大小的需要。
完整的文档可以查看GitHub的地址
熟悉Angular2的架构的可能知道Angular2的编译可以使用Tree Shaking技术进一步减少文件的大小，ionic-app-scripts也提供了rollup
的参数来实现Tree Shaking，具体方法请参考官方文档。
有关项目的结构和配置，差不多就是这些，虽然说，即使你不知道这些是干嘛的，也能直接开始着手开发应用。但是，那就像闭着眼睛跑步，随便一个小坑就能让你跌倒。何况，很多人所谓的坑，实际上也只是他自己不会用或者用得不对。所以，开始Angular和Ionic的应用，还是需要对node, npm, webpack等有一定的了解，然后对项目中的各种配置有一些了解，才能在之后的开发中比较顺利的进行。
网友评论