ionic

概述

來源

ionic：離子行楞，是一個開源的UITools
要介紹 Ionic级乍，就一定要先介紹 Apache Cordova。Apache Cordova 的前身是 PhoneGap，最早由 Nitobi 公司開發(fā)。Adobe 在2011年收購了 Nitobi惠爽，并在 PhoneGap 的基礎(chǔ)上提供了商業(yè)化服務(wù)癌蓖，成為目前的 Adobe PhoneGap。PhoneGap 的源代碼同時被貢獻(xiàn)給 Apache 基金會婚肆，成為了新的開源項(xiàng)目 Apache Cordova租副。
ionic是基于cordova(web app打包方案)的app構(gòu)建方案。ionic app本質(zhì)是一個web app旬痹，然后通過cordova可以打包成一個android附井、ios app或者桌面程序。
Ionic 剛問世的時候两残，正是 AngularJS 流行之時，Ionic 當(dāng)時的目標(biāo)也只是打造豐富的由 JavaScript 驅(qū)動的組件把跨，以使用 Web 技術(shù)構(gòu)建高質(zhì)量的移動應(yīng)用程序人弓。由于業(yè)界當(dāng)時沒有統(tǒng)一的標(biāo)準(zhǔn)方法可以實(shí)現(xiàn)這一目標(biāo)，Ionic 便把目光瞄準(zhǔn)了 AngularJS着逐，開發(fā)者可以在 AngularJS 中構(gòu)建自定義的指令崔赌，而由 Ionic 提供的原生組件可打包成易于使用的自定義 HTML 標(biāo)記。任何使用該標(biāo)記的 AngularJS 模板都可以引導(dǎo)組件并運(yùn)行它耸别，就像在瀏覽器中實(shí)現(xiàn)原生的支持健芭。

維護(hù)團(tuán)隊(duì)

主要是由Drifty Co團(tuán)隊(duì)也叫Ionic Team維護(hù)，同時在github上開源

版本歷史特點(diǎn)和發(fā)展史

版本

• ionic1：使用AngularJs構(gòu)建
• ionic2：Angular構(gòu)建
• ionic3：Angular構(gòu)建
• ionic4：目前最新版本秀姐，官方版本集成angular慈迈，同時支持使用vue、react開發(fā)
  注：angularjs和angular是兩套框架省有，一個團(tuán)隊(duì)開發(fā)的兩套框架痒留，名字類似，但完全是兩套框架蠢沿。angularjs使用js開發(fā)伸头，angular使用ts開發(fā)。

特點(diǎn)

• 跨平臺
• 基于web標(biāo)準(zhǔn)
• 漂亮的設(shè)計(jì)
• 簡單易學(xué)
• 輕量級

與Flutter舷蟀、React的區(qū)別

ionic （網(wǎng)頁應(yīng)用）

基于webView恤磷，優(yōu)點(diǎn)：豐富得多的控件庫、滿足各種需求的頁面框架野宜、完全的動態(tài)化..
缺點(diǎn)：WebView的渲染效率和JavaScript執(zhí)行性能太差扫步。對于Android來說，各個廠商系統(tǒng)的定制速缨，導(dǎo)致很難保證得到一致的體驗(yàn)

React （原生應(yīng)用）

React Native是Facebook開源的跨平臺移動應(yīng)用開發(fā)框架锌妻，是Facebook早先開源的JS框架 React 在原生移動應(yīng)用平臺的衍生產(chǎn)物，目前支持iOS和安卓兩大平臺旬牲。使用Javascript語言仿粹，及CSS來開發(fā)移動應(yīng)用
http://www.reactnative.com/

Flutter （原生應(yīng)用）

Flutter是谷歌開發(fā)的移動UI響應(yīng)式框架搁吓，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。Flutter項(xiàng)目的開發(fā)語言是Dart吭历，Dart 是由 Google 開發(fā)的一種面向?qū)ο笳Z言堕仔，可以編譯成 ARM 和 x86 代碼直接運(yùn)行在 iOS、Android 設(shè)備上晌区。
Flutter開辟了一種全新的思路摩骨，從頭到尾重寫一套跨平臺的UI框架，包括UI控件、渲染邏輯甚至開發(fā)語言敬飒。渲染引擎依靠跨平臺的Skia圖形庫來實(shí)現(xiàn)径簿，依賴系統(tǒng)的只有圖形繪制相關(guān)的接口，可以在最大程度上保證不同平臺灾馒、不同設(shè)備的體驗(yàn)一致性，邏輯處理使用支持AOT的Dart語言遣总，執(zhí)行效率也比JavaScript高得多睬罗。

