Ionic 7+ 教程：从环境搭建到项目发布

本教程以 Ionic 7+ 和 Angular 为例，介绍如何快速上手 Ionic 开发。Ionic 也支持 React 和 Vue，但 Angular 是最稳定且生态最好的选择。

1. 环境准备

确保安装 Node.js（推荐 v18 或 v20 LTS），然后全局安装 Ionic CLI：

npm install -g @ionic/cli
ionic --version

2. 创建第一个 Ionic 项目

使用 Ionic CLI 创建项目，推荐 Tabs 模板：

ionic start myApp tabs --type=angular --capacitor

其他常用模板包括空白页、侧边栏和完整示例。对于 React 或 Vue，使用相应的类型参数。

3. 项目结构速览

项目结构主要包括 src/ 目录下的页面、样式和配置文件。Tabs 模板会生成标签页相关的文件，便于快速开发。

4. 运行项目

在浏览器中运行项目进行开发：

cd myApp
ionic serve

对于真机调试，添加 iOS 或 Android 平台：

ionic capacitor add ios
ionic capacitor add android
ionic cap run ios -l --external

5. 常用 Ionic 组件

Ionic 提供丰富的 UI 组件，如工具栏、按钮、列表等，可以在页面 HTML 中直接使用。以下是一个简单示例：

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>首页</ion-title>
  </ion-toolbar>
</ion-header>

<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-content>

6. 常用插件

Capacitor 插件用于访问原生功能，如相机、地理位置等。安装相机插件的示例：

npm install @capacitor/camera
npx cap sync

使用相机插件的代码示例：

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 中配置应用的基本信息，如应用 ID、名称和 Web 目录。

8. 打包发布

构建 Web 版本：

ionic build --prod

对于 Android 和 iOS，使用相应的命令进行打包和发布。

推荐学习资源

• 官方文档：https://ionicframework.com/docs
• Ionic 中文社区：https://ionic.cn
• GitHub 上的开源项目，如官方会议应用示例。

快速上手任务

建议完成以下步骤以巩固学习：

1. 使用 Ionic CLI 创建一个 Tabs 模板项目。
2. 在浏览器中运行并查看效果。
3. 修改页面添加相机功能。
4. 在真机上进行测试。

通过本教程，您可以快速掌握 Ionic 开发的基础知识并开始构建跨平台移动应用。