这篇笔记整理了Ionic的基本概念、最直观常用的添加页面、以及在不同页面之间导航跳转的方式。
一、Ionic介绍
ionic 抛弃了 Angular 中的路由框架,而是实现了自己的堆栈式页面导航功能,通过简单的 push 和 pop方法,实现页面的跳转和返回,更符合移动开发习惯。
ionic的优点很明显,就是写起来快,write once,run anywhere。除了少数需要针对不同平台特性的适配外,其他的一套代码搞定,使用不同的打包命令,可以生成在Android和iOS上运行的APP。
ionic的缺点也是很明显,性能,还是性能,Android 4.4以下就别使用此框架了。安卓低端机上比较卡顿,用户体验不是很好。
二、Ionic常用基础操作
安装指定版本的ionic:npm install -g ionic@x.xx.xxx(版本号)
创建ionic3应用:ionic start xxx(项目名)xxx(模板名) --type=ionic-angular
不跳出升级提示:在命令后加上–no-interactive
运行:ionic serve(浏览器自动打开加上–open)
添加页面:ionic g page xxx(页面名)以Tabs模板为基础
三、添加页面
1.命令行语句:ionic g page xxx(页面名)
2.app.module.ts会自动导入新页面
3.在@NgModule中声明(declaration)XxxPage,在entryComponents中也加入XxxPage
import {
SynopsisPage} from "../pages/synopsis/synopsis";
@NgModule({
declarations: [
SynopsisPage,
],
entryComponents: [
SynopsisPage,
],
(2)使用RouterLink指令定义链接,它定义了如何像在组件模板中声明的那样导航到指定路由。
四、Ionic应用的页面导航
4.1 基本导航
ionic的导航通过组件处理,它是NavController的声明性组件,作为简单的堆栈,用新页面被推入与弹出来进行导航。
首先要用“root”属性将创建的任何Nav最初加载的根页面设置为:
import {
StartPage } from 'start'
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
class MyApp {
// First page to push onto the stack
rootPage = StartPage;
}
通过将导入控制器中的导航控制器注入任何页面来访问导航控制器。要注意的是,页面组件不需要选择器,Ionic会自动添加这些。
@Component({
template:
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content>Hello World</ion-