定位

ionic是一個專注于用WEB開發(fā)技術(shù)，基于HTML5創(chuàng)建類似于手機(jī)平臺原生應(yīng)用的一個開發(fā)框架旭斥。綁定了AngularJS和Sass容达。這個框架的目的是從web的角度開發(fā)手機(jī)應(yīng)用，基于PhoneGap（Cordova）的編譯平臺垂券，可以實(shí)現(xiàn)編譯成各個平臺的應(yīng)用程序花盐。

與其他框架的關(guān)系 （Angular Vue React）

ionic4目前已經(jīng)發(fā)布了基于Angular的正式版本，對 React 和 Vue 的支持尚處于開發(fā)狀態(tài)圆米，未來我們可以用自己喜歡的語言結(jié)合Ionic來開發(fā)移動端應(yīng)用卒暂。

一句話總結(jié)

一套使用Angular基于Cordova的UITools

使用

安裝

CLI安裝

#node安裝（ionic官網(wǎng)建議LTS版本）
brew install node
#angular Cli 安裝
npm install -g @angular/cli
#CLI安裝
npm install -g cordova ionic
# starter: blank 、 tabs 娄帖、sidemenu三種模板
ionic start <name> <starter>
# run
cd <name>
ionic serve

腳手架

tree.png

Environment設(shè)置

Node & npm

幾乎所有現(xiàn)代JavaScript項(xiàng)目的工具都基于 Node.js的蜘醋，與Node捆綁在一起的npm，是一款js的包管理器咏尝。兩種方式安裝Node & npm：

brew install node

or
官網(wǎng) https://nodejs.org/en/ 下載

iOS配置

Xcode

xcode是一款蘋果公司開發(fā)的用來編寫原生iOS App的IDE压语，它包含command-line tools和iOS SDK，你可以免費(fèi)的從App Store下載编检。
下載安裝完成后胎食，確認(rèn) command-line tools

xcode-select --install

ios-sim和ios-deploy

ios-sim/ios-deploy是將開發(fā)過程中的程序部署到ios模擬器/ios設(shè)備（真機(jī)調(diào)試）的插件，使用npm全局安裝：

npm install -g ios-sim
npm install -g ios-deploy

ios打包

構(gòu)建iOS工程：

# 添加iOS平臺
ionic cordova platform add ios
# 將項(xiàng)目編譯為iOS工程
ionic cordova build ios

證書及xcode配置：
http://www.reibang.com/p/9c00358bcc44

備注

Xcode版本和Mac OS版本相匹配允懂，也就是說舊版本的Mac OS不能安裝新版本的Xcode斥季，最好保持Mac OS和Xcode版本都是最新版

Android配置

Java

原生安卓APP是由java語言編寫，從oracle上下載JDK
注： Cordova與最新版的java不兼容累驮，你必須安裝JDK8才能使用Cordova構(gòu)建安卓APP。（Cordova is not compatible with the latest version of Java. You must install JDK8 to build Android apps with Cordova.）

Gradle

Gradle是安卓APP的構(gòu)建工具舵揭，必須單獨(dú)安裝

brew install gradle

Android Studio

Android Studio使用來創(chuàng)建原生安卓APP的IDE谤专，詳細(xì)安裝設(shè)置見https://ionicframework.com/docs/installation/android

插件 （以相機(jī)插件為例）

之前，我們已經(jīng)得到一個ionic最簡單的Demo午绳，現(xiàn)在置侍，我們就以Devapp的方式運(yùn)行在真機(jī)上，并且使用原生相機(jī)拦焚。

添加iOS/Android平臺

ionic cordova platform add ios
ionic cordova platform add android

