Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic
Code

Ionic 入門 ︰ 簡介

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Getting Started With Ionic.
Getting Started With Ionic: JavaScript Components

Chinese (Traditional) (中文(繁體)) translation by Qiang Ji (you can also view the original English article)

Ionic 是一個流行的移動應用程序框架,它使用 HTML,CSS 和 JavaScript,幫助你快速創建混合移動應用程序。 在本系列中,你將通過創建一個功能齊全的移動應用程序去學習如何用 Ionic 設置和創建屬於你自己的移動應用程序。 我們首先介紹 Ionic,並學習如何開始使用工具。

在本教程中,我們將介紹:

  • Ionic 是什麼和它的各個組成部分
  • 為什麼你會選擇使用 Ionic
  • 如何為創建 Ionic 混合應用程序去設置你的電腦
  • 開發流程,從開始到部署應用程序

1. Ionic 堆棧:Cordova, Angular, Ionic

Ionic 包含並且統一管理了幾種技術。 我喜歡把 Ionic 想成是由幾個框架構成的一個堆棧。 是這些技術之間的相互作用創造了最終的應用程序,並且為開發者和使用者提供了一個好的體驗。

Cordova:混合應用程序框架

作為一個基礎,Ionic 使用 Cordova 作為混合應用程序的框架。 本質上,它允許一個 web 應用程序被打包進一個原生的應用程序,並且可以被安裝在一個設備上。 它會嵌入一個 web 視圖,而此 web 視圖則是一個可以運行 web 應用程序的獨立瀏覽器。

它還提供一個 API,你可以用它與設備本身進行通信,例如,獲取 GPS 坐標或訪問照相機。 許多這些額外的硬件功能是通過 Cordova 插件系統被啟用的,所以你只需要安裝和使用你需要的功能。 在以後的教程裡,我會給你介紹更多關於 Cordova 的東西。

Angular:Web 應用程序框架

Angular 是一個眾所周知的 Javascript 框架,用於構建 web 應用程序,Ionic 是建立在它之上的。 Angular 提供 web 應用程序邏輯,它可用來創建實際的應用程序。

如果你已經熟悉它,那麼你就能夠很快地掌握 Ionic 的特性。 如果你是 Angular 新手,你可以繼續閱讀,你將開始掌握一些基本的 Angular。

我不會討論太多涉及 Angular 細節的東西,所以我建議你花一些時間,通過閱讀 Angular 的文檔來學習它的基礎知識。

Ionic:用戶界面框架

Ionic 的主要賣點是一組清新的用戶界面組件,這些組件是專為移動設備而設計的。 當你創建一個原生的應用程序,會有原生的 SDK 為你提供一些界面組件,例如選項卡和對話框。

Ionic 提供了一組類似的界面組件,這些組件可以在混合應用程序中被使用。 Ionic 總聲稱它正是混合應用程序缺少的 SDK,並且它很好的擔當了這個角色。 此外,Ionic 還有許多其他顯著的特點,這些使其成為一個非常有吸引力的選擇。

2. 為什麼是 Ionic

Ionic 不僅僅只是一組用戶界面組件,它也是一組供開發人員使用的工具,還是一個用於快速構建混合移動應用程序的生態系統。 我會講到為什麼混合應用程序非常適合 web 開發人員,Ionic 平台和工具的詳細信息,和在什麼情況下 Ionic 並不適合你的項目。

為什麼使用混合技術 V.S. 使用原生技術或移動網站技術

這裡有些舊的爭論,有關那些用不同方法創建的應用程序的品質之爭。 幾個月前,我寫了一篇關於三類移動體驗的詳細文章。 如果你不確定這些不同的方法用在現代設備上的優缺點,我推薦你去看一下它。

混合應用程序的優勢在於它能讓 web 開發人員使用他們已有的技能去創建外觀和體驗都和原生應用程序相似的移動應用程序。

