Ionic Framework 入门教程：安装配置与布局详解

Question

Ionic Framework 学习（一）

安装

首先，确保已安装 Node.js。接着，在新建文件夹中打开命令行，执行以下命令全局安装 Ionic：

npm install -g ionic

安装完成后，使用以下命令创建一个新应用并运行：

ionic start myApp tabs
cd myApp
ionic serve

Packages & CDN

集成 Angular

要集成 Angular，运行：

npm install @ionic/angular@latest --save

使用 CDN

在 HTML 文件的标签内添加以下代码，以通过 CDN 使用 Ionic：

使用 Ionicons

在页面末尾附近、标签之前添加以下脚本：

环境配置

检查 Node.js、npm 和 Git 的版本以确保环境正确配置。运行以下命令：

node --version
npm --version
git --version

iOS 设置

开发 iOS 应用需要 Xcode IDE，可从 App Store 免费下载。此外，安装以下实用工具以部署到模拟器和设备：

npm install -g ios-sim
npm install -g ios-deploy

Android 设置

Android 应用使用 Java 编译，并依赖 Gradle 构建工具。安装 Android Studio 并完成 SDK 设置。在 Android Studio 中，进入 SDK Components Setup 屏幕安装 SDK。然后，通过 Tools » AVD Manager 创建 Android 虚拟设备（AVD），选择合适的设备定义和系统映像。

Building 构建

创建项目

使用 ionic start 命令创建项目，其中 myApp 是项目名，tabs 是启动器模板。其他模板包括 sidemenu 和 blank。

ionic start myApp tabs

查看可用模板：

ionic start --list

项目结构

项目生成后，结构包括配置文件、源代码目录等。使用 ionic generate 命令生成新功能，如页面。如果遇到 "Could not find an NgModule" 错误，可进入 src/app 目录下操作，或使用 --skip-import 选项跳过 NgModule 导入。

Layout 布局

结构体

Ionic 提供多种布局方式，包括页眉/页脚、标签、菜单和拆分窗格。以下是一些示例代码：

页眉和页脚布局

页眉布局示例：


  
    
      Header
    
  
  
    Main Content

页脚布局示例：


  
    Main Content
  
  
    
      Footer

标签布局

标签布局允许在底部导航：


  
    
      Home Content
    
    
      Settings Content
    
    
      
        Home
        
      
      
        Settings

菜单布局

菜单布局提供侧边导航：


  
    
      
        Menu
      
    
    
      
        Navigate
        
          
            
            Home
          
        
      
    
  
  
    
      
        
          
            
              
            
          
        
        Header
      
    
    
      Main Content
      Click the icon in the top left to toggle the menu.

拆分窗格布局

拆分窗格在较大屏幕上显示菜单和内容：

响应式网格

网格默认占用100%宽度。使用 fixed 属性根据屏幕大小设置宽度，具体断点包括 XS、SM、MD、LG、XL，对应不同宽度。网格属性如 no-padding 可移除填充，fixed 设置最大宽度。默认断点定义列大小、偏移、推送和拉取前缀。

CSS 实用工具

Ionic 提供丰富的 CSS 类用于文本对齐、转换、浮动、显示和间距。例如：

文本对齐：.ion-text-left、.ion-text-center 等。
文本转换：.ion-text-uppercase、.ion-text-lowercase 等。
浮动元素：.ion-float-left、.ion-float-right 等。
显示元素：.ion-hide 用于隐藏。
填充和外边距：类如 .ion-padding、.ion-margin 及其变体，可控制内边距和外边距。

响应式类允许在不同屏幕尺寸下应用这些样式，例如 .ion-text-sm-center 在 SM 断点居中对齐。

CSS 变量

全局变量

在 src/theme/variables.scss 中设置全局变量，如背景颜色和字体：

:root {
  --ion-background-color: #ff3700;
  --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}
.md {
  --ion-text-color: #222;
}

组件变量

为特定组件设置 CSS 变量，例如：

ion-button {
  --color: #222;
}
.fancy-button {
  --background: #00ff00;
}

通过 JavaScript 设置和获取变量

使用 JavaScript 动态设置变量：

const el = document.querySelector('.fancy-button');
el.style.setProperty('--background', '#36454f');

获取变量值：

const color = el.style.getPropertyValue('--charcoal');

在 CSS 中引用变量：

.fancy-button {
  --background: var(--charcoal, #36454f);
}

颜色生成

颜色属性

Ionic 提供预定义颜色，如 primary、secondary、success 等，用于按钮等组件：

Default
Primary
Secondary
Tertiary
Success
Warning
Danger
Light
Medium
Dark

分层颜色

颜色由多个变量定义，包括基色、对比色、阴影和色调。例如，主颜色的变量：

--ion-color-primary：基色
--ion-color-primary-contrast：对比色
--ion-color-primary-shade：阴影色
--ion-color-primary-tint：色调色

自定义颜色

要更改默认颜色，设置所有相关变量：

:root {
  --ion-color-secondary: #006600;
  --ion-color-secondary-rgb: 0,102,0;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255,255,255;
  --ion-color-secondary-shade: #005a00;
  --ion-color-secondary-tint: #1a751a;
}

添加新颜色

定义新颜色类：

.ion-color-favorite {
  --ion-color-base: #69bb7b;
  --ion-color-base-rgb: 105,187,123;
  --ion-color-contrast: #ffffff;
  --ion-color-contrast-rgb: 255,255,255;
  --ion-color-shade: #5ca56c;
  --ion-color-tint: #78c288;
}

使用自定义颜色：

Favorite