Android開發入門

（一）Ionic2入門

Ionic2的介紹：Ionic2基於Agular2開發， ionic 是一個強大的 HTML5 應用程序開發框架(HTML5 Hybrid Mobile App Framework )。 可以幫助您使用 Web 技術，比如 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程序。

ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。

ionic是一個輕量的手機UI庫，具有速度快，界面現代化、美觀等特點。爲了解決其他一些UI庫在手機上運行緩慢的問題，它直接放棄了IOS6和Android4.1以下的版本支持，來獲取更好的使用體驗。

Ionic2的優勢與不足：

1.ionic 基於Angular語法，簡單易學。
2.ionic 是一個輕量級框架。
3.ionic 完美的融合下一代移動框架，支持 Angularjs 的特性， MVC ，代碼易維護。
4.ionic 提供了漂亮的設計，通過 SASS 構建應用程序，它提供了很多 UI 組件來幫助開發者開發強大的應用。
5.ionic 專注原生，讓你看不出混合應用和原生的區別
6.ionic 提供了強大的命令行工具。
7.ionic 性能優越，運行速度快。

Ionic是一個優秀 的前端移動框架。

一、安裝Node.js 8.9.4版本。

儘量安裝最新版本，防止老版本出現bug.
打開Node.js command prompt命令臺；node -v查看版本；npm -v淘寶鏡像。

輸入以下命令，切換到淘寶鏡像源：

npm install -g cnpm –registry=http://registry.npm.taobao.org

二、安裝Ionic

輸入以下命令安裝 Ionic （如果剛纔設置了淘寶鏡像源，可以使用 cnpm 代替 npm）：

npm install -g ionic

需要注意的是，如果之前安裝過 Ionic 2 的 beta 版本，需要先卸載掉：

npm uninstall -g ionic

然後重新安裝。

安裝完成後輸入以下命令看一下版本號：

C:\Users\yxd>ionic -version
2.1.0

目前最新版本是2.1.0。如果是 beta 版本的話，請重新安裝，確保安裝最新版。

三、安裝Cordova

輸入以下命令安裝 Cordova：

npm install -g cordova

看一下版本號：

C:\Users\yxd>cordova -version
6.3.1

四、安裝JDK

安裝最新版本1.8或以上。

五、安裝Android SDK

軟件開發工具包Software Development Kit

Android Studio\Android-sdk-windows\VS Code\
具體是什麼呢？

---

（二）快速上手

http://www.cnblogs.com/yanxiaodi/p/6060123.html

一、創建項目

在node.js命令行 輸入 ionic start MyIonic2Project ，並選擇模板tutorial，默認有 5個模板–tabs\blank\sidemenu\super\conference\tutorial\aws，然後安裝過程中ctrl+c退出後選擇cnpm install淘寶鏡像安裝，npm無法安裝，因爲天朝有牆。

二、在瀏覽器中運行

cd MyProject(自己新建的項目目錄)
Ionic serve
接下來CLI會編譯項目，輸出一些內容，然後瀏覽器打開一個http://localhost:8100的窗口，端口號會隨着PC變化，如果8100被佔用會使用8101。

三、項目結構

看一下Ionic2 APP的項目結構，這是一個標準的cordova項目結構。

./src/index.html

這是APP的入口，設置腳本和css,主要需要注意的是：

底部有
,build/main.js是自動生成的，實際是把TypeScript轉化成了javaScript.

./src/

在src目錄裏我們會找到原始的沒有經過編譯的代碼，這也是我們的主要工作目錄。當我們運行ionic serve命令的時候，在src/目錄下的文件會被轉譯成正確的瀏覽器能夠解釋的JavaScript版本（當前是ES5）。這意味着我們可以使用高級的TypeScript，但是會編譯回瀏覽器需要的老版本的JavaScript。 src/app/app.module.ts是App的入口。

./src/app/app.html

是主要的模板文件，ion-menu作爲菜單，ion-nav作爲主要的內容區域，ion-menu的content屬性綁定到ion-nav的本地變量[content]上，所以ion-nav知道要顯示什麼。

<ion-menu [content]="content">

  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

四、添加頁面

看一下src/app/app.html，在底部會看到以下代碼：

import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  // make HelloIonicPage the root (or first) page
  rootPage = HelloIonicPage;
  pages: Array<{title: string, component: any}>;

rootPage被設置爲HelloIonicPage,所以HelloIonicPage將是nava controller第一個載入的頁面。

解讀一個頁面

tip:ts(typeScript)對應javascript,scss對應css,html對應html.

src/pages/hello-ionic目錄下：打開hello-ionic.ts

export class MyApp {
  @ViewChild(Nav) nav: Nav;

  // make HelloIonicPage the root (or first) page
  rootPage = HelloIonicPage;
  pages: Array<{title: string, component: any}>;

看到HelloIonicPage這個類，創建了一個page,即Angular的Component（組件），並且會載入Ionic的導航系統。注意因爲Page是被動態載入的，所以不需要selector.

所有的page都是一個類，並且關聯到對應的模板文件上。看一下src/pages/hello-ionic/hello-ionic.html，即這個頁面的模板文件：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>

  <h3>Welcome to your first Ionic app!</h3>

  <p>
    This starter project is our way of helping you get a functional app running in record time.
  </p>
  <p>
    Follow along on the tutorial section of the Ionic docs!
  </p>
  <p>
    <button ion-button color="primary" menuToggle>Toggle Menu</button>
  </p>

</ion-content>

是navigation bar的模板。當我們導航到頁面時，navigation bar的按鈕和頁面標題將會作爲整個頁面動畫的一部分展現出來。

模板其餘的部分是標準的Ionic代碼，設置了內容區域和輸出我們的歡迎信息。

創建一個新頁面

創建這個新頁面，我們並不需要做很多配置，只需要確保設置好navigation bar要展示的標題就可以了。

看一下src/pages/list/list.ts的內容，這裏定義了一個新頁面：

import { Component } from '@angular/core';

import { NavController, NavParams } from 'ionic-angular';

import { ItemDetailsPage } from '../item-details/item-details';

@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {
  icons: string[];
  items: Array<{title: string, note: string, icon: string}>;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    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) {
    this.navCtrl.push(ItemDetailsPage, {
      item: item
    });
  }
}