ionic 教程

这里为你提供一个系统、实用的 Ionic 最新版（Ionic 7+）教程，目前主流是基于 Angular，也支持 React 和 Vue。本教程以 Angular + Ionic 7 为例（最稳定、生态最好），如果你用 React 或 Vue，后面会给出区别。

1. 环境准备（2025 年最新）

# 1. 安装 Node.js（推荐 v18 或 v20 LTS）
# 2. 全局安装 Ionic CLI（最新版）
npm install -g @ionic/cli

# 3. 检查版本（2025年11月应该是 7.2+）
ionic --version

2. 创建第一个 Ionic 项目

# 推荐：Tabs 模板（最常用）
ionic start myApp tabs --type=angular --capacitor

# 其他常用模板
ionic start myApp blank --type=angular --capacitor     # 空白页
ionic start myApp sidemenu --type=angular --capacitor  # 侧边栏
ionic start myApp conference --type=angular --capacitor # 完整示例（官方大会App）

如果想用 React 或 Vue：

ionic start myApp tabs --type=react  --capacitor
ionic start myApp tabs --type=vue    --capacitor

3. 项目结构速览

src/
├── app/
│   ├── tabs/
│   │   ├── tabs.page.html
│   │   ├── tabs.page.ts
│   │   └── tabs-routing.module.ts
│   ├── tab1, tab2, tab3（示例页面）
├── theme/variables.css   # 全局颜色变量
├── global.scss           # 全局样式
└── index.html

4. 运行项目

cd myApp

# 浏览器运行（推荐开发时用）
ionic serve

# 真机调试（iOS/Android）
ionic capacitor add ios
ionic capacitor add android

# 实时同步到手机
ionic cap run ios -l --external
ionic cap run android -l --external

5. 常用 Ionic 组件快速上手

在页面 .html 里直接用（已全局可用）：

<!-- 头部工具栏 -->
<ion-header>
  <ion-toolbar color="primary">
    <ion-title>首页</ion-title>
  </ion-toolbar>
</ion-header>

<!-- 内容区（推荐加 ion-content） -->
<ion-content class="ion-padding">
  <ion-button expand="block" fill="solid">主要按钮</ion-button>
  <ion-list>
    <ion-item *ngFor="let item of items">
      <ion-label>{{item.name}}</ion-label>
    </ion-item>
  </ion-list>

  <!-- 加载状态 -->
  <ion-spinner *ngIf="loading"></ion-spinner>

  <!-- 下拉刷新 -->
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
</ion-content>

6. 常用插件（Capacitor 官方插件）

# 相机
npm install @capacitor/camera
npx cap sync

# 地理位置
npm install @capacitor/geolocation

# 推送通知
npm install @capacitor/push-notifications

# 存储（推荐）
npm install @capacitor/preferences

使用示例（Camera）：

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

const takePhoto = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: false,
    resultType: CameraResultType.Uri
  });
  console.log(image.webPath);
};

7. 全局配置（capacitor.config.ts）

const config: CapacitorConfig = {
  appId: 'com.company.myapp',
  appName: 'MyApp',
  webDir: 'dist/myApp',  // Angular 项目注意这里
  server: {
    androidScheme: 'https'
  }
};

8. 打包发布

# Web/PWA
ionic build --prod

# Android
ionic capacitor copy android
cd android
./gradlew assembleRelease

# iOS（Mac 才行）
ionic capacitor copy ios
cd ios/App
打开 Xcode → 签名 → Archive

推荐学习资源（2025 最新）

1. 官方文档（最权威）：https://ionicframework.com/docs
2. Ionic 中文社区：https://ionic.cn
3. B站搜索 “Ionic 7 2024” 或 “Ionic 从入门到实战”
4. GitHub 优秀开源项目：

• https://github.com/ionic-team/ionic-conference-app
• https://github.com/aaronksaunders/ionic7-firebase-auth

快速上手任务（建议今天完成）

1. ionic start demo tabs –type=angular –capacitor
2. ionic serve 跑起来
3. 把 tab1 改成调用相机拍照
4. 用 ionic cap run android 在真机上测试

有任何一步卡住了，直接把报错贴出来，我马上帮你解决！
要不要我给你一份完整的 “企业级后台管理系统” 或 “外卖/电商” Ionic 示例项目模板？可以直接发你 GitHub 链接。