強大的工具 & Ionic 平台

很少有移動框架的工具質量能和Ionic的工具質量相媲美。 在餘下的教程中我們仔細看一下主要的工具,但是我會介紹一些隨著時間的推移你可能會發現有用的功能。

Ionic CLI

Ionic 的 CLI 工具是第一流的工具,它提供了大量的功能,那些功能可以幫助你開始一個項目,預覽它,並最終創建它。

Ionic 平台

Ionic 提供了許多功能,一些是免費的一些不是,這對專業的發展非常有用,比如應用程序分析,推送通知和部署工具。

Ionic 市場

有許多付費的和免費的 Ionic 插件能被輕鬆地整合進你的應用程序中。 有主題,獨特的組件,和其它插件。

Ionic 局限性

Ionic 不是對每一個移動應用程序都完美的適合。 考慮下面的情況,以決定 Ionic 是否是你項目正確的選擇。

  • Ionic 不支持所有的平台。 Ionic 完全支持 IOS 和 Android,但對其它平台只有一定程度的支持。 它在平台最新的版本中表現的最好。 支持舊設備或更老的操作系統,可能會導致性能下降,這通常是由於在那些設備和系統中的瀏覽器沒有執行的很好。
  • Ionic 不會給你一個真正的原生應用程序。 如果你的應用程序需要與原生平台進行重度交互,例如大量的圖形處理,Ionic 可能無法提供所需的全部能力。 這是因為它需要藉用 Cordova 才能讓 web 應用程序連接到硬件,而這會增加一些滯後。

換句話說,如果你不需要為舊設備開發一個應用程序,並且不需要太多的針對硬件的編程,Ionic 完全能夠為你的用戶提供一個優質的應用程序體驗。

3. 安裝 Ionic 和 Cordova

Ionic 帶有一個極其出色的 CLI (命令行界面), 可以用來幫助啟動、 構建和部署你的應用程序。 你會在開發過程中大量使用 CLI。 Ionic 也依賴於 Cordova,因此你會間接地使用它。

你必須先安裝 Node.js。 如果你還沒有這樣做,就花點時間在你的系統里安裝它。 在本教程中我使用 Node.js 5.6,我推薦使用最新的穩定版本。

安裝 Ionic 和 Cordova 就跟安裝兩個 Node 全局模塊一樣簡單。 如果你已經這樣做過,那麼這應該是相當熟悉的了。 打開你的終端並運行以下命令:

這會花一些時間,但你應該得到一個它們都已安裝成功的消息。 你可以通過運行下面的命令並查看輸出的版本號來驗證你的安裝是否成功。

它應該輸出 Ionic 和 Cordova 的版本號。 為了本教程的目的,我使用 Ionic 版本1.7.14和 Cordova 版本 6.0.0。

Ionic CLI 中有相當多的功能,你總是可以通過運行 ionic help 獲得一個快速參考。 如果需要,你還可以看看在線文檔以獲得更多的幫助。

其它安裝

Ionic 沒有捆綁所有的,用於構建一個應用程序所需的工具,它依賴一些額外的 SDK ,和由 Apple 和/或 Google 提供的軟件。 去閱讀並遵循 Cordova 的平台指南是正確的,這會對設置你想要使用的每個平台很有幫助。

你可以在以後這樣做,但在你預覽或者在模擬器或設備上模擬一個應用程序之前你需要先設置平台工具。

4. Ionic 開發流程

當你開發一個 Ionic 應用程序時,你將經歷一組常規的步驟。 這些步驟都有相應的 CLI 命令來幫助你。 讓我們看一下主要的命令,這些命令代表一個典型的,創建 Ionic 應用程序的開發流程。

第一步:開始一個項目

假設你已經有一個要做什麼的基本思路,第一步就是創建一個新項目。 Ionic 項目都是基於 Cordova的,這需要搭一些腳手架讓Cordova在後面了解你的項目。 Ionic 有幾個預先建好的模板你可以用來生成一個起始項目,但你也可以提供你自己的。

