整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ionic 是一個強大的 HTML5 應用程序開發框架(HTML5 Hybrid Mobile App Framework )。 可以幫助您使用 Web 技術，比如 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程序。
ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動應用程序開發。
ionic是一個輕量的手機UI庫，具有速度快，界面現代化、美觀等特點。為了解決其他一些UI庫在手機上運行緩慢的問題，它直接放棄了IOS6和Android4.1以下的版本支持，來獲取更好的使用體驗。
ionic 特點
1.ionic 基于Angular語法，簡單易學。
2.ionic 是一個輕量級框架。
3.ionic 完美的融合下一代移動框架，支持 Angularjs 的特性， MVC ，代碼易維護。
4.ionic 提供了漂亮的設計，通過 SASS 構建應用程序，它提供了很多 UI 組件來幫助開發者開發強大的應用。
5.ionic 專注原生，讓你看不出混合應用和原生的區別
6.ionic 提供了強大的命令行工具。
7.ionic 性能優越，運行速度快。
學習本教程前你需要了解？
學習本教程前你需要了解以下基礎知識：
HTML
CSS
Javascript
Angular
ionic 相關內容
ionic 官方網站：http://ionicframework.com/
ionic 官方文檔：http://ionicframework.com/docs/
Github 地址：https://github.com/driftyco/ionic
本站實例采用了ionic v1.3.2 版本，使用的 CDN 庫地址：
<link rel="stylesheet"> <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
ionic 最新版本下載地址：http://ionicframework.com/docs/overview/#download。
下載后解壓壓縮包，包含以下目錄：
css/=> 樣式文件 fonts/=> 字體文件 js/=> Javascript文件 version.json=> 版本更新說明
你也可以在 Github 上下載以下資源文件：https://github.com/driftyco/ionic（在release 目錄中）。
接下來，我們只需要在項目中引入以上目錄中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可創建 ionic 應用。
實例
<ion-header-barclass="bar-positive"><h1class="title">Hello World!</h1></ion-header-bar><ion-content><p>我的第一個 ionic 應用。</p></ion-content>
嘗試一下 ?
點擊 "嘗試一下" 按鈕查看在線實例。
本教程著重講解 ionic 框架的應用，大部分實例在瀏覽器中運行 ，移動設備上運行可以在接下來的命令行安裝教程中詳細了解。
注意：在移動應用如 phonegap 中我們只需將對應的 js 和 css 文件加入到資源庫中即可。
命令行安裝
首先您需要安裝 Node.js，我們在接下來的安裝中需要使用到其 NPM 工具，更多 NPM 介紹可以查看我們的NPM 使用介紹。
然后通過命令行工具安裝最新版本的 cordova 和 ionic 。通過參考Android 和 iOS 官方文檔來安裝。
Window 和 Linux 上打開命令行工具執行以下命令：
$ npm install -g cordova ionic
Mac 系統上使用以下命令：
sudo npm install -g cordova ionic
提示: IOS需要在Mac Os X. 和Xcode環境下面安裝使用。
如果你已經安裝了以上環境，可以執行以下命令來更新版本:
npm update -g cordova ionic
或
sudo npm update -g cordova ionic
創建應用
使用ionic官方提供的現成的應用程序模板，或一個空白的項目創建一個ionic應用：
$ ionic start myApp tabs
運行我們剛才創建的ionic項目
使用 ionic tool 創建，測試，運行你的apps(或者通過Cordova直接創建)。
創建Android應用
$ cd myApp $ ionic platform add android $ ionic build android $ ionic emulate android
如果一切正常會彈出模擬器，界面如下所示：
創建iOS應用
$ cd myApp $ ionic platform add ios $ ionic build ios $ ionic emulate ios
如果出現"ios-sim was not found."錯誤，可以執行以下命令：
npm install -g ios-sim
如果一切正常會彈出模擬器，界面如下所示：
Ionic Lab
Ionic Lab 是桌面版的開發環境，如果你不喜歡使用命令行操作，Ionic Lab 將會滿足你的需求。
Ionic Lab 為開發者提供了一個更簡單的方法來開始，編譯，運行，和模擬運行Ionic的應用程序。
Ionic Lab 支持的平臺有：Window、Mac OS X、Linux，下載地址為：http://lab.ionic.io/，下載后直接安裝即可。整個操作界面如下所示：
通過以上界面你可以完成以下操作：
創建應用
預覽應用
編譯應用
運行應用
上傳應用
運行日志查看
……
推薦使用Sublime Text作為 Ionic 項目的編輯器，我們可以通過 Ionic Lab 直接在Sublime Text 上打開項目，如下圖：
Gif 操作演示
前面的章節中我們已經學會了 ionic 框架如何導入到項目中。
接下來我們將為大家介紹如何創建一個 ionic APP 應用。
ionic 創建 APP 使用 HTML、CSS 和 Javascript 來構建，所以我們可以創建一個 www 目錄，并在目錄下創建 index.html 文件，代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- 在使用 Cordova/PhoneGap 創建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(開發過程中顯示 404) --> <script src="cordova.js"></script> </head> <body> </body> </html>
以上代碼中，我們引入了 Ionic CSS 文件、 Ionic JS 文件及 Ionic AngularJS 擴展ionic.bundle.js（ionic.bundle.js）。
ionic.bundle.js 文件已經包含了 Ionic核心JS、AngularJS、Ionic的AngularJS擴展，如果你需要引入其他 Angular 模塊，可以從 lib/js/angular 目錄中調用。
cordova.js 是在使用 Cordova/PhoneGap 創建應用時生成的，不需要手動引入，你可以在 Cordova/PhoneGap 項目中找到該文件，所以在開發過程中顯示 404 是正常的。
創建 APP
接下來我們來實現一個包含標題、側邊欄、列表等的應用,設計圖如下：
創建側邊欄
側邊欄創建使用 ion-side-menus 控制器。
編輯我們先前創建的 index.html 文件，修改 <body> 內的內容，如下所示：
<body> <ion-side-menus> <ion-side-menu-content> </ion-side-menu-content> <ion-side-menu side="left"> </ion-side-menu> </ion-side-menus> </body>
控制器解析：
ion-side-menus： 是一個帶有邊欄菜單的容器，可以通過點擊按鈕或者滑動屏幕來展開菜單。
ion-side-menu-content：展示主要內容的容器，可以通過滑動屏幕來展開menu。
ion-side-menu：存放側邊欄的容器。
初始化 APP
接下來我們創建一個新的 AngularJS 模塊，并初始化，代碼位于 www/js/app.js 中：
angular.module('todo', ['ionic'])之后在我們的 body 標簽中添加 ng-app 屬性：
<body ng-app="todo">
在 index.html 文件的 <script src="cordova.js"></script> 上面引入 app.js 文件：
<script src="js/app.js"></script>
修改 index.html 文件 body 標簽的內容，代碼如下所示：
<body ng-app="todo"> <ion-side-menus> <!-- 中心內容 --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Todo</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> <!-- 左側菜單 --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> </ion-header-bar> </ion-side-menu> </ion-side-menus> </body>
嘗試一下 ?
以上步驟我們已經完成了 ionic 基本 APP 的應用。
創建列表
首先創建一個控制器 TodoCtrl：
<body ng-app="todo" ng-controller="TodoCtrl">
在app.js文件中，使用控制器定義列表數據：
angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope) {
$scope.tasks=[
{ title: '菜鳥教程' },
{ title: 'www.runoob.com' },
{ title: '菜鳥教程' },
{ title: 'www.runoob.com' }
];
});在index.html頁面中數據列表我們使用 Angular ng-repeat 來迭代數據：
<!-- 中心內容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
</ion-header-bar>
<ion-content>
<!-- 列表 -->
<ion-list>
<ion-item ng-repeat="task in tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>修改后 index.html body 標簽內代碼如下：
<body ng-app="todo" ng-controller="TodoCtrl">
<ion-side-menus>
<!-- 中心內容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
</ion-header-bar>
<ion-content>
<!-- 列表 -->
<ion-list>
<ion-item ng-repeat="task in tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>
<!-- 左側菜單 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>
<script src="http://www.runoob.com/static/ionic/js/app.js"></script>
<script src="cordova.js"></script>
</body>嘗試一下 ?
創建添加頁面
修改 index.html 在 </ion-side-menus> 后添加如下代碼:
<script id="new-task.html" type="text/ng-template"> <div class="modal"> <!-- Modal header bar --> <ion-header-bar class="bar-secondary"> <h1 class="title">New Task</h1> <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button> </ion-header-bar> <!-- Modal content area --> <ion-content> <form ng-submit="createTask(task)"> <div class="list"> <label class="item item-input"> <input type="text" placeholder="What do you need to do?" ng-model="task.title"> </label> </div> <div class="padding"> <button type="submit" class="button button-block button-positive">Create Task</button> </div> </form> </ion-content> </div> </script>
以上代碼中我們通過 <script id="new-task.html" type="text/ng-template"> 定義了新的模板頁面。
表單提交時觸發 createTask(task) 函數。
ng-model="task.title" 會將表單的輸入數據賦值給 task 對象的 title 屬性。
修改 <ion-side-menu-content> 內的內容，代碼如下：
<!-- 中心內容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
<!-- 新增按鈕-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content>
<!-- 列表 -->
<ion-list>
<ion-item ng-repeat="task in tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>app.js 文件中，控制器代碼如下：
angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope, $ionicModal) {
$scope.tasks=[
{ title: '菜鳥教程' },
{ title: 'www.runoob.com' },
{ title: '菜鳥教程' },
{ title: 'www.runoob.com' }
];
// 創建并載入模型
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal=modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// 表單提交時調用
$scope.createTask=function(task) {
$scope.tasks.push({
title: task.title
});
$scope.taskModal.hide();
task.title="";
};
// 打開新增的模型
$scope.newTask=function() {
$scope.taskModal.show();
};
// 關閉新增的模型
$scope.closeNewTask=function() {
$scope.taskModal.hide();
};
});創建側邊欄
通過以上步驟我們已經實現了新增功能，現在我們為 app 添加側邊欄功能。
修改 <ion-side-menu-content> 內的內容，代碼如下：
<!-- 中心內容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button button-icon" ng-click="toggleProjects()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- 新增按鈕 -->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="task in activeProject.tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>添加側邊欄：
<!-- 左邊欄 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
<button class="button button-icon ion-plus" ng-click="newProject()">
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject==project}">
{{project.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu><ion-item> 中的 ng-class 指令設置菜單激活樣式。
這里我們創建一個新的js 文件 app2.js(為了不與前面的混淆)，代碼如下：
angular.module('todo', ['ionic'])
/**
* The Projects factory handles saving and loading projects
* from local storage, and also lets us save and load the
* last active project index.
*/
.factory('Projects', function() {
return {
all: function() {
var projectString=window.localStorage['projects'];
if(projectString) {
return angular.fromJson(projectString);
}
return [];
},
save: function(projects) {
window.localStorage['projects']=angular.toJson(projects);
},
newProject: function(projectTitle) {
// Add a new project
return {
title: projectTitle,
tasks: []
};
},
getLastActiveIndex: function() {
return parseInt(window.localStorage['lastActiveProject']) || 0;
},
setLastActiveIndex: function(index) {
window.localStorage['lastActiveProject']=index;
}
}
})
.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {
// A utility function for creating a new project
// with the given projectTitle
var createProject=function(projectTitle) {
var newProject=Projects.newProject(projectTitle);
$scope.projects.push(newProject);
Projects.save($scope.projects);
$scope.selectProject(newProject, $scope.projects.length-1);
}
// Load or initialize projects
$scope.projects=Projects.all();
// Grab the last active, or the first project
$scope.activeProject=$scope.projects[Projects.getLastActiveIndex()];
// Called to create a new project
$scope.newProject=function() {
var projectTitle=prompt('Project name');
if(projectTitle) {
createProject(projectTitle);
}
};
// Called to select the given project
$scope.selectProject=function(project, index) {
$scope.activeProject=project;
Projects.setLastActiveIndex(index);
$ionicSideMenuDelegate.toggleLeft(false);
};
// Create our modal
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal=modal;
}, {
scope: $scope
});
$scope.createTask=function(task) {
if(!$scope.activeProject || !task) {
return;
}
$scope.activeProject.tasks.push({
title: task.title
});
$scope.taskModal.hide();
// Inefficient, but save all the projects
Projects.save($scope.projects);
task.title="";
};
$scope.newTask=function() {
$scope.taskModal.show();
};
$scope.closeNewTask=function() {
$scope.taskModal.hide();
}
$scope.toggleProjects=function() {
$ionicSideMenuDelegate.toggleLeft();
};
// Try to create the first project, make sure to defer
// this by using $timeout so everything is initialized
// properly
$timeout(function() {
if($scope.projects.length==0) {
while(true) {
var projectTitle=prompt('Your first project title:');
if(projectTitle) {
createProject(projectTitle);
break;
}
}
}
});
});body 中 ion-side-menus 代碼如下：：
<ion-side-menus>
<!-- 中心內容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button button-icon" ng-click="toggleProjects()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- 新增按鈕 -->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="task in activeProject.tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>
<!-- 左邊欄 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
<button class="button button-icon ion-plus" ng-click="newProject()">
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject==project}">
{{project.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>嘗試一下 ?
Header(頭部)
Header是固定在屏幕頂部的組件,可以包如標題和左右的功能按鈕。
ionic 默認提供了許多種顏色樣式，你可以調用不同的樣式名，當然也可以自定義一個。
bar-light
<div class="bar bar-header bar-light"> <h1 class="title">bar-light</h1></div>
嘗試一下 ?
bar-stable
<div class="bar bar-header bar-stable"> <h1 class="title">bar-stable</h1></div>
嘗試一下 ?
bar-positive
<div class="bar bar-header bar-positive"> <h1 class="title">bar-positive</h1></div>
嘗試一下 ?
bar-calm
<div class="bar bar-header bar-calm"> <h1 class="title">bar-calm</h1></div>
嘗試一下 ?
bar-balanced
<div class="bar bar-header bar-balanced"> <h1 class="title">bar-balanced</h1></div>
嘗試一下 ?
bar-energized
<div class="bar bar-header bar-energized"> <h1 class="title">bar-energized</h1></div>
嘗試一下 ?
bar-assertive
<div class="bar bar-header bar-assertive"> <h1 class="title">bar-assertive</h1></div>
嘗試一下 ?
bar-royal
<div class="bar bar-header bar-royal"> <h1 class="title">bar-royal</h1></div>
嘗試一下 ?
bar-dark
<div class="bar bar-header bar-dark"> <h1 class="title">bar-dark</h1></div>
嘗試一下 ?
Sub Header（副標題）
Sub Header同樣是固定在頂部，只是是在Header的下面，就算沒有寫Header這個，Sub Header這個樣式也會距離頂部有一個Header的距離。顏色樣式同 Header 。
<div class="bar bar-header"> <h1 class="title">Header</h1></div><div class="bar bar-subheader"> <h2 class="title">Sub Header</h2></div>
嘗試一下 ?
Footer(底部)
Footer 是在屏幕的最下方，可以包含多種內容類型。
<div class="bar bar-footer bar-balanced"> <div class="title">Footer</div></div>
嘗試一下 ?
Footer 同上面的 Header，只是把樣式名 bar-header 換做 bar-footer 。
<div class="bar bar-footer"> <button class="button button-clear">Left</button> <div class="title">Title</div> <button class="button button-clear">Right</button></div>
嘗試一下 ?
此外，如果底部沒有標題，但是又需要右邊的按鈕，你需要在右側按鈕添加 pull-right如:
Ionic前身是PhoneGap，一款老牌混合開發框架，但是Ionic并不是PhoneGap的替代品，PhoneGap只是一個殼子，Ionic提供了強大的Ionic Framework和許多基于Cordova的插件，讓開發人員可以更好的使用設備能力，縮小與原生app的性能差距。
Ionic具有如下特點：
· ionic 基于Angular語法，簡單易學.
· ionic 是一個輕量級框架.
· ionic 完美的融合下一代移動框架，支持 Angularjs 的特性， MVC ，MVVM代碼易維護.
· ionic 提供了漂亮的設計，通過SASS構建應用程序，它提供了很多UI組件來幫助開發者開發強大的應用.
· ionic 專注原生，讓你看不出混合應用和原生的區別.
· ionic 提供了強大的命令行工具.
· ionic 性能優越，運行速度快.
Ionic由兩部分組成，Ionic CLI和Ionic Framework，通常人們提到Ionic一般指的是Ionic Framework。
a. 安裝Node.js
b. 安裝Ionic和Cordova
npm install –g cordova ionic
2.2.1 Android開發環境配置
a. java環境安裝
下載jdk安裝后配置環境變量
b. android sdk安裝
下載sdk ，安裝后配置環境變量。
建議在安裝并配置好java環境后下載安裝AndroidStudio，使用AndroidStudio來下載并管理Android SDK等開發環境。
a. 創建應用
ionic start MyApp tabs
運行該命令后，Ionic CLI將會自動創建tabs模板項目，并下載對應的依賴包。
b. 進入目錄
cd MyApp
c. 編譯
ionic build
d. 在瀏覽器中運行
ionic serve
e. 在安卓上運行
ionic cordova platform add android
ionic cordova bulid android
ionic cordova run android
f. 在ios上運行
ionic cordova platform add ios
ionic cordova prepare ios
打開Xcode， 點擊File>Open打開項目目錄下的platforms/ios文件夾，編譯并運行。
· hooks：編譯cordova時自定義的腳本命令，方便整合到我們的編譯系統和版本控制系統中
· node_modules ：node各類依賴包
· resources ：android/ios 資源（更換圖標和啟動動畫）
· src：開發工作目錄，頁面、樣式、腳本和圖片都放在這個目錄下
· www：靜態文件
· platforms：生成android或者ios安裝包路徑（platforms\android\build\outputs\apk：apk所在位置）
· plugins：插件文件夾，里面放置各種cordova安裝的插件
· config.xml: 配置文件
· package.json: node安裝模塊時的依據
· tsconfig.json: TypeScript項目的根目錄，指定用來編譯這個項目的根文件和編譯選項
· tslint.json：格式化和校驗typescript
Ionic使用node進行管理，當拿到一個項目時，首先要執行的命令是
npm install
下載對應的依賴項。
我們編碼目錄在src中
3.1 程序入口——App.component.ts
一個Ionic應用的程序入口是App.component.ts。在這里編寫進入程序時需要進行初始化的任務。
通常涉及到設備能力的初始化工作，我們放在platform.ready的回調中進行。
3.2 頁面編寫
一個頁面由4個文件組成
· .html文件編寫頁面結構
· .module.ts文件管理頁面的依賴
· .scss文件管理頁面樣式
· .ts文件負責頁面邏輯
上圖為官網截圖，常用的生命周期有如下六個。
行的開源移動應用程序開發框架 Ionic 于今日發布了 4.0 正式版，代號 Neutronium。官方稱 Ionic 4 為“Ionic for Everyone”。開發者現在可通過 Ionic 使用 Web 技術輕松構建高質量的原生和漸進式 Web 應用程序。
Ionic 4.0.0 Neutronium 源碼下載
https://github.com/ionic-team/ionic/releases/tag/v4.0.0
毫無疑問，Ionic 4 是一個十分重要的版本。它飽含開發團隊兩年來的研究和努力，將 Ionic 從“mobile for Angular”的定位轉變為強大的 UI 設計系統和移動應用程序框架 —— 每個 Web 開發者都可使用它。
Ionic 還在官方博客向大家介紹了 Ionic 是如何完成自身定位的轉變，以及為何要轉變，我們不妨關注一下。
簡單說來就是因為前端界的變化實在太快了。Ionic 剛問世的時候，正是 AngularJS 流行之時，Ionic 當時的目標也只是打造豐富的由 JavaScript 驅動的組件，以使用 Web 技術構建高質量的移動應用程序。由于業界當時沒有統一的標準方法可以實現這一目標，Ionic 便把目光瞄準了 AngularJS，開發者可以在 AngularJS 中構建自定義的指令，而由 Ionic 提供的原生組件可打包成易于使用的自定義 HTML 標記。任何使用該標記的 AngularJS 模板都可以引導組件并運行它，就像在瀏覽器中實現原生的支持。
即便到了 Angular 2 發布的時候，Angular 飽受爭議，但做好移植工作的 Ionic 2 和 3 在彼時依然收獲了不錯的口碑，Ionic 3 甚至被認為是 Ionic 最成功的版本。
但到了最近兩年，前端變化之快不但令人目不暇接，甚至讓 Ionic 這樣的框架也陷入了瓶頸。AngularJS 已被 Angular 取代，而引領前端發展的“三駕馬車”，Ionic 表示其中的“兩駕馬車”與自身并無交集。
為此，Ionic 進行了反思，并在2017年開始嘗試將 Ionic 轉變為一組 Web 組件，他們判斷這將是未來的趨勢 —— 讓世界上幾乎每個 Web 開發者都可在他們的移動、桌面和漸進式 Web 應用程序中使用 Ionic 的組件 —— 只需在他們的應用程序中使用 Ionic 的自定義 HTML 標記即可。
最重要的是，Ionic 使用的是標準 Web API 而非第三方 API，所以開發者大可放心使用，Ionic 的組件 API 在未來許多年都會保持穩定，而不是成為前端和框架發展進程中的犧牲品。
有關 Ionic 4 前世今生的介紹到此為止，接下來繼續看看 Ionic 4 有哪些值得關注的變化。
性能
官方宣稱 Ionic 4 是有史以來最快的版本，近 100 個 Ionic 組件均通過性能、定制性和外觀方面的評估。每個組件均符合 iOS 和 Android 上的最新標準。
官方提供的性能對比 ↑↑↑
Ionic 4 開箱即用，而優異的性能則讓 Ionic 成為了構建高性能 PWA 的最佳 UI 框架。官方表示，為了使 Ionic 達到 Google 規定的性能標準，需要使用新的異步組件加載和交付方法。為實現這一目標，Ionic 團隊花了一年的時間使用 Stencil 構建一個 Web 組件管道來生成 Ionic 組件，確保它們封裝緊密，可延遲加載。
支持 React 和 Vue
雖然目前對 React 和 Vue 的支持尚處于 alpha 狀態，但終歸讓開發者在框架選擇上有了更多樣化的選擇。
其他值得關注的更新
文檔改進。官方對開發者文檔進行了較大的改進。設計更簡單、導航更清晰、內容更突出。
此外，還整合了 API 引用和組件引用方面的內容，減少了之前開發者必須多次跳轉才得以獲取所需信息的次數。
文檔最新地址 >>> http://ionicframework.com/docs
路線圖
Ionic 4 現在可用于生產環境，官方提供的 Roadmap 顯示未來將改進對特定桌面的 UI 支持、改進鍵盤方案，提供更豐富的主題和動畫。另外就是，提供對 React 和 Vue“一等公民”的支持。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
