ionic 教程-安装-创建 APP-头部与底部

onic 教程

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 安装

本站实例采用了ionic v1.3.2 版本，使用的 CDN 库地址：

<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" 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 创建 APP

前面的章节中我们已经学会了 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>

尝试一下 ?

ionic 头部与底部

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

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。

2. 第一个Ionic应用

2.1 Ionic环境安装

a. 安装Node.js

b. 安装Ionic和Cordova

npm install –g cordova ionic

2.2 移动开发环境安装

2.2.1 Android开发环境配置

a. java环境安装

下载jdk安装后配置环境变量

b. android sdk安装

下载sdk ，安装后配置环境变量。

建议在安装并配置好java环境后下载安装AndroidStudio，使用AndroidStudio来下载并管理Android SDK等开发环境。

2.3 第一个Ionic App

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文件夹，编译并运行。

3. Ionic项目结构

· 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文件负责页面逻辑

4. Ionic生命

上图为官网截图，常用的生命周期有如下六个。

行的开源移动应用程序开发框架 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“一等公民”的支持。

在线咨询

上一篇：8岁学编程已经晚了？6个网站让你在家教孩子学编程
下一篇：HTML5特效库炫酷复仇者联盟电影幻灯片切换动画

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

ionic 教程-安装-创建 APP-头部与底部

onic 教程

ionic 安装

ionic 创建 APP

ionic 头部与底部

. 什么是Ionic

2. 第一个Ionic应用

2.1 Ionic环境安装

2.2 移动开发环境安装

2.3 第一个Ionic App

3. Ionic项目结构

4. Ionic生命

您的项目需求