這個命令會生成config.xml文件蜡坊，它是用來聲明cordova平臺iOS和安卓的設(shè)置文件，cordova會讀取此文件并在構(gòu)建iOS/Android二進(jìn)制文件是應(yīng)用config.xml文件里面對應(yīng)的設(shè)置赎败。
要在DevApp上運(yùn)行此應(yīng)用秕衙，你需要在index.html文件里面添加cordova.js的引用，src/index.html的頭部（head）添加內(nèi)容如下：

<head>
  <!-- ... Other HTML tags... -->
  <script src="cordova.js"></script>
</head>

注：Usually, building the app with Cordova will add this script tag into the index.html file for us. Since we are skipping that step and using DevApp instead, we have to do it manually ourselves.

安裝DevApp

見 構(gòu)建-->Running on Native-->ionic DevApp
注：安裝完成之后需要登錄ionic賬戶僵刮，如果沒有ionic賬戶据忘，可以點(diǎn)擊屏幕下方的Sign Up按鈕來注冊

通過CLI添加Camera Dependencies

為了使用相機(jī)，我們需要引入他的JavaScript和本機(jī)庫依賴

npm install @ionic-native/camera

在package.json文件中我們注意到添加了類似如下內(nèi)容：

 "@ionic-native/camera": "^5.13.0"

接下來我們輸入以下命令來添加iOS/Android代碼搞糕，從而有效的允許Camera在移動設(shè)備上運(yùn)行勇吊。

ionic cordova plugin add cordova-plugin-camera

在config.xml文件中更新類似于下面的代碼用于調(diào)用原生相機(jī)

 <plugin name="cordova-plugin-camera" spec="^4.1.0" />

接下來這一步是專門針對iOS用戶的，從iOS10開始窍仰，開發(fā)人員必須提供應(yīng)用程序訪問camera的原因汉规，見下面代碼添加到config.xml文件的<platform name="ios">標(biāo)簽下，當(dāng)然驹吮，<string>Used to take pictures</string>可以填寫訪問camera的原因

<!-- Required for iOS 10: Camera permission prompt -->
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
    <string>請?jiān)试S使用相機(jī)用來照相针史！</string>
</edit-config>

將相機(jī)插件添加到Angular App Module

因?yàn)榇隧?xiàng)目本質(zhì)上是一個Angular項(xiàng)目晶伦，所以我們還需要幾個步驟，首先悟民，在App Modulesrc/app/app.module.ts中聲明Camera:

import { Camera } from '@ionic-native/camera/ngx';

然后將其添加到Provider中：

providers: [
    StatusBar,
    SplashScreen,
    Camera,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ]

現(xiàn)在坝辫，它可以被用到任何頁面中了

在頁面中使用

以tap2頁面為例
在tab2.page.html中創(chuàng)建用來調(diào)用相機(jī)的按鈕：

<ion-fab vertical="bottom" horizontal="center" slot="fixed">
  <ion-fab-button (click)="takePicture()">
    <ion-icon name="camera"></ion-icon>
  </ion-fab-button>
</ion-fab>

創(chuàng)建用來顯示所選取圖片的img控件，并綁定currentImage屬性：

<img [src]="currentImage" *ngIf="currentImage">

在tab2.page.ts中引入Camera：

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

接下來射亏，定義“currentImage”變量并通過構(gòu)造函數(shù)將Camera注入此類：

export class Tab2Page {
  currentImage: any;

  constructor(private camera: Camera) { }
}

最后近忙，在tab2.page.ts中添加“takePicture”方法。點(diǎn)擊攝像機(jī)按鈕后智润，使它能夠調(diào)用相機(jī)：

export class Tab2Page {
  currentImage: any;

  constructor(private camera: Camera) { }

  takePicture() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    };

    this.camera.getPicture(options).then((imageData) => {
      this.currentImage = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      // Handle error
      console.log("Camera issue:" + err);
    });
  }
}

原生Cordova插件支持列表

見 https://ionicframework.com/docs/appflow/devapp/

構(gòu)建

Running on Native

ionic DevApp

Ionic DevApp擴(kuò)展了Ionic Framework的功能及舍，可以直接在設(shè)備上輕松測試應(yīng)用程序。DevApp提供實(shí)時更改的實(shí)時視圖窟绷，并提供豐富的預(yù)安裝本機(jī)插件庫锯玛，以測試應(yīng)用程序的本機(jī)功能。
無需安裝復(fù)雜的Native SDK兼蜈，只需一個簡單的命令攘残，在安裝DevApp的任何地方運(yùn)行的應(yīng)用程序?qū)⒘⒓纯晒╊A(yù)覽，并且可供實(shí)時刷新为狸。
DevApp是每個Ionic帳戶附帶的免費(fèi)服務(wù)歼郭。