要起始一個項目,運行 ionic start sample 命令。 它在當前的目錄中創建一個新的文件夾,你所提供的名字將被用於目錄名(比如 sample)。 當以上命令被執行,它會從 GitHub 下載一些創建項目需要的文件並初始化你的項目。 它會使用一個默認的項目模板,此項目模板是一個有基本功能的帶選項卡界面的應用程序。

運行 cd sample 命令進入新建的目錄。 當你查看當前的目錄,你會注意到有幾個文件和目錄在其中。 此時不用太在意你所看到的每一個文件。 這裡有一些事情你需要先做。

  • cordova.xml: 此文件包含 Cordova 的配置。
  • ionic.project: 此文件包含 Ioinc 的配置。
  • /plugins:此目錄包含所有已安裝的 Cordova 插件。 在最初,它會加載Ionic 為你預先安裝的幾個默認的插件。
  • /platforms:此目錄包含所有你針對的,已經配置了你的應用程序的平台,如 Android 和 IOS。 Ionic 也可能會為你安裝一個默認的平台。
  • /scss:此目錄包含應用程序SASS樣式的源文件。 你馬上就會知道你可以自定義它。
  • /www:此目錄包含被 Cordova 加載的 web 應用程序的文件。 你所有的 JavaScript,HTML 和 CSS文件都應該在此目錄中。

對於本教程的其餘部分,我們將用你剛剛建立的項目,去看看如何開發和預覽應用程序。

第二步:開發和預覽應用程序

你已經啟動了一個項目,現在要開始開發了。 在開發的初期,你可能會想在瀏覽器中預覽一下你所做的東西。 畢竟一個 Ionic 應用程序只是一個 web 應用程序。 Ionic 附帶一個本地的開發服務器,此開發服務器可創建和為你的應用程序提供服務。

運行 ionic serve 去啟動這個開發服務器。 一但此服務器被啟動,它會在你默認的瀏覽器中打開應用程序的預覽。 至此,你可以使用瀏覽器的開發者工具來檢查此應用程序,看看是否有報錯,並可做你建立一個Web應用程序時通常會做的所有其他任務。

此服務器會繼續在後台運行並監視項目文件的更改。 當它檢測到你編輯過並保存了一個文件時,它會為你自動重載瀏覽器。

使用開發者工具中的設備模擬器預覽在 Chrome 中運行的 Ionic 應用程序

我推薦使用 Chrome 作為你的瀏覽器,因為它有強大的開發者工具可用。 一個特別有用的功能是它能夠模擬設備的尺寸,這易於在特定的設備上預覽你的應用程序。 它並不是一個真正的模擬器,像一個真的設備那樣去運行應用程序,它只是模仿應用程序的尺寸。

第三部:添加一個平台

Cordova 支持許多不同類型的移動設備,我們稱之為平台。 你必須去註冊你的應用程序的目標平台並安裝相應的項目文件。 幸運的是,這主要是通過 Ionic CLI 來實現的。 Ionic 完全支持 IOS 和 Android 平台。

運行ionic platform add android 去添加一個平台。 用 ios 代替 android 去添加 IOS 平台。 一旦添加完成,在你項目的平台目錄下你將會看見一個新的文件夾。 此文件夾包涵平台特定的文件。 通常,你需要避免對此目錄下的文件進行太多的改動。

如果你遇上任何問題, 你可以刪除這個平台然後再添加一邊。 運行 ionic platform remove android 去刪除一個平台。

第四部:模擬應用程序

在一些時候,你想在一個真的模擬器中預覽你的應用程序。 模擬器本質上是一個真實設備的軟件版本。 這對快速測試應用程序在真實設備上的表現很有用。 要注意的是,因為模擬器只是軟件仿真設備,它不具有硬件設備的每項功能。

