什么是 ionic?他和 Cordova、Angular2 有什么联系?
ionic = Cordova + Angular + ionic CSS
Cordova 提供了使用 JavaScript 调用 Native 功能,ionic CSS 是一套 UI 框架,ionic 对 Angular 进行了封装。
ionic3
ionic 基于 AngularJS 开发。由于 AngularJS1.x 版本在性能上已经很难有较大提升,Google 推出了全新设计的 Angular 2,ionic 也对应着出了2。
ionic2 与一代相比有较大的变化,基于最新的 Angular 2 ,使用 TypeScript 进行开发,如果您没有接触过 AngularJS 或 Ionic1.x,完全不用担心,直接从 ionic2 开始学习即可。
ionic3 是 Angular4.0 推出之后的跟进版本,变化幅度不大。
安装和运行
如果没有安装过 Node.js,先去官网下载一下。
// 安装
$ npm install -g cordova ionic
// 安装后可以验证一下版本
$ ionic -version
3.5.0
// 创建应用
// cd到要创建项目的目录,输入以下内容创建ionic项目
// ionic3Demo是项目名,tabs是模板(默认是tabs,其他还有tutorial等)
$ ionic start ionic3Demo tabs
// 在浏览器中运行项目
$ cd ionic3Demo/
$ ionic serve
-g 代表全局安装
install 可以简写为 i
-version 可以简写为 -v
剩下的还有 –save、–dev 之类的,遇到了再慢慢了解吧
如图:
在web上运行 iOS、Android、WindowsPhone 项目
把浏览器中的地址改为:
http://localhost:8100/ionic-lab
src 就是以后开发写代码主要的地方
Tabs 分析
打开 app.component.ts
可以看到这句代码
rootPage:any = TabsPage;
这个相当于 iOS 的 rootViewController
和 Android 的 MainActivity。
回忆一下我们一开始选择的 Tabs 模板,所以这里生成的是 tabs。打开 src/pages/tabs/tabs.ts
,可以看到这些代码:
import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = ContactPage;
constructor() {
}
}
这个 TabsPage,就代表了应用最下面的三个 TabBar。上面分别指出了他们的路径。
Ionic 3 的导航和 iOS 一样是一个栈,push 到新界面,pop 回旧界面。我们在构造函数中设置了 this.navCtrl 属性,我们可以调用 this.navCtrl.push() 方法,来导航到一个新的页面。