下載DevApp

iOS下載鏈接：https://itunes.apple.com/us/app/ionic-devapp/id1233447133?ls=1&mt=8
Android下載鏈接：https://play.google.com/store/apps/details?id=io.ionic.devapp&hl=en

serve

確保運(yùn)行DevApp的設(shè)備和計(jì)算機(jī)位于同一網(wǎng)絡(luò)上，使用如下命令運(yùn)行：

ionic serve --devapp

當(dāng)然也可以添加參數(shù)

ionic serve --host=123.123.123.123 --port=4200

現(xiàn)在辐棒，應(yīng)用程序可以調(diào)用任何本機(jī)功能病曾，并返回正確的執(zhí)行信息

Deploy App

設(shè)置Package ID/Bundle ID及App名稱：
打開config.xml文件，找到<widget>標(biāo)簽,

# Package ID/Bundle ID
id="com.Demo.inspect"  
# 版本號
version="0.0.1"
# App名稱
<name>Demo</name>

更多config.xml文件設(shè)置見https://cordova.apache.org/docs/en/latest/config_ref/#widget

iOS

構(gòu)建iOS工程：

ionic cordova build ios

這會在platform目錄下生成名字為ios的xcode工程漾根，使用xcode打開
在左側(cè)邊欄選中project泰涂，在General選項(xiàng)卡下查看Bundle及其他一些設(shè)置信息是否與config.xml文件里面設(shè)置的一致（Display Name/Bundle Id/Version/Build可以直接修改）

ios-xcode-identity-setup.png

ios-xcode-signing-setup.png

ios-xcode-play-button-area.png

Android

構(gòu)建Android工程：

ionic cordova build android

打開/platforms/android/app/build/outputs/apk/目錄并找到apk文件秘蛇，安裝到目標(biāo)設(shè)備上
詳見：https://ionicframework.com/docs/building/android

web View結(jié)構(gòu)

在原生設(shè)備中其做，Web View支持Web應(yīng)用程序，Ionic為與Cordova集成的應(yīng)用程序維護(hù)了一個Web View插件赁还，使用Ionic CLI時妖泄，默認(rèn)情況下會提供該插件。

什么是Web View

ionic應(yīng)用程序是使用web技術(shù)并使用webView進(jìn)行渲染的應(yīng)用程序艘策，實(shí)際上就是一個全屏和全功能的web瀏覽器蹈胡。
現(xiàn)在的webView為諸如攝像頭、傳感器、GPS罚渐、揚(yáng)聲器和藍(lán)牙等硬件功能提供了許多的內(nèi)置的HTML5 API却汉，但有時也可能需要訪問特定于平臺的硬件API。在Ionic應(yīng)用程序中荷并，可以通過橋接層訪問硬件API合砂，通常使用公開JavaScript API的本機(jī)插件

webview-architecture.png

Ionic Web View插件專門用于現(xiàn)代JavaScript應(yīng)用程序。對于iOS和Android源织，應(yīng)用程序文件始終使用http://協(xié)議托管翩伪，并在本地設(shè)備上運(yùn)行優(yōu)化的HTTP服務(wù)器。

文件協(xié)議

Cordova應(yīng)用程序托管在本地HTTP服務(wù)器上谈息。但是缘屹，某些插件會嘗試通過file://協(xié)議訪問設(shè)備文件。為避免http://和file://之間的麻煩侠仇，必須重寫設(shè)備文件的路徑以使用本地HTTP服務(wù)器轻姿。例如，file:///path/to/device/file必須在應(yīng)用程序中呈現(xiàn)之前重寫為http://<host>:<port>/<prefix>/path/to/device/file逻炊。
對于Cordova應(yīng)用程序互亮，Ionic Web View插件提供了用于轉(zhuǎn)換文件URI的實(shí)用程序功能：window.Ionic.WebView.convertFileSrc()。還有一個相應(yīng)的Ionic Native插件：@ionic-native/ionic-webview余素。

