1.安裝
(1)安裝nodejs
(2)新建文件夾，shift+右鍵，打開命令行：npm install -g ionic
(3)Start an App:ionic start myApp tabs
(4)運行cd myApp,ionic serve
2.Packages & CDN
(1)集成Angular：npm install @ionic/angular@latest --save
(2)Using Ionic from a CDN:在<head></head>間
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet">
(3)ionicons的使用:放在頁面末尾附近，</body>之前
<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
3.環境配置
查看nodejs和npm版本
node --version
npm --version
git --version
4.iOS 設置
(1)XCode:Xcode是用於創建本機iOS應用程序的IDE。它包括iOS SDK和Xcode命令行工具。可以使用Apple帳戶免費下載 Xcode 。它也可以通過App Store安裝。
(2)ios-sim和ios-deploy:該ios-sim和ios-deploy是在開發過程中的應用程序部署到了iOS模擬器和iOS設備的實用程序。它們可以在全球範圍內安裝NPM。
npm install -g ios-sim
npm install -g ios-deploy
5.Android 設置
(1)Java:Native Android apps are compiled with the Java programming language(原生Android應用程序使用Java編譯語言編譯).
(2)Gradle:Android應用程序使用的構建工具。
(3)Android Studio:創建Android應用程序的IDE,
(4)安裝Android SDK:打開Android Studio，在SDK Components Setup屏幕中，完成SDK的安裝。
(5)創建Android虛擬設備(AVD):進入Tools » AVD Manager，單擊 Create Virtual Device 並選擇合適的設備定義。如果不確定，選擇Pixel 2 XL。然後，選擇合適的系統映像。
6.Building 構建
(1)ionic start myApp tabs(\sidemenu\blank)
myApp是項目名，tabs是啓動器模板
tabs: A tabs based layout
sidemenu: A sidemenu based layout
blank: An empty project with a single page
(2)查看可用的模板
ionic start --list
(3)項目結構
(4)生成新功能：ionic generate，然後選擇要生成的功能。選擇完成後，Ionic CLI將提示輸入名稱。名稱可以是路徑，允許在有組織的項目結構中輕鬆生成功能。或者，可以在命令行上輸入type和name生成的和：ionic g page "User Detail"。
tip:Could not find an NgModule. Use the skip-import option to skip importing in NgModule.解決方式：進入src結構下的app下進行操作。
7.Layout 佈局
(1)結構體：
①頁眉和頁腳佈局
頭：
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Main Content</h1>
</ion-content>
</ion-app>
頁腳：
<ion-app>
<ion-content padding>
<h1>Main Content</h1>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
②標籤佈局
<ion-app>
<ion-tabs>
<ion-tab tab="home">
<h1>Home Content</h1>
</ion-tab>
<ion-tab tab="settings">
<h1>Settings Content</h1>
</ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-label>Home</ion-label>
<ion-icon name="home"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-label>Settings</ion-label>
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-app>
③菜單佈局
<ion-app>
<ion-menu>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Navigate
</ion-list-header>
<ion-menu-toggle auto-hide="false">
<ion-item button>
<ion-icon slot="start" name='home'></ion-icon>
<ion-label>
Home
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-page class="ion-page" main>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Main Content</h1>
<p>Click the icon in the top left to toggle the menu.</p>
</ion-content>
</ion-page>
</ion-app>
<ion-menu-controller></ion-menu-controller>
④拆分窗格佈局
<ion-app>
<ion-split-pane when="sm">
<ion-menu>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Navigate
</ion-list-header>
<ion-menu-toggle auto-hide="false">
<ion-item button>
<ion-icon slot="start" name='home'></ion-icon>
<ion-label>
Home
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-page class="ion-page" main>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Main Content</h1>
</ion-content>
</ion-page>
</ion-split-pane>
</ion-app>
(2)響應式網格
①網格大小
默認情況下，網格將佔用100％的寬度。要根據屏幕大小設置特定寬度，請添加fixed屬性。每個斷點的網格寬度在--ion-grid-width-{breakpoint}CSS變量中定義。
XS 100％ 不要爲xs屏幕設置網格寬度
SM 540px 設置網格寬度爲540px時（最小寬度：576px）
MD 720px （最小寬度：768px）時將網格寬度設置爲720px
LG 960px （最小寬度：992px）時將網格寬度設置爲960px
XL 1140px （最小寬度：1200px）時將網格寬度設置爲1140px
②網格屬性
屬性 描述
no-padding 從網格和直接子列中刪除填充。
fixed 根據屏幕大小設置最大寬度。
③默認斷點
名稱 值 寬度前綴 偏移前綴 推送前綴 拉前綴 描述
XS 0 size- offset- push- pull- （min-width：0）時設置列
SM 576px size-sm- offset-sm- push-sm- pull-sm- 設置列時（最小寬度：576px）
MD 768px size-md- offset-md- push-md- pull-md- 設置列時（最小寬度：768px）
LG 992px size-lg- offset-lg- push-lg- pull-lg- 設置列時（最小寬度：992px）
XL 1200px size-xl- offset-xl- push-xl- pull-xl- 設置列時（最小寬度：1200px）
(3)CSS實用工具
①文字對齊
.ion-text-left text-align: left 內聯內容與行框的左邊緣對齊。
.ion-text-right text-align: right 內聯內容與行框的右邊緣對齊。
.ion-text-start text-align: start 一樣text-left如果方向是左到右和text-right如果方向是從右到左。
.ion-text-end text-align: end 一樣text-right如果方向是左到右和text-left如果方向是從右到左。
.ion-text-center text-align: center 內聯內容在行框中居中。
.ion-text-justify text-align: justify 內聯內容是合理的。文本應該間隔開，以使其左右邊緣與行框的左右邊緣對齊，但最後一行除外。
.ion-text-wrap white-space: normal 空白的序列被摺疊。源中的換行符作爲其他空格處理。根據需要打破行以填充行框。
.ion-text-nowrap white-space: nowrap 摺疊空白normal，但抑制文本中的換行符（文本換行）。
②文字轉換
.ion-text-uppercase text-transform: uppercase 強制將所有字符轉換爲大寫。
.ion-text-lowercase text-transform: lowercase 強制將所有字符轉換爲小寫。
.ion-text-capitalize text-transform: capitalize 強制將每個單詞的第一個字母轉換爲大寫。
③響應文本類
.ion-text-{modifier} 將修改器應用於所有屏幕尺寸的元素。
.ion-text-sm-{modifier} 在何時將修改器應用於元素min-width: 576px。
.ion-text-md-{modifier} 在何時將修改器應用於元素min-width: 768px。
.ion-text-lg-{modifier} 在何時將修改器應用於元素min-width: 992px。
.ion-text-xl-{modifier} 在何時將修改器應用於元素min-width: 1200px。
④浮動元素
類 風格規則 描述
.ion-float-left float: left 該元素將浮動在其包含塊的左側。
.ion-float-right float: right 元素將浮動在其包含塊的右側。
.ion-float-start float: left / float: right 一樣float-left如果方向是左到右和float-right如果方向是從右到左。
.ion-float-end float: left / float: right 一樣float-right如果方向是左到右和float-left如果方向是從右到左。
⑤響應式浮動
.ion-float-{modifier} 將修改器應用於所有屏幕尺寸的元素。
.ion-float-sm-{modifier} 在何時將修改器應用於元素min-width: 576px。
.ion-float-md-{modifier} 在何時將修改器應用於元素min-width: 768px。
.ion-float-lg-{modifier} 在何時將修改器應用於元素min-width: 992px。
.ion-float-xl-{modifier} 在何時將修改器應用於元素min-width: 1200px。
⑥顯示元素
.ion-hide display: none 該元素將被隱藏。
⑦響應式顯示元素
.ion-hide-sm-{dir} 在min-width: 576px（up）或max-width: 576px（down）時將修飾符應用於元素。
.ion-hide-md-{dir} 在min-width: 768px（up）或max-width: 768px（down）時將修飾符應用於元素。
.ion-hide-lg-{dir} 在min-width: 992px（up）或max-width: 992px（down）時將修飾符應用於元素。
.ion-hide-xl-{dir} 在min-width: 1200px（up）或max-width: 1200px（down）時將修飾符應用於元素。
⑧元素填充(內邊距padding)
類 風格規則 描述
.ion-padding padding: 16px 適用於所有方面的填充。
.ion-padding-top padding-top: 16px 將填充應用於頂部。
.ion-padding-start padding-start: 16px 應用填充到開頭。
.ion-padding-end padding-end: 16px 將填充應用到最後。
.ion-padding-bottom padding-bottom: 16px 將填充應用於底部。
.ion-padding-vertical padding: 16px 0 在頂部和底部應用填充。
.ion-padding-horizontal padding: 0 16px 在左側和右側應用填充。
.ion-no-padding padding: 0 不向所有方面應用填充。
⑨元素填充(外邊距margin)
類 風格規則 描述
.ion-margin margin: 16px 所有方面的外邊距。
.ion-margin-top margin-top: 16px 頂部外邊距。
.ion-margin-start margin-start: 16px 左側外邊距。
.ion-margin-end margin-end: 16px 右側外邊距。
.ion-margin-bottom margin-bottom: 16px 底部外邊距。
.ion-margin-vertical margin: 16px 0 在頂部和底部應用外邊距。
.ion-margin-horizontal margin: 0 16px 向左和向右應用外邊距。
.ion-no-margin margin: 0 不向所有方面申請外邊距。
8.CSS變量
(1)全局變量，在src/theme/variables.scss下
/ *爲所有模式設置變量* /
：root {
/ *設置整個應用程序的背景* /
--ion-background-color: #ff3700;
/ *設置整個app * /
--ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
/ *僅爲Material Design設置整個應用程序的文本顏色* /
.md {
--ion-text-color: #222;
}
(2)組件變量,要爲特定組件設置CSS變量，請在其選擇器內添加變量
/ *設置所有離子按鈕元素的顏色* /
ion-button {
--color: #222;
}
/ *設置在離子鍵與.fancy按鈕類* /
.fancy-button {
--background: #00ff00;
}
(3)通過JavaScript設置變量
const el = document.querySelector('.fancy-button');
el.style.setProperty('--background', '#36454f');
(4)獲取值
①使用CSS
.fancy-button {
--background: var(--charcoal, #36454f);
}
②使用JavaScript
const el = document.querySelector('.fancy-button');
const color = el.style.getPropertyValue('--charcoal');
9.Color Generate、
(1)color:
<ion-button>Default</ion-button>
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>
(2)分層顏色
名稱 屬性 默認值 描述
Base --ion-color-primary #3880ff 所有變化源自的主要顏色
Base (rgb) --ion-color-primary-rgb rgb( 56, 128, 255) 基色爲紅色，綠色，藍色格式
Contrast --ion-color-primary-contrast #ffffff 基色的反面應該是基色可見的
Contrast (rgb) --ion-color-primary-contrast-rgb rgb( 255, 255, 255) 紅色，綠色，藍色格式的對比色
Shade --ion-color-primary-shade #3171e0 基色的淺色版本
Tint --ion-color-primary-tint #4c8dff 基色的略微更輕的版本
(3)要更改顏色的默認值，應設置該顏色的所有列出的變體
: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;
}
(4)添加顏色
.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;
}
使用：
<ion-button color="favorite">Favorite</ion-button>