Ionic跨平台移动应用开发教程(一)

Ionic 是一个HTML5 应用程序开发框架, 可以让你使用流行的 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。早期的 Ionic 是和著名的前端框架 Angular 绑定的,在4.0版本以后,已经可以选择使用其它流行的前端框架(Vue, ReactJS)来构建应用了。本系列文章的目标是演示如何通过 Ionic 和相关技术来构建一个跨平台(Android, iOS)的移动应用。

在本教程中,我们使用 Angular 作为核心框架,所以需要读者有一定的 Angular 开发基础。如果你还没有接触过 Angular, 强烈建议先本站的 Angular 入门系列文章: Angular课程实验手册(一)

安装Ionic CLI

确保你已经安装了node, 执行以下命令安装Ionic CLI

1
npm install -g ionic

你也可以使用yarn来进行安装,执行:

1
yarn global add ionic

安装完成后,执行以下命令验证安装结果

1
ionic --version

如果安装正常,你应该可以看到系统显示版本号。

设置yarn为Ionic CLI的包管理工具(可选)

细节可以参考另一篇文章:如何设置Yarn作为Ionic CLI的包管理工具
可以简单的执行以下命令来完成:

1
2
ionic config set -g npmClient yarn
[OK] npmClient set to "yarn"!

建立示例应用

1
ionic start todo-ionic-app blank

安装完成以后,进入项目目录,运行程序,验证项目构建成功

1
2
cd todo-ionic-app
ionic serve

如果安装正常,系统将显示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
> ng run app:serve --host=localhost --port=8100
[INFO] Waiting for connectivity with ng...

[INFO] Development server running!

Local: http://localhost:8100

Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[ng] ℹ 「wdm」: wait until bundle finished: /
[ng] Date: 2019-07-16T13:32:30.608Z
[ng] Hash: 335a1389e4700cdf8bd5
[ng] Time: 20357ms
[ng] chunk {common} common.js, common.js.map (common) 20.2 kB [rendered]
[ng] chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 285 kB [initial] [rendered]
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 4.92 kB [rendered]
[ng] chunk {main} main.js, main.js.map (main) 31.8 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.79 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 87.9 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.37 MB [initial] [rendered]
[INFO] ... and 173 additional chunks
[ng] ℹ 「wdm」: Compiled successfully.

并且会自动打开浏览器,显示应用的首页。

Ionic的项目结构

用 VS Code 打开刚才新建的项目,可以看到,Ionic CLI 默认为我们建立的项目是一个基于 Angular 的项目,所以我们看到的项目结构也和 Angular 中的几乎一样,除了多了一些配置文件和特定的目录以外:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
todo-ionic-app
+ e2e
+ node_modules
+ src
+ app
+ home
home.module.ts
home.page.html
home.page.scss
home.page.spec.ts
home.page.ts
app-routing.modules.ts
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
+ assets
+ environments
+ theme
...

熟悉 Angular 的读者一样可以看出,这个项目的基本结构应该是以 app.component 为入口,使用 routing 来组织不同的界面,提供界面间的导航。默认的首页应该是 home 组件。为了验证这个猜想,依次打开以下的文件查看:

  1. app.component.html
    1
    2
    3
    <ion-app>
    <ion-router-outlet></ion-router-outlet>
    </ion-app>

可以看到,里面是一个 ion-router-outlet, 和 Angular 中 router-outlet 的功能一致。作为显示不同界面的占位符。

  1. app-routing-modules.ts
    1
    2
    3
    4
    const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', loadChildren: './home/home.module#HomePageModule' },
    ];

可以看到,默认是路由到 home 组件

  1. home.page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<div class="ion-padding">
The world is your oyster.
<p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
</div>
</ion-content>

这个就是应用首页显示的内容,和我们运行程序看到的一样。

设置页面布局

Ionic 提供了多种常用的页面布局样式,包括:Hader and Footer Layout, Tabs Layout, Menu Layout, Split Pane Layout。在示例应用中,我们先使用最简单的 Header and Footer Layout 来观察一下运行的效果。

根据上一节的分析,要改变应用整体的布局,改变 app.component 组件就可以了。

打开 app.component.html 文件,修改文件代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>

<ion-content padding>
<ion-router-outlet></ion-router-outlet>
</ion-content>

<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>

</ion-app>

这样我们就固定了整个应用的基本布局,使每个界面显示的时候都会包含固定的 header 和 footer。这里使用了 ionic 自带的 UI 库。所有的标签都有 “ion-“ 前缀。

运行程序就可以看到效果了。

下一步

下一篇文章中,我们将使用本地的相机和存储能力来扩展应用。

本文标题:Ionic跨平台移动应用开发教程(一)

文章作者:梅老师

发布时间:2019年07月19日 - 11:07

最后更新:2020年09月16日 - 08:09

原始链接:https://www.mls-tech.info/app/ionic/ionic-app-getting-start-1/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。