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
你也可以使用yarn来进行安装,执行:
安装完成后,执行以下命令验证安装结果
如果安装正常,你应该可以看到系统显示版本号。
设置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-appionic 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 组件。为了验证这个猜想,依次打开以下的文件查看:
app.component.html1 2 3 <ion-app > <ion-router-outlet > </ion-router-outlet > </ion-app >
可以看到,里面是一个 ion-router-outlet, 和 Angular 中 router-outlet 的功能一致。作为显示不同界面的占位符。
app-routing-modules.ts1 2 3 4 const routes: Routes = [ { path: '' , redirectTo: 'home' , pathMatch: 'full' }, { path: 'home' , loadChildren: './home/home.module#HomePageModule' }, ];
可以看到,默认是路由到 home 组件
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-“ 前缀。
运行程序就可以看到效果了。
下一步 下一篇文章 中,我们将使用本地的相机和存储能力来扩展应用。