第02课:搭建开发环境与创建骨架代码

第02课:搭建开发环境与创建骨架代码

我们将使用 Ionic 命令行工具来创建和开发 Ionic 应用,因此需要首先安装 Node.js。只需要从 Node.js 的官方网站上下载安装包,再进行安装即可。推荐使用 LTS 版本,本课程使用的是 Node.js 8.9.3 版本。Node.js 安装程序已经自带了 npm 5.5.1。推荐使用 Yarn 作为依赖管理工具,替代 npm。可以在 Yarn 的官方网站上找到安装文档。这里就不再赘述了。

安装了 Node.js 和 Yarn 之后,下一步是安装 Ionic 命令行工具。

$ yarn global add cordova ionic

完成安装之后,Cordova 的版本是7.1.0,Ionic 的版本是3.19.0。我们就可以通过 ionic 来调用命令行工具。

创建应用

接着我们就可以使用 ionic start 命令来创建应用。可以选择创建一个空白的应用,或是基于已有的模板来创建应用。ionic start 命令的第一个参数是应用的名称,会作为包含生成的骨架代码的目录的名称;第二个参数是模板的名称。Ionic 默认提供了7种模板。这些模板也可能随着 Ionic 的版本升级而不断变化。

  • 空白应用:模板名称为 blank。生成的应用是空白的,适合于已有经验的开发人员。
  • 底部标签式应用:模板名称为 tabs。生成的应用的底部是一个标签页,每个标签可以有自己的页面。
  • 带侧边栏菜单的应用:模板名称为 sidemenu。生成的应用的左上角是一个可以打开侧边栏菜单的按钮。也可以通过手指向右滑动来打开侧边栏。
  • 超级完整版的应用:模板名称为 super。生成的应用非常完备,包含了很多作为示例的页面。建议初学者从这些页面中学习 Ionic 应用开发的最佳实践。
  • 会议应用:模板名称为 conference。这是一个完整的、现实世界中的、使用 Ionic 开发的会议日程相关的应用。
  • 教程应用:模板名称为 tutorial。这是与 Ionic 官方教程相对应的模板。
  • AWS Mobile 应用:模板名称为 aws。这是使用 AWS Mobile 作为后台的应用模板。

除了这些 Ionic 自带的模板之外,Ionic 还提供了在线模板商店,可以购买其他付费模板。本课程的实例应用选用的是带侧边栏菜单的应用模板。应用名称为“趣闻”。使用下面的命令来创建应用。

$ ionic start quwen sidemenu

ionic start 命令会询问是否与 Cordova 集成,回答 yes。当询问是否安装 Ionic Pro SDK 时,回答 no。然后进入生成的 quwen 目录,执行 ionic serve 就启动了 Ionic 自带的开发服务器。该服务器默认运行在 8100 端口。启动完成之后,会自动打开浏览器并访问 http://localhost:8100/,就可以看到生成的 Ionic 应用在浏览器中运行的效果。

在应用创建完成之后,需要配置该应用所支持的平台。该配置通过 ionic cordova platform 命令来完成。通过模板创建的应用不包含任何平台。可以使用ionic cordova platform add <platform>来添加新的平台。所支持的平台包含 Andriod 和 iOS。本课程的实例应用同时支持两种平台。

$ ionic cordova platform add android
$ ionic cordova platform add ios

同样的,也可以使用 ionic cordova platform remove 和 ionic cordova platform update 来分别删除和更新一个平台。

在平台安装完成之后,在项目的根目录下会出现 platforms 子目录,其中的 android 和 ios 分别包含了 Android 和 iOS 平台相关的文件。这些文件是自动生成的,一般情况下不需要手动管理。

可以在 Ionic 项目的目录下运行 ionic info 来查看本地环境的相关信息。当出现与 Ionic 相关的问题时,该命令输出的信息可以帮助更好的诊断问题。

