Ionic简介 #

Ionic = Web技术 + 跨平台 + 原生体验

┌─────────────────────────────────────────────────────┐
│                    Ionic 应用                        │
├─────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────┐   │
│  │           前端框架层                         │   │
│  │  Angular / React / Vue + TypeScript         │   │
│  └─────────────────────────────────────────────┘   │
│                       │                             │
│  ┌─────────────────────────────────────────────┐   │
│  │           Ionic UI组件层                     │   │
│  │  ion-button / ion-list / ion-card / ...     │   │
│  └─────────────────────────────────────────────┘   │
│                       │                             │
│  ┌─────────────────────────────────────────────┐   │
│  │           Capacitor原生层                    │   │
│  │  Camera / Geolocation / Push / Storage      │   │
│  └─────────────────────────────────────────────┘   │
│                       │                             │
│  ┌─────────────────────────────────────────────┐   │
│  │           原生平台层                         │   │
│  │  iOS (WKWebView) / Android (Chrome)         │   │
│  └─────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────┘

// Ionic UI组件示例
<ion-header>
  <ion-toolbar>
    <ion-title>我的应用</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>项目一</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>项目二</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

import { Camera, CameraResultType } from '@capacitor/camera';

async function takePhoto() {
  const photo = await Camera.getPicture({
    resultType: CameraResultType.Uri
  });
  return photo.webPath;
}

用户操作
    │
    ▼
┌─────────────┐
│  WebView    │ ─── JavaScript执行环境
└─────────────┘
    │
    ├──▶ Ionic UI组件渲染
    │
    ├──▶ 框架逻辑处理
    │
    └──▶ Capacitor桥接
              │
              ▼
         原生API调用

<!-- 按钮组件 -->
<ion-button color="primary">
  点击我
</ion-button>

<!-- 卡片组件 -->
<ion-card>
  <ion-card-header>
    <ion-card-title>卡片标题</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    卡片内容
  </ion-card-content>
</ion-card>

<!-- 列表组件 -->
<ion-list>
  <ion-item *ngFor="let item of items">
    {{ item.name }}
  </ion-item>
</ion-list>

// 页面导航
this.navCtrl.navigateForward('/detail');

// 返回
this.navCtrl.navigateBack('/home');

// 根页面
this.navCtrl.navigateRoot('/login');

// Tabs导航
<ion-tabs>
  <ion-tab tab="home">...</ion-tab>
  <ion-tab tab="settings">...</ion-tab>
</ion-tabs>

/* 全局颜色变量 */
:root {
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #5260ff;
  --ion-color-success: #2dd36f;
  --ion-color-warning: #ffc409;
  --ion-color-danger: #eb445a;
}

/* 暗黑模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --ion-background-color: #1a1a1a;
    --ion-text-color: #ffffff;
  }
}

import { Geolocation } from '@capacitor/geolocation';
import { Camera, CameraResultType } from '@capacitor/camera';
import { LocalNotifications } from '@capacitor/local-notifications';

// 获取位置
const position = await Geolocation.getCurrentPosition();

// 拍照
const photo = await Camera.getPicture({
  resultType: CameraResultType.Uri
});

// 本地通知
await LocalNotifications.schedule({
  notifications: [{
    title: '提醒',
    body: '这是一个通知',
    id: 1
  }]
});

// 虚拟滚动优化
<ion-virtual-scroll [items]="items">
  <ion-item *virtualItem="let item">
    {{ item.name }}
  </ion-item>
</ion-virtual-scroll>

// 懒加载模块
const routes: Routes = [
  {
    path: 'detail',
    loadChildren: () => import('./detail/detail.module')
      .then(m => m.DetailPageModule)
  }
];

<!-- 新的日期选择器 -->
<ion-datetime presentation="date" [value]="selectedDate">
</ion-datetime>

<!-- 新的搜索栏 -->
<ion-searchbar 
  placeholder="搜索..." 
  (ionInput)="onSearch($event)">
</ion-searchbar>

// 更好的TypeScript支持
interface User {
  id: number;
  name: string;
  email: string;
}

const users: User[] = await this.userService.getUsers();

基础阶段
├── Ionic基础概念
├── 环境搭建
├── 第一个应用
└── 项目结构

进阶阶段
├── UI组件使用
├── 导航与路由
├── 主题定制
└── 数据处理

高级阶段
├── 原生功能集成
├── 性能优化
├── 测试与调试
└── 部署发布