Ionic2入门教程 实现TodoList App-1 初识Ionic2

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上的地址是 github.com/driftyco/io… ionicframework.com。官方网站上的文档也比较全，大部分组件都有示例代码和效果展示。组件文档可以查看：http://ionicframe… ，各个组件的api文档可以查看：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)，搜索引擎的参数，应用名等。可以参考：developer.mozilla.org/en-US/Add-o…

theme/variables.scss

ionic有设计良好的手机端的组件，也提供了几个默认颜色，我们可以通过修改这个文件，修改几个默认颜色，也可以设置很多组件的颜色等属性。

assets

这里面就是存放应用中用到的各种图片等资源文件。

app

这里面有几个文件：

main.ts
app.module.ts
app.component.ts
app.html
app.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。地址是 ionicframework.com/docs/ionico… 。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等有一定的了解，然后对项目中的各种配置有一些了解，才能在之后的开发中比较顺利的进行。