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

npm install -g ionic

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

yarn global add ionic

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

ionic --version

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

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

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

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

建立示例应用

ionic start todo-ionic-app blank

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

cd todo-ionic-app
ionic serve

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

> 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 中的几乎一样，除了多了一些配置文件和特定的目录以外:

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

   <ion-app>
     <ion-router-outlet></ion-router-outlet>
   </ion-app>

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

2. app-routing-modules.ts

   const routes: Routes = [
     { path: '', redirectTo: 'home', pathMatch: 'full' },
     { path: 'home', loadChildren: './home/home.module#HomePageModule' },
   ];

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

3. home.page.html

<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 文件，修改文件代码如下：

<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-“ 前缀。

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

下一步

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