實(shí)現(xiàn)

iOS：wkWebView
Android：Web View for Android

布局

Structure

從單頁面布局到拆分窗格布局再到modal胳挎，ionic Frameork提供了幾種不同的布局方式，用來構(gòu)建應(yīng)用程序

Header and Footer Layout

最簡單的布局一般包括Header和Content溺森，應(yīng)用程序中的大多數(shù)頁面通常都具有這兩個頁面，but a header is not required in order to use content.

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>Header</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content padding>
    <h1>Main Content</h1>
  </ion-content>
</ion-app>

有時窑眯，應(yīng)用程序需要在內(nèi)容下方有一個工具欄

<ion-app>
  <ion-content padding>
    <h1>Main Content</h1>
  </ion-content>

  <ion-footer>
    <ion-toolbar>
      <ion-title>Footer</ion-title>
    </ion-toolbar>
  </ion-footer>
</ion-app>

Header和Footer也可以組合應(yīng)用到一個頁面上

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>Header</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content padding>
    <h1>Main Content</h1>
  </ion-content>

  <ion-footer>
    <ion-toolbar>
      <ion-title>Footer</ion-title>
    </ion-toolbar>
  </ion-footer>
</ion-app>

Tabs Layout

Tabs Layout可以讓用戶在內(nèi)容視圖之間快速切換屏积，每個tap都可以使用ion-router-outlet或包含靜態(tài)內(nèi)容或?qū)Ш蕉褩on-nav

<ion-app>
  <ion-tabs>
    <ion-tab tab="home">
      <h1>Home Content</h1>
    </ion-tab>
    <ion-tab tab="settings">
      <h1>Settings Content</h1>
    </ion-tab>

    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="home">
        <ion-label>Home</ion-label>
        <ion-icon name="home"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="settings">
        <ion-label>Settings</ion-label>
        <ion-icon name="settings"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-app>

Menu Layout

Menu Layout通常用于導(dǎo)航

<ion-app>
  <ion-menu>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-list-header>
          Navigate
        </ion-list-header>
        <ion-menu-toggle auto-hide="false">
          <ion-item button>
            <ion-icon slot="start" name='home'></ion-icon>
            <ion-label>
              Home
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-page class="ion-page" main>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-toggle>
            <ion-button>
              <ion-icon slot="icon-only" name="menu"></ion-icon>
            </ion-button>
          </ion-menu-toggle>
        </ion-buttons>
        <ion-title>Header</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      <h1>Main Content</h1>
      <p>Click the icon in the top left to toggle the menu.</p>
    </ion-content>
  </ion-page>
</ion-app>

<ion-menu-controller></ion-menu-controller>

Split Pane Layout

Split Pane Layout具有更復(fù)雜的結(jié)構(gòu)，因?yàn)樗梢越M合以前的布局磅甩。它允許在視口位于指定breakpoint上方時顯示多個視圖炊林。如果設(shè)備的屏幕尺寸低于特定大小，則將隱藏拆分窗格視圖卷要。
默認(rèn)情況下渣聚，拆分窗格視圖將在屏幕大于768px或md時顯示，但可以通過設(shè)置when屬性來自定義以使用不同的breakpoint僧叉。下面是一個示例奕枝，其中拆分窗格包含一個菜單，該菜單對于sm尺寸及以上的屏幕可見瓶堕。

<ion-app>
  <ion-split-pane when="sm">
    <ion-menu>
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-list>
          <ion-list-header>
            Navigate
          </ion-list-header>
          <ion-menu-toggle auto-hide="false">
            <ion-item button>
              <ion-icon slot="start" name='home'></ion-icon>
              <ion-label>
                Home
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-page class="ion-page" main>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-menu-toggle>
              <ion-button>
                <ion-icon slot="icon-only" name="menu"></ion-icon>
              </ion-button>
            </ion-menu-toggle>
          </ion-buttons>
          <ion-title>Header</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content padding>
        <h1>Main Content</h1>
      </ion-content>
    </ion-page>

  </ion-split-pane>
</ion-app>

Responsive Grid（響應(yīng)式網(wǎng)格）

見 https://ionicframework.com/docs/layout/grid#customizing-the-grid