目录
一.Ionic 介绍及环境搭建
1.1 Ionic —— 移动应用程序开发框架
- 快速开发移动App、移动端WEB 页面、微信公众平台应用、混合 app web 页面等
- Ionic 基于 Web Components,具有更好的运行速度
- Web Components 是一套不同的技术,允许创建可重用的定制元素并使用他们
1.2 ionic Packages
- Ionic = Cordova + Angular + ionic CSS
- Ionic = Cordova + React+ ionic CSS
- 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 公共模块、引入使用组件
- 理想效果:
- 创建公共模块及组件:
- ionic g module module/slide
- 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