ionic4.x 学习笔记（一） —— 介绍、结构、页面、tabs、路由、模块、组件

目录

一.Ionic 介绍及环境搭建

1.1 Ionic —— 移动应用程序开发框架

1.2 ionic Packages

1.3 Ionic 安装运行

二.Ionic 目录结构分析

2.1 项目目录结构分析

2.2 src 目录结构分析

2.3 app.module.ts 分析

三.新增页面、新增tabs、路由跳转、自定义公共模块、组件

3.1 Ionic4.x 创建页面

3.2 Ionic4.x 路由跳转

3.3 Ionic4.x 新增底部 tabs

3.4 Ionic4.x 公共模块、引入使用组件

3.5 Ionic4.x 中使用 Ionic内置组件

3.6 page 和 module 的区别?

---

一.Ionic 介绍及环境搭建

1.1 Ionic —— 移动应用程序开发框架

• 快速开发移动App、移动端WEB 页面、微信公众平台应用、混合 app web 页面等
• Ionic 基于 Web Components，具有更好的运行速度
• Web Components 是一套不同的技术，允许创建可重用的定制元素并使用他们

1.2 ionic Packages

• 

1. Ionic = Cordova + Angular + ionic CSS
2. Ionic = Cordova + React+ ionic CSS
3. Ionic = Cordova + Vue+ ionic CSS

• Ionic4.x 以后，在 Angular、Vue、React 基础上做了封装，可以更快速的开发移动项目
• （？）Ionic 调用原生的功能是基于 Cordova , Cordova 提供了使用 JavaScript 调用 Native 功能
• Ionic 自己封装了一套漂亮的 UI库

1.3 Ionic 安装运行

• 学前必备技能：node.js / Angular 基础
• 安装 cordova ionic：npm install -g @ionic/cli / npm install -g cordova ionic
• 创建项目：ionic start myApp blank / ionic start myIonicFirst tabs / ionic start myApp sidemenu
• 
• 运行项目：ionic serve

• 

二.Ionic 目录结构分析

2.1 项目目录结构分析

• e2e：端对端测试文件
• node_modules ：项目依赖包
• resources ：android / ios 资源（更换图标和启动动画）
• src：开发工作目录
• www：静态文件，ionic build --prod 生成的单页面静态资源文件
• platforms：生成 android / ios 安装包需要的资源 —— (cordova platform add android 后会生成)
• plugins：插件文件夹，cordova 安装的插件
• config.xml：打包成 app 的配置文件
• package.json：配置项目的元数据和管理项目所需要的依赖
• ionic.config.json / ionic.starter.json：ionic 配置文件
• angular.json：angular 配置文件
• tsconfig.json：TypeScript 项目的根目录，指定用来编译这个项目的根文件和编译选项
• tslint.json：格式化和校验 TypeScript

2.2 src 目录结构分析

• app：应用根目录（组件、页面、服务、模块…）
• assets：资源目录（静态文件，图片，js 框架…）
• theme：主题文件，里面有一个scss 文件，设置主题信息
• global.scss：全局css 文件 index.html：index 入口文件
• main.ts：主入口文件
• karma.conf.js/test.js：测试相关的配置文件
• polyfills.ts: 这个文件包含Angular 需要的填充，并在应用程序之前加载

2.3 app.module.ts 分析

• 

三.新增页面、新增tabs、路由跳转、自定义公共模块、组件

3.1 Ionic4.x 创建页面

• 创建页面：ionic g page 页面名称
• 创建后多了目录：
• $ ionic g
  $ ionic g page
  $ ionic g page contact
  $ ionic g component contact/form
  $ ionic g component login-form --change-detection=OnPush
  $ ionic g directive ripple --skip-import
  $ ionic g service api/user
• 寻求帮助：ionic g --help
• 

3.2 Ionic4.x 路由跳转

• 创建新组件时，根路由文件 app-routing.module.ts 会自动写入新组件
• ionic4.x 中路由完全基于 Angular
• ————————————————————————————————————————
• ionic4.x 中，跳转到其他页面 不会 加返回按钮
• 如果需要，则可以给需要返回按钮的页面，在 头部 添加 返回按钮：ion-back-button
• ————————————————————————————————————————
• 在组件 tab1 里写一个按钮，点击跳转到 newpage 页面：
• 