cli packages: (/Users/fucheng/.config/yarn/global/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.7
    Cordova Platforms  : android 6.3.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.0
    ios-sim           : 6.1.2
    Node              : v8.9.3
    npm               : 5.5.1
    OS                : macOS
    Xcode             : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : /Users/fucheng/Library/Android/sdk

Misc:

    backend : pro

如果 ionic info 返回的结果正常,就说明 Ionic 的本地开发环境已经成功搭建完成。

本地开发

Ionic 命令行工具已经帮助完成了本地开发所需的必要设置,包括自动重新加载(Live Reload)。在对源代码进行修改之后,页面会自动刷新来显示更新之后的结果。由于 Ionic 应用本质是 Angular 应用,在大部分时候可以直接使用浏览器进行开发和调试。以 Chrome 为例说明,开发人员可以打开 Chrome 的开发者工具,并打开移动设备工具条,再选择需要作为测试目标的设备,如 Nexus 6P 或 iPhone 6S 等。这样就可以模拟出在相应设备上的显示效果。

下图给出了使用 Chrome 开发者工具来模拟实例应用的骨架代码在 Nexus 6P 上运行时的效果。

使用 Chrome 开发者工具

不过使用浏览器开发的一个限制是不能对应用中使用的 Cordova 插件进行测试。测试 Cordova 插件可以使用 Ionic 提供的 Ionic DevApp,或在本地使用 Android 或 iOS 模拟器,也可以连接实际设备进行测试。

Ionic DevApp 是一个可以快速测试 Ionic 应用的免费应用。可以在 Android 商店和苹果的 Apple Store 上找到对应平台的下载。使用 Ionic DevApp 需要一个 Ionic 的账号,可以在该应用上进行注册。注册并登录之后,Ionic DevApp 会搜索到同一网络下所有正在运行的 Ionic 开发服务器,然后点击需要测试的应用即可。为了查看 Ionic 应用测试中产生的日志信息,需要在运行 Ionic 开发服务器时添加 -c 参数,也就是运行 ionic serve -c 来启动服务器。

下图给出了 Ionic DevApp 的运行效果图。点击列表中的应用 quwen@8100 就可以运行。

Ionic DevApp 的运行效果图

使用模拟器测试 Ionic 应用所需要的环境与其他 Android 或 iOS 开发环境是一样的。对于 Android 来说,需要安装 Android SDK。推荐的方式是直接安装 Android Studio。Anroid 模拟器的运行性能可能不是特别理想,推荐使用轻量级的模拟器 Genymotion。对 iOS 来说,需要安装 Xcode。

可以使用ionic cordova emulate <platform>来启动模拟器并运行。如 ionic cordova emulate ios 来启动 iOS 模拟器并运行应用。在模拟器中运行时,也可以使用参数 --livereload 来启用自动加载功能。当代码修改时会自动刷新。下图是在 iPhone X 模拟器上运行应用的效果。

在iPhone X模拟器上运行效果

下图是在 Android 模拟器上运行应用的效果图。

Android 模拟器运行效果图

当在模拟器上进行足够的测试之后,可以使用ionic cordova run <platform>来在实际的设备上进行测试。

在 ID 选择方面,主流的 Web 开发工具都可以满足需求。常见的 IDE 包括付费的 WebStorm,以及免费的 Visual Studio CodeAtom 等。

骨架代码解析

下面我们来具体看一下通过命令行工具生成的应用的骨架代码,有助于了解 Ionic 应用的组织结构。在后续的开发中,需要遵循 Ionic 所推荐的目录结构和组织方式。骨架代码的组织结构如下图所示。

骨架代码结构

下面依次介绍骨架代码中的各个部分。

根目录下的文件

在根目录下面有一些文件,主要是与各种框架和工具相关的配置文件。

  • .editorconfig:配置 IDE 的 EditorConfig 文件;
  • config.xml:Cordova 的配置文件,大多数时候不需要手动修改,而是通过命令行工具来进行配置;
  • ionic.config.json:Ionic的配置文件,也不需要手动修改,同样通过命令行工具来进行配置;
  • tsconfig.json:TypeScript编译器的配置文件。具体的配置参考官方文档
  • tslint.json:tslint 的配置文件,用来对 TypeScript 代码进行静态检查。

除了这些根目录下的文件之外,还有一些子目录。

src

src 是 Ionic 应用的源代码根目录。在该目录下,index.html 是应用的唯一 HTML 页面,也是应用的入口。Cordova 会加载该页面来显示。该页面主要用来引用 JavaScript 和CSS 文件。manifest.json 和 service-worker.js 是 Progressive Web Apps(PWA) 所使用的。app 目录下包含的是应用的主模块和相关组件。pages 目录中包含不同页面对应的子目录。每个页面的子目录中包含对应的 HTML、TypeScript 和 Scss 文件。比如在 home 目录下,分别有对应的 home.html 、home.ts 和 home.scss 文件。theme 目录中包含对应用的主题样式进行定制的 Scss 文件。assets 目录中包含的是应用中的静态资源,包括 Logo 和图片等。另外一个在骨架代码中没有出现的子目录是 components,其中的每个子目录都对应一个 Angular 组件,也是包含对应的 HTML、TypeScript 和 Scss 文件。

platforms

Cordova 平台相关文件的目录,其中的子目录 android 和 ios 分别对应 Android 和 iOS 平台。

plugins

Cordova 插件的目录。骨架代码已经预先安装了几个常用的插件。可以根据需要使用 ionic cordova plugin 命令来安装其他插件。

resources

应用使用的资源文件,主要是图标和启动屏幕图片。可以使用 ionic cordova resources 命令来自动生成适配不同平台的图标和启动屏幕图片。

www

包含构建之后的文件。该目录中只有 HTML、JavaScript 和 CSS 文件。Cordova 实际加载的是该目录下的静态文件。

下一章中将介绍 Ionic 应用开发中使用的 Angular、TypeScript 和其他框架和工具。

上一篇
下一篇
目录