整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ionic 是一個(gè)強(qiáng)大的 HTML5 應(yīng)用程序開(kāi)發(fā)框架(HTML5 Hybrid Mobile App Framework )。 可以幫助您使用 Web 技術(shù)，比如 HTML、CSS 和 Javascript 構(gòu)建接近原生體驗(yàn)的移動(dòng)應(yīng)用程序。
ionic 主要關(guān)注外觀和體驗(yàn)，以及和你的應(yīng)用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動(dòng)應(yīng)用程序開(kāi)發(fā)。
ionic是一個(gè)輕量的手機(jī)UI庫(kù)，具有速度快，界面現(xiàn)代化、美觀等特點(diǎn)。為了解決其他一些UI庫(kù)在手機(jī)上運(yùn)行緩慢的問(wèn)題，它直接放棄了IOS6和Android4.1以下的版本支持，來(lái)獲取更好的使用體驗(yàn)。
ionic 特點(diǎn)
1.ionic 基于Angular語(yǔ)法，簡(jiǎn)單易學(xué)。
2.ionic 是一個(gè)輕量級(jí)框架。
3.ionic 完美的融合下一代移動(dòng)框架，支持 Angularjs 的特性， MVC ，代碼易維護(hù)。
4.ionic 提供了漂亮的設(shè)計(jì)，通過(guò) SASS 構(gòu)建應(yīng)用程序，它提供了很多 UI 組件來(lái)幫助開(kāi)發(fā)者開(kāi)發(fā)強(qiáng)大的應(yīng)用。
5.ionic 專注原生，讓你看不出混合應(yīng)用和原生的區(qū)別
6.ionic 提供了強(qiáng)大的命令行工具。
7.ionic 性能優(yōu)越，運(yùn)行速度快。
學(xué)習(xí)本教程前你需要了解？
學(xué)習(xí)本教程前你需要了解以下基礎(chǔ)知識(shí)：
HTML
CSS
Javascript
Angular
ionic 相關(guān)內(nèi)容
ionic 官方網(wǎng)站：http://ionicframework.com/
ionic 官方文檔：http://ionicframework.com/docs/
Github 地址：https://github.com/driftyco/ionic
本站實(shí)例采用了ionic v1.3.2 版本，使用的 CDN 庫(kù)地址：
<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=> 版本更新說(shuō)明
你也可以在 Github 上下載以下資源文件：https://github.com/driftyco/ionic（在release 目錄中）。
接下來(lái)，我們只需要在項(xiàng)目中引入以上目錄中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可創(chuàng)建 ionic 應(yīng)用。
實(shí)例
<ion-header-barclass="bar-positive"><h1class="title">Hello World!</h1></ion-header-bar><ion-content><p>我的第一個(gè) ionic 應(yīng)用。</p></ion-content>
嘗試一下 ?
點(diǎn)擊 "嘗試一下" 按鈕查看在線實(shí)例。
本教程著重講解 ionic 框架的應(yīng)用，大部分實(shí)例在瀏覽器中運(yùn)行 ，移動(dòng)設(shè)備上運(yùn)行可以在接下來(lái)的命令行安裝教程中詳細(xì)了解。
注意：在移動(dòng)應(yīng)用如 phonegap 中我們只需將對(duì)應(yīng)的 js 和 css 文件加入到資源庫(kù)中即可。
命令行安裝
首先您需要安裝 Node.js，我們?cè)诮酉聛?lái)的安裝中需要使用到其 NPM 工具，更多 NPM 介紹可以查看我們的NPM 使用介紹。
然后通過(guò)命令行工具安裝最新版本的 cordova 和 ionic 。通過(guò)參考Android 和 iOS 官方文檔來(lái)安裝。
Window 和 Linux 上打開(kāi)命令行工具執(zhí)行以下命令：
$ npm install -g cordova ionic
Mac 系統(tǒng)上使用以下命令：
sudo npm install -g cordova ionic
提示: IOS需要在Mac Os X. 和Xcode環(huán)境下面安裝使用。
如果你已經(jīng)安裝了以上環(huán)境，可以執(zhí)行以下命令來(lái)更新版本:
npm update -g cordova ionic
或
sudo npm update -g cordova ionic
創(chuàng)建應(yīng)用
使用ionic官方提供的現(xiàn)成的應(yīng)用程序模板，或一個(gè)空白的項(xiàng)目創(chuàng)建一個(gè)ionic應(yīng)用：
$ ionic start myApp tabs
運(yùn)行我們剛才創(chuàng)建的ionic項(xiàng)目
使用 ionic tool 創(chuàng)建，測(cè)試，運(yùn)行你的apps(或者通過(guò)Cordova直接創(chuàng)建)。
創(chuàng)建Android應(yīng)用
$ cd myApp $ ionic platform add android $ ionic build android $ ionic emulate android
如果一切正常會(huì)彈出模擬器，界面如下所示：
創(chuàng)建iOS應(yīng)用
$ cd myApp $ ionic platform add ios $ ionic build ios $ ionic emulate ios
如果出現(xiàn)"ios-sim was not found."錯(cuò)誤，可以執(zhí)行以下命令：
npm install -g ios-sim
如果一切正常會(huì)彈出模擬器，界面如下所示：
Ionic Lab
Ionic Lab 是桌面版的開(kāi)發(fā)環(huán)境，如果你不喜歡使用命令行操作，Ionic Lab 將會(huì)滿足你的需求。
Ionic Lab 為開(kāi)發(fā)者提供了一個(gè)更簡(jiǎn)單的方法來(lái)開(kāi)始，編譯，運(yùn)行，和模擬運(yùn)行Ionic的應(yīng)用程序。
Ionic Lab 支持的平臺(tái)有：Window、Mac OS X、Linux，下載地址為：http://lab.ionic.io/，下載后直接安裝即可。整個(gè)操作界面如下所示：
通過(guò)以上界面你可以完成以下操作：
創(chuàng)建應(yīng)用
預(yù)覽應(yīng)用
編譯應(yīng)用
運(yùn)行應(yīng)用
上傳應(yīng)用
運(yùn)行日志查看
……
推薦使用Sublime Text作為 Ionic 項(xiàng)目的編輯器，我們可以通過(guò) Ionic Lab 直接在Sublime Text 上打開(kāi)項(xiàng)目，如下圖：
Gif 操作演示
前面的章節(jié)中我們已經(jīng)學(xué)會(huì)了 ionic 框架如何導(dǎo)入到項(xiàng)目中。
接下來(lái)我們將為大家介紹如何創(chuàng)建一個(gè) ionic APP 應(yīng)用。
ionic 創(chuàng)建 APP 使用 HTML、CSS 和 Javascript 來(lái)構(gòu)建，所以我們可以創(chuàng)建一個(gè) www 目錄，并在目錄下創(chuàng)建 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 創(chuàng)建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(開(kāi)發(fā)過(guò)程中顯示 404) --> <script src="cordova.js"></script> </head> <body> </body> </html>
以上代碼中，我們引入了 Ionic CSS 文件、 Ionic JS 文件及 Ionic AngularJS 擴(kuò)展ionic.bundle.js（ionic.bundle.js）。
ionic.bundle.js 文件已經(jīng)包含了 Ionic核心JS、AngularJS、Ionic的AngularJS擴(kuò)展，如果你需要引入其他 Angular 模塊，可以從 lib/js/angular 目錄中調(diào)用。
cordova.js 是在使用 Cordova/PhoneGap 創(chuàng)建應(yīng)用時(shí)生成的，不需要手動(dòng)引入，你可以在 Cordova/PhoneGap 項(xiàng)目中找到該文件，所以在開(kāi)發(fā)過(guò)程中顯示 404 是正常的。
創(chuàng)建 APP
接下來(lái)我們來(lái)實(shí)現(xiàn)一個(gè)包含標(biāo)題、側(cè)邊欄、列表等的應(yīng)用,設(shè)計(jì)圖如下：
創(chuàng)建側(cè)邊欄
側(cè)邊欄創(chuàng)建使用 ion-side-menus 控制器。
編輯我們先前創(chuàng)建的 index.html 文件，修改 <body> 內(nèi)的內(nèi)容，如下所示：
<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： 是一個(gè)帶有邊欄菜單的容器，可以通過(guò)點(diǎn)擊按鈕或者滑動(dòng)屏幕來(lái)展開(kāi)菜單。
ion-side-menu-content：展示主要內(nèi)容的容器，可以通過(guò)滑動(dòng)屏幕來(lái)展開(kāi)menu。
ion-side-menu：存放側(cè)邊欄的容器。
初始化 APP
接下來(lái)我們創(chuàng)建一個(gè)新的 AngularJS 模塊，并初始化，代碼位于 www/js/app.js 中：
angular.module('todo', ['ionic'])之后在我們的 body 標(biāo)簽中添加 ng-app 屬性：
<body ng-app="todo">
在 index.html 文件的 <script src="cordova.js"></script> 上面引入 app.js 文件：
<script src="js/app.js"></script>
修改 index.html 文件 body 標(biāo)簽的內(nèi)容，代碼如下所示：
<body ng-app="todo"> <ion-side-menus> <!-- 中心內(nèi)容 --> <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> <!-- 左側(cè)菜單 --> <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>
嘗試一下 ?
以上步驟我們已經(jīng)完成了 ionic 基本 APP 的應(yīng)用。
創(chuàng)建列表
首先創(chuàng)建一個(gè)控制器 TodoCtrl：
<body ng-app="todo" ng-controller="TodoCtrl">
在app.js文件中，使用控制器定義列表數(shù)據(jù)：
angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope) {
$scope.tasks=[
{ title: '菜鳥(niǎo)教程' },
{ title: 'www.runoob.com' },
{ title: '菜鳥(niǎo)教程' },
{ title: 'www.runoob.com' }
];
});在index.html頁(yè)面中數(shù)據(jù)列表我們使用 Angular ng-repeat 來(lái)迭代數(shù)據(jù)：
<!-- 中心內(nèi)容 -->
<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 標(biāo)簽內(nèi)代碼如下：
<body ng-app="todo" ng-controller="TodoCtrl">
<ion-side-menus>
<!-- 中心內(nèi)容 -->
<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>
<!-- 左側(cè)菜單 -->
<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>嘗試一下 ?
創(chuàng)建添加頁(yè)面
修改 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>
以上代碼中我們通過(guò) <script id="new-task.html" type="text/ng-template"> 定義了新的模板頁(yè)面。
表單提交時(shí)觸發(fā) createTask(task) 函數(shù)。
ng-model="task.title" 會(huì)將表單的輸入數(shù)據(jù)賦值給 task 對(duì)象的 title 屬性。
修改 <ion-side-menu-content> 內(nèi)的內(nèi)容，代碼如下：
<!-- 中心內(nèi)容 -->
<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: '菜鳥(niǎo)教程' },
{ title: 'www.runoob.com' },
{ title: '菜鳥(niǎo)教程' },
{ title: 'www.runoob.com' }
];
// 創(chuàng)建并載入模型
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal=modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// 表單提交時(shí)調(diào)用
$scope.createTask=function(task) {
$scope.tasks.push({
title: task.title
});
$scope.taskModal.hide();
task.title="";
};
// 打開(kāi)新增的模型
$scope.newTask=function() {
$scope.taskModal.show();
};
// 關(guān)閉新增的模型
$scope.closeNewTask=function() {
$scope.taskModal.hide();
};
});創(chuàng)建側(cè)邊欄
通過(guò)以上步驟我們已經(jīng)實(shí)現(xiàn)了新增功能，現(xiàn)在我們?yōu)?app 添加側(cè)邊欄功能。
修改 <ion-side-menu-content> 內(nèi)的內(nèi)容，代碼如下：
<!-- 中心內(nèi)容 -->
<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>添加側(cè)邊欄：
<!-- 左邊欄 -->
<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 指令設(shè)置菜單激活樣式。
這里我們創(chuàng)建一個(gè)新的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>
<!-- 中心內(nèi)容 -->
<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是固定在屏幕頂部的組件,可以包如標(biāo)題和左右的功能按鈕。
ionic 默認(rèn)提供了許多種顏色樣式，你可以調(diào)用不同的樣式名，當(dāng)然也可以自定義一個(gè)。
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（副標(biāo)題）
Sub Header同樣是固定在頂部，只是是在Header的下面，就算沒(méi)有寫Header這個(gè)，Sub Header這個(gè)樣式也會(huì)距離頂部有一個(gè)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 是在屏幕的最下方，可以包含多種內(nèi)容類型。
<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>
嘗試一下 ?
此外，如果底部沒(méi)有標(biāo)題，但是又需要右邊的按鈕，你需要在右側(cè)按鈕添加 pull-right如:
Ionic前身是PhoneGap，一款老牌混合開(kāi)發(fā)框架，但是Ionic并不是PhoneGap的替代品，PhoneGap只是一個(gè)殼子，Ionic提供了強(qiáng)大的Ionic Framework和許多基于Cordova的插件，讓開(kāi)發(fā)人員可以更好的使用設(shè)備能力，縮小與原生app的性能差距。
Ionic具有如下特點(diǎn)：
· ionic 基于Angular語(yǔ)法，簡(jiǎn)單易學(xué).
· ionic 是一個(gè)輕量級(jí)框架.
· ionic 完美的融合下一代移動(dòng)框架，支持 Angularjs 的特性， MVC ，MVVM代碼易維護(hù).
· ionic 提供了漂亮的設(shè)計(jì)，通過(guò)SASS構(gòu)建應(yīng)用程序，它提供了很多UI組件來(lái)幫助開(kāi)發(fā)者開(kāi)發(fā)強(qiáng)大的應(yīng)用.
· ionic 專注原生，讓你看不出混合應(yīng)用和原生的區(qū)別.
· ionic 提供了強(qiáng)大的命令行工具.
· ionic 性能優(yōu)越，運(yùn)行速度快.
Ionic由兩部分組成，Ionic CLI和Ionic Framework，通常人們提到Ionic一般指的是Ionic Framework。
a. 安裝Node.js
b. 安裝Ionic和Cordova
npm install –g cordova ionic
2.2.1 Android開(kāi)發(fā)環(huán)境配置
a. java環(huán)境安裝
下載jdk安裝后配置環(huán)境變量
b. android sdk安裝
下載sdk ，安裝后配置環(huán)境變量。
建議在安裝并配置好java環(huán)境后下載安裝AndroidStudio，使用AndroidStudio來(lái)下載并管理Android SDK等開(kāi)發(fā)環(huán)境。
a. 創(chuàng)建應(yīng)用
ionic start MyApp tabs
運(yùn)行該命令后，Ionic CLI將會(huì)自動(dòng)創(chuàng)建tabs模板項(xiàng)目，并下載對(duì)應(yīng)的依賴包。
b. 進(jìn)入目錄
cd MyApp
c. 編譯
ionic build
d. 在瀏覽器中運(yùn)行
ionic serve
e. 在安卓上運(yùn)行
ionic cordova platform add android
ionic cordova bulid android
ionic cordova run android
f. 在ios上運(yùn)行
ionic cordova platform add ios
ionic cordova prepare ios
打開(kāi)Xcode， 點(diǎn)擊File>Open打開(kāi)項(xiàng)目目錄下的platforms/ios文件夾，編譯并運(yùn)行。
· hooks：編譯cordova時(shí)自定義的腳本命令，方便整合到我們的編譯系統(tǒng)和版本控制系統(tǒng)中
· node_modules ：node各類依賴包
· resources ：android/ios 資源（更換圖標(biāo)和啟動(dòng)動(dòng)畫）
· src：開(kāi)發(fā)工作目錄，頁(yè)面、樣式、腳本和圖片都放在這個(gè)目錄下
· www：靜態(tài)文件
· platforms：生成android或者ios安裝包路徑（platforms\android\build\outputs\apk：apk所在位置）
· plugins：插件文件夾，里面放置各種cordova安裝的插件
· config.xml: 配置文件
· package.json: node安裝模塊時(shí)的依據(jù)
· tsconfig.json: TypeScript項(xiàng)目的根目錄，指定用來(lái)編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng)
· tslint.json：格式化和校驗(yàn)typescript
Ionic使用node進(jìn)行管理，當(dāng)拿到一個(gè)項(xiàng)目時(shí)，首先要執(zhí)行的命令是
npm install
下載對(duì)應(yīng)的依賴項(xiàng)。
我們編碼目錄在src中
3.1 程序入口——App.component.ts
一個(gè)Ionic應(yīng)用的程序入口是App.component.ts。在這里編寫進(jìn)入程序時(shí)需要進(jìn)行初始化的任務(wù)。
通常涉及到設(shè)備能力的初始化工作，我們放在platform.ready的回調(diào)中進(jìn)行。
3.2 頁(yè)面編寫
一個(gè)頁(yè)面由4個(gè)文件組成
· .html文件編寫頁(yè)面結(jié)構(gòu)
· .module.ts文件管理頁(yè)面的依賴
· .scss文件管理頁(yè)面樣式
· .ts文件負(fù)責(zé)頁(yè)面邏輯
上圖為官網(wǎng)截圖，常用的生命周期有如下六個(gè)。
行的開(kāi)源移動(dòng)應(yīng)用程序開(kāi)發(fā)框架 Ionic 于今日發(fā)布了 4.0 正式版，代號(hào) Neutronium。官方稱 Ionic 4 為“Ionic for Everyone”。開(kāi)發(fā)者現(xiàn)在可通過(guò) Ionic 使用 Web 技術(shù)輕松構(gòu)建高質(zhì)量的原生和漸進(jìn)式 Web 應(yīng)用程序。
Ionic 4.0.0 Neutronium 源碼下載
https://github.com/ionic-team/ionic/releases/tag/v4.0.0
毫無(wú)疑問(wèn)，Ionic 4 是一個(gè)十分重要的版本。它飽含開(kāi)發(fā)團(tuán)隊(duì)兩年來(lái)的研究和努力，將 Ionic 從“mobile for Angular”的定位轉(zhuǎn)變?yōu)閺?qiáng)大的 UI 設(shè)計(jì)系統(tǒng)和移動(dòng)應(yīng)用程序框架 —— 每個(gè) Web 開(kāi)發(fā)者都可使用它。
Ionic 還在官方博客向大家介紹了 Ionic 是如何完成自身定位的轉(zhuǎn)變，以及為何要轉(zhuǎn)變，我們不妨關(guān)注一下。
簡(jiǎn)單說(shuō)來(lái)就是因?yàn)榍岸私绲淖兓瘜?shí)在太快了。Ionic 剛問(wèn)世的時(shí)候，正是 AngularJS 流行之時(shí)，Ionic 當(dāng)時(shí)的目標(biāo)也只是打造豐富的由 JavaScript 驅(qū)動(dòng)的組件，以使用 Web 技術(shù)構(gòu)建高質(zhì)量的移動(dòng)應(yīng)用程序。由于業(yè)界當(dāng)時(shí)沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)方法可以實(shí)現(xiàn)這一目標(biāo)，Ionic 便把目光瞄準(zhǔn)了 AngularJS，開(kāi)發(fā)者可以在 AngularJS 中構(gòu)建自定義的指令，而由 Ionic 提供的原生組件可打包成易于使用的自定義 HTML 標(biāo)記。任何使用該標(biāo)記的 AngularJS 模板都可以引導(dǎo)組件并運(yùn)行它，就像在瀏覽器中實(shí)現(xiàn)原生的支持。
即便到了 Angular 2 發(fā)布的時(shí)候，Angular 飽受爭(zhēng)議，但做好移植工作的 Ionic 2 和 3 在彼時(shí)依然收獲了不錯(cuò)的口碑，Ionic 3 甚至被認(rèn)為是 Ionic 最成功的版本。
但到了最近兩年，前端變化之快不但令人目不暇接，甚至讓 Ionic 這樣的框架也陷入了瓶頸。AngularJS 已被 Angular 取代，而引領(lǐng)前端發(fā)展的“三駕馬車”，Ionic 表示其中的“兩駕馬車”與自身并無(wú)交集。
為此，Ionic 進(jìn)行了反思，并在2017年開(kāi)始嘗試將 Ionic 轉(zhuǎn)變?yōu)橐唤M Web 組件，他們判斷這將是未來(lái)的趨勢(shì) —— 讓世界上幾乎每個(gè) Web 開(kāi)發(fā)者都可在他們的移動(dòng)、桌面和漸進(jìn)式 Web 應(yīng)用程序中使用 Ionic 的組件 —— 只需在他們的應(yīng)用程序中使用 Ionic 的自定義 HTML 標(biāo)記即可。
最重要的是，Ionic 使用的是標(biāo)準(zhǔn) Web API 而非第三方 API，所以開(kāi)發(fā)者大可放心使用，Ionic 的組件 API 在未來(lái)許多年都會(huì)保持穩(wěn)定，而不是成為前端和框架發(fā)展進(jìn)程中的犧牲品。
有關(guān) Ionic 4 前世今生的介紹到此為止，接下來(lái)繼續(xù)看看 Ionic 4 有哪些值得關(guān)注的變化。
性能
官方宣稱 Ionic 4 是有史以來(lái)最快的版本，近 100 個(gè) Ionic 組件均通過(guò)性能、定制性和外觀方面的評(píng)估。每個(gè)組件均符合 iOS 和 Android 上的最新標(biāo)準(zhǔn)。
官方提供的性能對(duì)比 ↑↑↑
Ionic 4 開(kāi)箱即用，而優(yōu)異的性能則讓 Ionic 成為了構(gòu)建高性能 PWA 的最佳 UI 框架。官方表示，為了使 Ionic 達(dá)到 Google 規(guī)定的性能標(biāo)準(zhǔn)，需要使用新的異步組件加載和交付方法。為實(shí)現(xiàn)這一目標(biāo)，Ionic 團(tuán)隊(duì)花了一年的時(shí)間使用 Stencil 構(gòu)建一個(gè) Web 組件管道來(lái)生成 Ionic 組件，確保它們封裝緊密，可延遲加載。
支持 React 和 Vue
雖然目前對(duì) React 和 Vue 的支持尚處于 alpha 狀態(tài)，但終歸讓開(kāi)發(fā)者在框架選擇上有了更多樣化的選擇。
其他值得關(guān)注的更新
文檔改進(jìn)。官方對(duì)開(kāi)發(fā)者文檔進(jìn)行了較大的改進(jìn)。設(shè)計(jì)更簡(jiǎn)單、導(dǎo)航更清晰、內(nèi)容更突出。
此外，還整合了 API 引用和組件引用方面的內(nèi)容，減少了之前開(kāi)發(fā)者必須多次跳轉(zhuǎn)才得以獲取所需信息的次數(shù)。
文檔最新地址 >>> http://ionicframework.com/docs
路線圖
Ionic 4 現(xiàn)在可用于生產(chǎn)環(huán)境，官方提供的 Roadmap 顯示未來(lái)將改進(jìn)對(duì)特定桌面的 UI 支持、改進(jìn)鍵盤方案，提供更豐富的主題和動(dòng)畫。另外就是，提供對(duì) React 和 Vue“一等公民”的支持。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