一些你的代碼可能不會按預期工作,比如,如果你希望去使用該設備的聯繫人列表。 通常情況下,只有與硬件集成的功能可能無法按預期工作,但對大多數的東西,它應該工作的不錯。

設置模擬器需要花點功夫,但這取決於你使用什麼類型的電腦和你需要去測試什麼。 你只能在一個運行 OS X 操作系統的電腦上去模擬一個 iPhone,而 Android 則能夠在所有的操作系​​統裡被模擬。 去設置一個模擬器,請參考我之前已提供鏈接的平台指南。

一旦你已完成模擬器的設置,你可以運行 ionic emulate android -c -l 去開啟模擬。 就像之前說的那樣,用 ios 代替 android 如果你的目標平台是 IOS。 這會在模擬器中創建,安裝和啟動你的應用程序。 這需要一些時間,所以你可能需要使用一些有用動態加載功能,正如你之前在瀏覽器中做的一樣。

你可以使用可選參數 -l 在模擬器中動態地重新加載應用程序(不需要重新創建和安裝)。 這個很有幫助只要你不改變任何有關該應用程序構建的設置(比如 Cordova 的設置)。 你還可以用可選參數 -c 去把控制台消息發送到終端日誌。 我幾乎每一次都會使用它們。

第五步:把應用程序部署到設備

預覽你的應用程序的最佳方法就是在設備上安裝並運行它。 這需要你有設置好的平台和與你電腦相連的設備。 此操作需要一些不同的基於你所有擁有設備類型的配置。 你可以參考上面的平台指南,去連接你的設備。

一旦你已連接上一台設備,從命令行運行應用程序是十分簡單的。 使用 ionic run android -c -l ,Ionic 則會創建,部署和啟動你的應用程序。 再一次,你可以用 ios 代替 android。 就像模擬器命令一樣,你可以用可選參數 -l-c 去啟用動態重載和轉移控制台日誌記錄到終端。

一旦應用程序被安裝在你的設備上,你就可以斷開電腦和設備的連接,而安裝好的應用程序將留在設備上。 如果你想在一段時間內測試它的表現並展示給別人看,這將會很有用。

5. 什麼是 Ionic 2

我經常會被問到有關 Ionic 2 和是否應該使用它的問題。 在2016年初,寫這篇文章的時候,對此仍然還沒有一個簡單的答案。 我用它創建過一些原型,我知道有些人已經用它創建了一些生產應用程序,但它還沒有準備好。

好消息是,你今天學習 Ionic 1 意味著學習 Ionic 2 將是相當簡單的。 你在這個系列裡學習到的大部分 Ionic 特有的東西將在不同的版本里保持一致。 最大的變化將會因Ionic 2是建立在Angular 2之上而發生的。

所以,當你今天可以創建 Ionic 2 應用程序時,它還沒有被正式的發布。 現在學習Ionic 1,你並不會浪費任何時間。 一旦 Ionic 2 正式發布,升級應該是相對簡單的。

總結

在本篇教程中,我們討論了很多關於Ionic的東西。

  • 你學習了一些有關Ionic的優缺點。
  • 你為創建Ionic應用程序而設置你的電腦。
  • 你創建了你的第一個項目並在瀏覽器中預覽它。
  • 你設置了一個模擬器並且/或者連接上你的設備去預覽你的應用程序。

在本系列的下一個部分,你將開始用本教程中列出的技術,創建一個真實且實用的應用程序。

創建一個Ionic 模板並贏取$1000

如果你已經熟悉了Ionic框架,你也許會考慮進入Envato之最想要的Ionic模板比賽。 怎麼做?創建一個獨特的Ionic模板,並在2016年4月27日之前提交給 Envato 市場。

最好的5個模板會獲得$1000獎勵。 有興趣嗎? 在大賽的網站上可以了解到更多的有關比賽要求和指南的詳細信息。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.