// app-routing.module.ts
const routes: Routes = [{
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },{
    path: 'newpage',
    loadChildren: () => import('./newpage/newpage.module').then( m => m.NewpagePageModule)
  }];

// tab1.page.html
<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab One
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content> 
    <ion-button color="primary" [routerLink] = "[ '/newpage']"> 跳转</ion-button>
    <ion-button color="primary" routerLink = "/newpage"> 跳转</ion-button>
    <ion-button [routerLink]="['/pinfo']" [queryParams]="{aid:'1234'}">
    跳转传值</ion-button>
</ion-content>

// newpage.page.html
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button> // 在头部添加返回按钮哦
    </ion-buttons>
    <ion-title>newpage</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content></ion-content>

// .ts 接受路由传值
import { ActivatedRoute } from '@angular/router';

export class PinfoPage implements OnInit {
    constructor( public route:ActivatedRoute ) { }
    ngOnInit() {
        this.route.queryParams.subscribe((data)=>{
            console.log(data);
        })}}

• Ionic4.x 中，从 tabs 跳转到其他页面，使用 ion-back-button 返回的话，默认返回到 tab1 页
• 如想返回到指定的 tab 页，就要用到 NavController 里的 back 方法
• NavController 回到指定 tab 页：
• import { NavController } from '@ionic/angular';
• constructor(public nav:NavController) { }
• this.nav.back();
• this.nav.navigateBack('/tabs/tab3');
• NavController 回到根：
• import { NavController } from '@ionic/angular';
• constructor(public nav:NavController) { }
• this.nav.navigateRoot('/tabs/tab3');

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-button (click)="goBack()">
                <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title>pinfo</ion-title>
    </ion-toolbar>
</ion-header>
————————————————————————————————————————————————————————————————————————————
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { NavController } from '@ionic/angular';
@Component({
    selector: 'app-pinfo',
    templateUrl: './pinfo.page.html',
    styleUrls: ['./pinfo.page.scss'],
})
export class PinfoPage implements OnInit {
    constructor(public route:ActivatedRoute,public nav:NavController) { }
    ngOnInit() {
        // 接受路由参数传值
        this.route.queryParams.subscribe((data)=>{
            console.log(data);
        })
        console.log(window.history);
    }
    goBack() {
        // 返回指定 tab 页
        this.nav.navigateBack('/tabs/tab3');
    }
}

3.3 Ionic4.x 新增底部 tabs

• 创建 tab4 模块：ionic g page tab4
• tabs.page.html 中，新增底部 tab 切换按钮
• 

// tabs.page.html 
<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
    // ...
  </ion-tab-bar>
</ion-tabs>

3.4 Ionic4.x 公共模块、引入使用组件

• 理想效果： 
• 创建公共模块及组件：

1. ionic g module module/slide
2. ionic g component module/slide

• 
• 公共模块 slide.module.ts 中，引入组件、声明组件、暴露组件（容易忘记）

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 引入组件：在 组件.ts 中，查看组件名，注意省略后缀
import { SlideComponent } from './slide.component'; 

@NgModule({
  declarations: [SlideComponent], // 声明组件
  imports: [
    CommonModule
  ]，
  exports:[SlideComponent] // 暴露组件（一定不要忘记！）
})
export class SlideModule { }

• 用到的地方，引入自定义 模块，并且 依赖注入 自定义模块，使用 组件

// newpage.module.ts
// 引入自定义模块
import { SlideModule } from '../module/slide/slide.module';
@NgModule({
  imports: [
    IonicModule,
    // 依赖注入自定义模块
    SlideModule
  ],...

// newpage.page.html
<ion-content>
  <app-slide></app-slide>
</ion-content>

3.5 Ionic4.x 中使用 Ionic内置组件

• 
• import { IonicModule} from '@ionic/angular';

3.6 page 和 module 的区别?

• module 是个空壳
• page = module + 默认的 module、page + 路由

 

• page 创建直接生成在：根组件的路由上，根据路由找到指定的 page，对外暴露 URL
• module 需要手动在其他 module 上导入，在页面中使用 module 里的组件，不对外暴露 URL