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上的地址是 https://github.com/driftyco/ionic,网站 http://ionicframework.com。官方网站上的文档也比较全,大部分组件都有示例代码和效果展示。组件文档可以查看:http://ionicframework.com/docs/components/#overview ,各个组件的api文档可以查看:http://ionicframework.com/docs/api/。

安装Ionic命令行工具

首先我们需要安装Ionic命令行工具,使用npm安装:

1
npm install -g ionic

因为我们这个实例是只创建web应用,不打包成手机app,如果你需要打包,或使用cordova插件,还需要安装cordova
安装完成后,可以通过ionic help来查看各个提供的功能。ionic命令行工具除了提供创建项目、打包web应用(底层使用的是webpack来编译、minify和打包代码)等功能以外,它还封装了cordova的功能,所以它也可以用来添加cordova的插件、平台、打包手机app等。

我当前的版本是2.2.1。如果你之前安装过之前的版本,请先更新。虽然2.x版本开始就支持Angular2,但是,新版本总是会修复一些bug,或者完善编译、打包的一些功能和选项。

创建项目和运行

接下来使用下面的命令创建一个应用:

1
ionic start ionic2-todolist blank --v2 --no-cordova

其中ionic start就是根据项目脚手架创建一个项目, ionic2-todolist是我们的app的名字,blank的脚手架的模板,我们使用blank来从头创建一个应用。ionic2提供了几个模板,有sidemenu, tabsblank, complex-list等,可以通过ionic start -l查看可用的模板。当然你也可以在github上找其他开发者提供的模板或脚手架,可以直接下载下来来使用。
--v2指的是我们要创建ionic2的版本。--no-cordova是说不使用cordova,因为这个例子里我们不打包手机app。
创建创建完以后,它会自动调用npm install安装依赖包,根据你的网络情况,可能很慢甚至有些无法下载,请自行想办法解决。

然后,进入新建的目录,运行:

1
ionic serve

它会编译ts文件,打包、使用监听方式启动测试服务器运行,如果修改了文件,会自动编译然后刷新页面。

项目结构

ionic是基于Angular2的,所以它的项目结构跟Angular2类似,目录结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
├── 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,都会有一个这样的文件。里面的内容也很简单,我们最常用到的可能就是代理设置:

1
2
3
4
5
6
7
8
9
10
11
12
{
"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,那就会有这个文件。这个文件的内容大致如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
<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

这里面有几个文件:

1
2
3
4
5
main.ts
app.module.ts
app.component.ts
app.html
app.scss

这几个文件,从名字就能看出来,跟Angular2项目中的几个入口文件类似。其中main.ts就是入口文件,它用下面的方式初始化我们的app模块:

1
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts里面就是定义的app模块,app.component.ts定义的就是应用的根组件,这里跟Angular2不一样的地方是,需要用ionic的方式来加载根组件:

1
2
3
4
5
6
7
8
9
declarations: [ MyApp, HomePage ],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],

在引入根组件的时候,需要用IonicModule.forRoot(MyApp)来引入,在bootstrap里面就不是直接初始化MyApp,而是IonicApp。同时,对于Ionic2里面的所有的组件(简单来说就是需要显示在页面上的组件),需要加入到entryComponents的列表里。

除了上面说的以为,其他的配置,像declarationsproviders,配置方式跟运行机制跟Angular2是一样的。

ionicons

Ionic还提供了一套设计非常好的图标库,ionicons。地址是 http://ionicframework.com/docs/ionicons/ 。Ionic的很多组件也都用到了一些图标,例如后退、关闭等图标。这些图标是在ionic的css里面以字体的方式加载的,所以,你应该在项目中尽量使用这些图标。

@ionic/app-scripts

最后需要说明的就是ionic-app-scripts,它在package.json文件中作为devDependencies加入,里面有很多帮助我们编译、运行项目的脚本。除了创建是项目里面自带的build, clean,还有很多其他的脚本可以允许。例如下面的内容:

1
2
3
4
5
6
7
"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等有一定的了解,然后对项目中的各种配置有一些了解,才能在之后的开发中比较顺利的进行。

坚持原创技术分享,您的支持将鼓励我继续创作!