针对Ionic-4
传送门
跟着官方示例项目学Ionic-1(blank,tabs)
跟着官方示例项目学Ionic-2(tutorial,sidemenu)
跟着官方示例项目学Ionic-3(super)
跟着官方示例项目学Ionic-4(conference)
写在前面
最近在学Ionic,在通读了Ionic官网的文档后,大致了解了Ionic主要工作内容:
- 在Angular的基础上,提供了更适合移动开发的一系列组件.(menu,nav,card等).
- 在cordova的基础上,提供了cordova插件的Typescipt封装,使得调用cordova插件更容易.
- 提供了一组图标和主题,是的生成的移动应用更美观.
然后,仅仅了解个大概可不算学会了Ionic,程序员学习,提高最直接的方法就是阅读源码,特别是写的好的源码,所幸Ionic官方提供了好几套的示例程序,接前Ionic程序在vs code中断点调试之后,我对几个starter的源代码进行了阅读,通过代码阅读,对Ionic如何进行组件(compoent)和插件(plugin)的调用,程序的运行情况有了更深入的了解.
starer 示例
| Starter | Description | 备注 |
|---|---|---|
| blank | A blank starter project | 空白项目(略过) |
| tabs | A starting project with a simple tabbed interface | 包含底部分页的项目 |
| sidemenu | A starting project with a side menu with navigation in the content area | 包含滑动菜单的项目 |
| tutorial | A tutorial based project that goes along with the Ionic | 基本的Ionic教程项目 |
| super | A starting project complete with pre-built pages, providers and best practices for Ionic development. | 包含推荐的开发实践的完整项目(页面,服务划分等) |
| conference | A project that demonstrates a realworld application documentation | 一个真实的演示项目 |
| aws | AWS Mobile Hub Starter | Amazon 移动应用 |
可以看出,前面4个是入门级别的,后面3个相对完整,有一定的借鉴意义.
tabs 工程
tabs 工程是通过官方开始教程构造的项目,Get started with Ionic Framework,
启动tabs可见,这是一个包含3个页面的应用程序,每个页面有标题,内容.
应用的目录结构如下:
ionic-tabs-app/
|
|-- resources/ * 资源文件,分为Android和Ios
|
|-- src/
| |-- app/
| | ├── app.component.ts * 入口组件
| | └── app.module.ts * 主模块
| | └── app.html * 主组件页面布局
| | └── app.scss * 全局Sass
| | └── main.ts * 主程序
| |
| |-- assets/
| | ├── icon/
| | | └── favicon.ico * 页面图标
| | |
| | └── imgs/
| | └── logo.png * 程序logo
| |
| |-- pages/ * 包含所有的页面
│ │ ├── about/ * 关于页面 page
│ │ │ ├── about.html * 关于页面 template
│ │ │ └── about.ts * 关于页面 code
│ │ │ └── about.scss * 关于页面 stylesheet
│ │ │
│ │ ├── contact/ * 联系人页面 page
│ │ │ ├── contact.html * 联系人页面 template
│ │ │ └── contact.ts * 联系人页面 code
│ │ │ └── contact.scss * 联系人页面stylesheet
│ │ │
│ │ │── home/ * 主页面 page
│ │ │ ├── home.html * 主页面 template
│ │ │ └── home.ts * 主页面 code
│ │ │ └── home.scss * 主页面 stylesheet
│ │ │
│ │ │
│ │ │── tabs/ * 分页 page
│ │ │ ├── tabs.html * 分页 template
│ │ │ └── tabs.ts * 分页 code
| |
│ ├── providers/ * 包含所有的可注入服务
| |
│ ├── theme/ * 应用主题文件
| | ├── variables.scss * 应用scss变量
| |
| └-- index.html
|
|-- typings/ * JavaScript 类型声明
| └── cordova-typings.d.ts
|
|-- www/ * ionic serve 运行时候生成站点目录
| ├── assets/
| | ├── data/
| | |
| | ├── fonts/
| | |
| | ├── img/
| |
| │── build/
| |
| │── index.html
| |
| │── manifest.json
| |
| └── service-worker.js
|
├── .editorconfig * 代码风格
├── .gitignore * git忽略文件
├── LICENSE * License 文件
├── README.md * Readme
├── config.xml * Cordova 配置文件
├── ionic.config.json * Ionic 配置文件
├── package.json * Javascript 工程文件
├── tsconfig.json * typescript 编译配置文件
├── tslint.json * TypeScript 书写规范规则文件
所有的ionic工程结构都大致如此,随着项目的复杂,pages和providers会有更多的东西.
index.html
与普通的angular区别不大,body中使用ion-app作为程序的入口
<ion-app></ion-app>
app目录
- appModule.ts
a. 引入的ionic模块有:
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
在@NgModule中可以看出,和普通的Angular不同,程序的主component并不是我们自己写的组件,而是IonicApp,它的template就是<ion-app>,然后通过给IonicModule传递MyApp的方式,把我们自己写的组件启动起来.
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
b. 引入的ionic-native有:
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
包括StatusBar和SplashScreen
- app.html
仅一行代码
<ion-nav [root]="rootPage"></ion-nav>
<ion-nav>导航组件作为Tab项目的主compent,提供了移动端的标准栈式导航.
Navigation-doc
从生成的页面中能发现,实际上ionic会把<ion-nav>包装到<ion-app>之中.
- app.component.ts
rootPage:any = TabsPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
做了2件事,给ion-nav组件传入root页面为Tabs页面.构造器传入platform,statusBar,splashScreen.这是一个很标准实现,当平台准备就绪之后,给状态栏设置默认样式,隐藏启动界面.
P.S. splash的图片怎么设置?
在cordova的配置文件config.xml中,对不同的平台有不同的<splash>
tabs目录
代码很少,核心就是<ion-tabs>以及<ion-tab>,结合官方文档
Tabs-doc,每个tab配置有tabTitle标题,tabIcon图标,[root]每个分页的根页面.这里分别指向了HomePage,AboutPage,ContactPage三个页面.
about,contact,home目录
- html文件
每个页面都很标准,以相对复杂的contact为例
<!-- 头部 -->
<ion-header>
<!-- title要嵌入到navbar中 -->
<ion-navbar>
<ion-title>
Contact
</ion-title>
</ion-navbar>
</ion-header>
<!-- 内容部份 -->
<ion-content>
<!-- 通过list 的 list-header 和 item 配合,实现列表显示 -->
<ion-list>
<ion-list-header>Follow us on Twitter</ion-list-header>
<ion-item>
<ion-icon name="ionic" item-start></ion-icon>
@ionicframework
</ion-item>
</ion-list>
</ion-content>
- ts文件
constructor(public navCtrl: NavController) {
}
都传入了NavController,这个是由<ion-nav>组件创建并初始化的,作为一个Provider传入page后,用它能让页面实现跳转,由于tab项目中的几个都是单页面,所以实际并没有用到.
