一年前研究混合框架，初步確定了四種方案給公司選擇，ionic，hbuilder，wex5,React-native這四個(gè)框架各有優(yōu)缺點(diǎn)，ionic和react－native是國(guó)外框架，相對(duì)好一點(diǎn)，文檔更新很快，就不一一說(shuō)了，大概的思路都是一樣的，js邏輯實(shí)現(xiàn)，同時(shí)調(diào)用原生功能，h5，CSS3 UI實(shí)現(xiàn)，其實(shí)他們都有自己的ui框架，當(dāng)時(shí)選擇了國(guó)內(nèi)的hbuiler，開(kāi)發(fā)了三款應(yīng)用，iOS和Android都有，今天同樣公司發(fā)展的改變，整體框架都變了，ionic2框架重新提上了方案，決定用ionic2開(kāi)發(fā)hybird應(yīng)用(具體原因你猜)，后續(xù)會(huì)有系列的博客分享。
安裝ionic最新版本
ionic官網(wǎng)地址：http://ionicframework.com
1.準(zhǔn)備工作
下載 Node.js（下載包），WebStorm（IDE，編寫(xiě)代碼，瀏覽器調(diào)試）,JDK（webstorm 運(yùn)行環(huán)境），Android SDK(Android編譯)
Ionic 2 程序主要通過(guò)Ionic命令行工具 CLI 來(lái)創(chuàng)建和開(kāi)發(fā)，并使用 Cordova 來(lái)構(gòu)建和部署為原生應(yīng)用程序。也就是說(shuō)我們需要先安裝一些工具來(lái)實(shí)現(xiàn)程序開(kāi)發(fā)
要?jiǎng)?chuàng)建 Ionic 2 項(xiàng)目，你需要安裝最新版本的 CLI 和 Cordova 。在此之前你需要安裝最新版本的 Node.js 。點(diǎn)這里 下載安裝 Node.js ，然后繼續(xù)安裝 Ionic CLI 和 Cordova 來(lái)進(jìn)行應(yīng)用程序開(kāi)發(fā)：
命令前面可能需要添加 sudo 提權(quán)來(lái)進(jìn)行全局安裝。
安裝 Ionic
npm install -g ionic
安裝 Cordova
npm install -g cordova
查看ionic版本
ionic –v
查看cordova版本
cordova –v
更新ionic和cordova包
npm update -g cordova ionic
更新已建ionic項(xiàng)目中的js類(lèi)庫(kù)，命令行中先進(jìn)入項(xiàng)目所在目錄
ionic lib update
展現(xiàn)ionic項(xiàng)目結(jié)果（顯示在iOS和Android上的樣式）
ionic serve –lab
創(chuàng)建項(xiàng)目
ionicstart myApp blank（空項(xiàng)目）
ionicstart myApp tabs（帶導(dǎo)航條）
ionicstart myApp sidemenu（帶側(cè)滑菜單）
添加android/ios平臺(tái)
ionicplatform add android/ios（添加android平臺(tái)/ios）
ionicplatform remove android/ios（移除android平臺(tái)/ios）
ionicbuild android/ios（編譯項(xiàng)目apk,ipa）
ionicemulate android/ios（運(yùn)行項(xiàng)目apk 手機(jī)連接在手機(jī)運(yùn)行 模擬器連接在模擬器運(yùn)行）
生成android／ipa安裝包(生成后apk／ipa的存放路徑在終端種可以看到)
ionic build android/ios
ionicrun android/ios （相當(dāng)于build + emulate）
ionicserve （開(kāi)啟服務(wù)調(diào)試）
指明一個(gè)外部的ip地址，可以讓外部用戶(hù)查看。
ionic serv --address 68.52.96.10
使用設(shè)備運(yùn)行應(yīng)用，如果無(wú)設(shè)備可用將自動(dòng)使用模擬器
ionic run ios [options]
//options的選項(xiàng)包括：
-l livereload， 實(shí)時(shí)刷新變化。
-c 打印app里的console
-s 打印設(shè)備的console
-p 指定設(shè)備的端口
-i 指定livereload的重刷端口
--debug|--release
//當(dāng)處于livereload模式時(shí)，使用r重啟客戶(hù)端，使用 g your_url 跳轉(zhuǎn)到指定url， 使用c啟動(dòng)或關(guān)閉console，使用s啟動(dòng)或關(guān)閉設(shè)備的console， 使用q退出。
//查看系統(tǒng)情況
ionic info
安卓自帶瀏覽器性能不好，可以強(qiáng)行安裝一個(gè)殼，這將安裝一個(gè)Chromium內(nèi)核。
ionic browser add crosswalk
查看可用的browser
ionic browser list
刪除安裝的browser
ionic browser revert android
安裝完成后來(lái)創(chuàng)建你的第一個(gè) Ionic 應(yīng)用：
ionic start MenuDemo sidemenu --v2
MenuDemo可以替換成你的應(yīng)用程序名稱(chēng)。 --v2 表示當(dāng)前生成的是 Ionic 2 版本的應(yīng)用，不添加則生成 Ionic 1 應(yīng)用。
創(chuàng)建完成后 cd 到你的程序目錄中，執(zhí)行 ionic serve 來(lái)啟動(dòng)你的Ionic應(yīng)用，并確保測(cè)試在瀏覽器中能夠正常顯示：
cd MenuDemo
ionic serve
瀏覽器運(yùn)行起來(lái)是這樣的
項(xiàng)目結(jié)構(gòu)
讓我們來(lái)剖析一下Ionic 2應(yīng)用，在我們創(chuàng)建的文件夾中，我們可以看到一個(gè)典型的Cordova項(xiàng)目結(jié)構(gòu)。我們可以在其中安裝原生插件，并創(chuàng)建平臺(tái)特定的項(xiàng)目文件。
src/index.html
是 Ionic 2 應(yīng)用的主入口文件，其目的是設(shè)置腳本和CSS引導(dǎo)，然后開(kāi)始運(yùn)行我們的應(yīng)用程序。 我們不會(huì)在這個(gè)文件中花費(fèi)大量的時(shí)間。
為了讓?xiě)?yīng)用正常運(yùn)作，Ionic 2 會(huì)在HTML中尋找 <ion-app> 標(biāo)記。 在這個(gè)例子中，我們有：
<ion-app></ion-app>
并且在下方我們還能看到這樣的腳本引用：
<script src="cordova.js"></script>
<script src="build/polyfills.js"></script>
<script src="build/main.js"></script>
· cordova.js 是Cordova應(yīng)用的需求文件，我們?cè)陂_(kāi)發(fā)過(guò)程中這個(gè)文件將會(huì)提示404錯(cuò)誤，這不需要擔(dān)心。Cordova將會(huì)在構(gòu)建過(guò)程中自動(dòng)注入這個(gè)文件。
· build/polyfills.js 是在構(gòu)建過(guò)程中自動(dòng)生成的，我們不需要過(guò)多關(guān)注。
build/main.js 是一個(gè)包含了Ionic, Angular和你的JS腳本的文件。
./src/app/app.component.ts
在 app 文件夾中能找到我們的預(yù)編譯代碼。這是Ionic 2應(yīng)用程序的大部分工作起始的地方。當(dāng)我們運(yùn)行 ionic serve 時(shí)， app 中的代碼將被編譯成當(dāng)前瀏覽器能夠執(zhí)行的JavaScript版本（當(dāng)前是ES5）。也就是說(shuō)我們可以使用TypeScript或更高級(jí)別的 ES6+ 進(jìn)行開(kāi)發(fā)，而在編譯時(shí)會(huì)自動(dòng)降級(jí)為瀏覽器可識(shí)別的版本。
app.component.ts 是應(yīng)用的入口文件。
在文件中我們能夠看到這樣的結(jié)構(gòu)：
@Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(
)
}
每個(gè)應(yīng)用程序都有一個(gè)根組件，用于控制應(yīng)用程序的其余部分。這跟Ionic 1和Angular 1中的 ng-app 非常相似。原先的啟動(dòng)配置被放倒了app.module.ts 文件中。
在這個(gè)組件中，我們?cè)O(shè)置了模版文件 app.html，下面我們來(lái)看一下這個(gè)文件。
./src/app/app.html
app.html 里是我們應(yīng)用的主模版：
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item*ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-Go-back because it's poor UX to combine STGB with sidemenus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
在這個(gè)模板中，我們?cè)O(shè)置了一個(gè) ion-menu 作為側(cè)面菜單，然后一個(gè) ion-nav 組件作為主要內(nèi)容區(qū)域。 ion-menu 菜單的 [content] 屬性綁定到了我們 ion-nav 的本地變量 content 上。所以我們知道哪里會(huì)發(fā)生動(dòng)作變化。
接下來(lái)，我們來(lái)看看如何創(chuàng)建更多頁(yè)面并執(zhí)行基本的導(dǎo)航。
添加頁(yè)面
現(xiàn)在我們對(duì)Ionic 2應(yīng)用的布局有一個(gè)基本的掌握，讓我們來(lái)了解一下在應(yīng)用中創(chuàng)建和導(dǎo)航到頁(yè)面的過(guò)程。
讓我們看一下 app.html 頁(yè)面的底部：
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
注意 [root] 屬性綁定。 這本質(zhì)上是設(shè)置了ion-nav組件的“root”頁(yè)面。 當(dāng)ion-nav加載時(shí)，變量 rootPage 引用的組件將是根頁(yè)面。
在 app.component.ts 中， MyApp 組件在其構(gòu)造函數(shù)中指定：
import { Component, ViewChild } from '@angular/core';import { Nav, Platform } from 'ionic-angular';import { StatusBar, Splashscreen } from 'ionic-native';import { Page1 } from '../pages/page1/page1';import { Page2 } from '../pages/page2/page2';@Component({ templateUrl: 'app.html'})export class MyApp { @ViewChild(Nav) nav: Nav; rootPage: any = Page1; pages: Array<{title: string, component: any}>; constructor(public platform: Platform) { this.initializeApp(); // used for an example of ngFor and navigation this.pages = [ { title: 'Page One', component: Page1 }, { title: 'Page Two', component: Page2 } ]; } initializeApp() { this.platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. StatusBar.styleDefault(); Splashscreen.hide(); }); } openPage(page) { // Reset the content nav to have just this page // we wouldn't want the back button to show in this scenario this.nav.setRoot(page.component); }}我們看到 rootPage設(shè)置成了 Page1，所以 Page1將是在nav控制器中加載的第一個(gè)頁(yè)面。
而page1指向的頁(yè)面是import { Page1 } from '../pages/page1/page1';
創(chuàng)建一個(gè)頁(yè)面
接下來(lái)，讓我們看看我們正在導(dǎo)入的 Page1。在 src/ pages/page1/page1 文件夾中，找到并打開(kāi) page1.ts 。
你可能已經(jīng)注意到每個(gè)頁(yè)面都有自己的文件夾，該文件夾以頁(yè)面命名。 在每個(gè)文件夾內(nèi)，我們還可以看到一個(gè).html和一個(gè).scss同名文件。 例如，在 page1 / 我們將找到 page1.ts ， page1 html 和 page1.scss 。 雖然使用這種模式不是必需的，但它可以有助于保持項(xiàng)目的組織結(jié)構(gòu)。
然后我們找到 page1類(lèi)，在創(chuàng)建的頁(yè)面中提供了一個(gè)Angular組件和已經(jīng)使用Ionic的導(dǎo)航系統(tǒng)加載的所有Ionic指令。注意，如果頁(yè)面是動(dòng)態(tài)加載的，那么它們沒(méi)有選擇器（ selector ）：
import { Component } from '@angular/core';import { NavController } from 'ionic-angular';@Component({ selector: 'page-page1', templateUrl: 'page1.html'})export class Page1 { constructor(public navCtrl: NavController) }}所有的頁(yè)面都會(huì)有一個(gè)類(lèi)和一個(gè)關(guān)聯(lián)的模版。讓我們?cè)倏匆幌?src/ pages/ page1/ page1.html ，這是一個(gè)模版頁(yè)面：
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Page One</ion-title> </ion-navbar></ion-header><ion-content padding> <h3>Ionic Menu Starter</h3> <p> If you get lost, the <a >docs</a> will show you the way. </p> <button ion-button secondary menuToggle>Toggle Menu</button></ion-content>
<ion-navbar>是這個(gè)頁(yè)面中導(dǎo)航欄的模版。當(dāng)我們導(dǎo)航到這個(gè)頁(yè)面，導(dǎo)航欄的按鈕和標(biāo)題作為頁(yè)面轉(zhuǎn)換的一部分進(jìn)行過(guò)渡。
模板的其余部分是標(biāo)準(zhǔn)的Ionic代碼，用于設(shè)置我們的內(nèi)容區(qū)域并輸出我們的歡迎信息。
創(chuàng)建其他頁(yè)面
要?jiǎng)?chuàng)建一個(gè)其他的頁(yè)面，我們不需要太多的事情，只要確保配置標(biāo)題和我們期望在導(dǎo)航欄顯示的東西即可。
讓我們來(lái)看一下 src/pages/page2/ page2.ts。在這里，你會(huì)看到一個(gè)新的頁(yè)面被定義：
import { Component } from '@angular/core';import { NavController, NavParams } from 'ionic-angular';@Component({ selector: 'page-page2', templateUrl: 'page2.html'})export class Page2 { selectedItem: any; icons: string[]; items: Array<{title: string, note: string, icon: string}>; constructor(public navCtrl: NavController, public navParams: NavParams) { // If we navigated to this page, we will have an item available as a nav param this.selectedItem = navParams.get('item'); // Let's populate this page with some filler content for funzies this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane', 'american-football', 'boat', 'bluetooth', 'build']; this.items = []; for (let i = 1; i < 11; i++) { this.items.push({ title: 'Item ' + i, note: 'This is item #' + i, icon: this.icons[Math.floor(Math.random() * this.icons.length)] }); } } itemTapped(event, item) { // That's right, we're pushing to ourselves! this.navCtrl.push(Page2, { item: item }); }}
此頁(yè)面將創(chuàng)建一個(gè)包含多個(gè)項(xiàng)目的基本列表頁(yè)面。
總的來(lái)說(shuō)，這個(gè)頁(yè)面和我們之前看到的 Page1非常相似。在下一節(jié)中，我們將學(xué)習(xí)如何導(dǎo)航到新頁(yè)面！
導(dǎo)航到頁(yè)面
回想上一部分我們?cè)?/span> Page2類(lèi)中有一個(gè)函數(shù)，看起來(lái)像這樣：
itemTapped(event, item) {
// That's right, we're pushing toourselves!
this.navCtrl.push(Page2, {
item: item
});
}
你可能已經(jīng)注意到我們引用了一個(gè)page2。自己跳到自己，這是一個(gè)包含在教程啟動(dòng)器中的頁(yè)面。
保存好之后。你會(huì)發(fā)現(xiàn) ionic serve將重新編譯應(yīng)用程序并刷新瀏覽器，你的修改將會(huì)出現(xiàn)在程序中。讓我們?cè)跒g覽器中重新訪問(wèn)我們的應(yīng)用程序，當(dāng)我們點(diǎn)擊一個(gè)項(xiàng)目，它將導(dǎo)航到項(xiàng)目詳細(xì)信息頁(yè)面！請(qǐng)注意，菜單切換按鈕將被替換為后退按鈕。這是Ionic遵循的原生風(fēng)格，但可以按需配置。
工作原理
Ionic 2導(dǎo)航的工作原理就像一個(gè)簡(jiǎn)單的堆棧，我們通過(guò)push將一個(gè)頁(yè)面推到堆棧的頂端，這會(huì)讓我們的應(yīng)用前進(jìn)一步并顯示一個(gè)返回按鈕。反之，我們也可以pop掉一個(gè)頁(yè)面。因?yàn)槲覀冊(cè)跇?gòu)造函數(shù)中設(shè)置了this.navCtrl，我們可以調(diào)用this.navCtrl.push() ,并傳遞我們要導(dǎo)航到的頁(yè)面。我們還可以傳遞一個(gè)數(shù)據(jù)對(duì)象給我們想要導(dǎo)航到的頁(yè)面。使用push導(dǎo)航到新頁(yè)面很簡(jiǎn)單，而且Ionic的導(dǎo)航系統(tǒng)非常的靈活。你可以查看導(dǎo)航文檔找到更多高級(jí)導(dǎo)航示例。
當(dāng)涉及到URL，Ionic 2的工作方式有點(diǎn)不同于Ionic 1。不使用URL導(dǎo)航，可以確保我們可以總是回到一個(gè)頁(yè)面（例如應(yīng)用程序啟動(dòng)）。這意味著我們不只是限于使用href來(lái)導(dǎo)航。無(wú)論怎樣，我們?nèi)匀豢梢赃x擇在必要時(shí)使用網(wǎng)址導(dǎo)航到某個(gè)網(wǎng)頁(yè)。
· 建議熟悉一下TypeScript的基本語(yǔ)法和使用，包括@types使用和d.ts編寫(xiě)。
· 掌握Angular2的基本原理和開(kāi)發(fā)思路。
· 熟悉Ionic 2的所有Components和API。
了解Cordova的使用方法和插件。
聯(lián)系客服
