來扯點ionic3[0] 吹完牛再入門也不遲

目錄

1.序
2.ionic的念法
3.知識與環境儲備
4.安裝過程
5.項目目錄結構分析
6.在瀏覽器運行
7.結語

序~

哇，不得不的說，這幾年前端發展地太快了。這些曾經就是用來寫寫網頁的技術，現在已經把觸角伸到了各個開發領域中。回望昨天彷佛仍是靠刷新瀏覽器、用alert來調試代碼的時代，現在已經有了強大的調試工具、豐富的模塊管理機制、自動化的構建模式、能夠與操做系統交互的API…總讓人以爲快要跟不上時代，不過不要緊，正由於前端迸發出的強大生命力，讓javascript這個曾經的小玩具翻身成了世界上最流行的編程語言之一，也讓咱們比過去更有信心地在前端領域自由探索。

現在已經有了使用前端技術構建移動APP的技術。這些技術，不只能讓咱們方便地作出與移動應用同樣的視圖，更能夠實現與原生應用體驗很是接近的體驗。並且隨着技術的進步，這樣的體驗會愈來愈接近。

ionic就是這樣的一個框架，它可以讓你使用前端技術來製做、調試、打包可在手機上運行的移動APP。使人欣喜的是，你能夠用一套代碼編譯出iOS、Andorid和Windows Phone的版本，也能夠直接以Web APP的形式發佈。因此若是你已經有必定的前端技術儲備，不妨來玩玩ionic，體驗一下跨界開發的奇妙感受。

單詞教學時間

無論怎麼說，使用ionic框架，總得知道ionic這個詞是怎麼唸的，否則之後出去吹牛，念不出來或者唸錯了，是否是會有那麼些尷尬。

ionic在英語中是ion離子的形容詞，框架的logo倒的確有那麼點離子的味道。讓咱們上音標：

/aɪˈɑ:nɪk/
[aɪˈɒnɪk]

第一行是美式音標，大體念法是「愛啊~尼克」（嗯這個啊要稍稍拖一下），第二行是英式的念法，大體讀「愛哦尼克」。具體採用哪一個，那是咱們開發者的自由，說白了就是用兩種語氣詞來感嘆咱們對尼克的愛慕（尼克是誰？我不知道啊）。

知識與環境儲備（懂的部分請直接略過）

1. HTML5+CSS3+Javascript

其實這仨沒啥好說了，若是你不知道《沁園春·長沙》的做者是誰，還會有誰信你念太高中。不過這裏是否是非得要學過HTML5，其實也不必定。由於開發中並無太多地涉及到HTML5特定的API，並且在ionic中你不須要寫head部分，因此也沒有doctype之類的問題。主要你須要瞭解一些HTML5的語法特性，好比<input>這類單標籤最後再也不使用自封閉的斜槓了、還有require, pattern, placeholder這些頗有用的表單屬性。這些對你的開發都會有所幫助。

2. ES6(ECMA2015)

Javascript的新一代標準，加入了很是多的新特性，其實多數人應該都接觸了，不過可能如今不少本科還不會講這個。因此若是你還不知道，那就去翻翻文檔。學習ES6可能須要花一些時間，你能夠先了解這些：

1. let和const命令: 將來你要習慣用它們代替var來聲明變量
2. class: 再也不用函數來聲明類了，若是你寫過java或C#之類的語言，這會讓你很是爽。
3. 箭頭函數: 官方文檔裏的示例基本都是用箭頭函數，除了學習使用方法還要注意一下this的指向和傳統函數是不一樣的。
4. Promise: 回調函數+事件驅動的升級版，能夠說這是ES6裏最重要的特性之一了，多玩兩下你必定會愛上它。瞭解它的特性，把它變成你的武器。後面將會出現一個叫可觀察對象的怪獸，打它你就容易多了。
5. for...of 循環: 跟之前的for...in循環是相似的，相信你很快就能知道他們的區別。

這裏傳送阮一峯老師的教程，聰明的你確定很快就學會

ECMAScript 6 入門

3. Node.js與NPM

已經火到不想再講了，不過不知道node是啥不要緊，至少你裝上就好了，蛤，沒裝？

Node.js中文網

npm是node裏的包管理工具，在這裏你須要用它來安裝所須要的模塊，傳送簡書上的介紹，主要了解 install命令，瞭解全局安裝和本地安裝的區別。

NPM 學習筆記整理（做者:ihoey）

4. Typescript

簡稱ts，巨硬出的語言，號稱javascript的超集，在ionic中你須要用ts來編寫腳本，其實就是在ES6的基礎上加入了更多的語法。你能夠不用很是的瞭解，但你得看一下它的基礎類型和類型的聲明方式，由於在開發階段它是屬於強類型的，因此若是沒有正確地定義和使用類型，編譯的時候就無法經過類型檢查。

let num: number = 0; //定義數字型變量
let str: string = 'Hello World!'; //定義字符串
let bool: boolean = true; //定義布爾變量
let strarr1: string[] = ['a', 'b', 'c']; //定義字符串數組
let strarr2: Array<string> =  ['a', 'b', 'c']; //定義字符串數組的另外一組方式
let dog: Animal = new Animal(); //定義一個類的實例

使用類型聲明，讓代碼的語義更清晰，也讓每一個變量做用更加的明確。必定程度上防止開發者亂來（哈哈），不過當你在遇到不能明確變量類型的時候，你可使用一個萬能的類型any，它會再編譯時跳過類型檢查；

let who_am_i:any;

更多的內容請參考官方文檔：

基礎類型

5. Angular

ionic是基於Angular框架開發的，當前的ionic3即是基於Angular4.x，不過沒接觸過Angular2以上的版本，我以爲問題也不大。我剛接觸ionic的時候尚未學過Angular，只是當時一些不理解的問題在後面學習Angular2的時候解開了。在個人文章裏，也不會對Angular技能做要求，遇到相關的問題，我會盡力給解釋相關的原理。若是到後面你熟練了ionic的開發，再去學Angular你也會以爲很是容易的。

Angular官網

開始安裝：革命就分兩步走

1.安裝cordova和ionic

$ npm install -g ionic cordova

使用全局安裝，這樣後面你就能夠在控制檯使用ionic命令來執行相關的操做

2.新建項目

$ ionic start demo tabs

demo是項目的名稱，tabs表明項目使用了tabs模板，ionic主要有三種模板，tabs, sidemenu和blank，tabs應該是使用最普遍的一種了。

初步瞭解項目結構

在項目安裝完成後，咱們打開demo項目目錄，來看一下它大體的結構。

全部的源代碼都存放在了src目錄，在src目錄中，和咱們打交道最多的，就是app和pages兩個文件夾。

app文件夾

main.ts 入口文件

之前你們寫網頁的時候，都是用到一個js文件，就在網頁中調用一個script標籤。而如今的前端項目，都只調用一個入口文件，讓入口文件幫咱們去引入其它依賴的文件。這比如之前商店都開在街邊，你要買什麼東西直接走到店面去。而如今流行各類商業廣場CBD，你先走進商場大門，再去找要去的店鋪。一個好處就是，你預先不用知道這家店的具體位置，你只管走進大門吹空調就好了，這難道不爽嗎。

app.module.ts 根模塊文件

ionic是基於angular的，而angular是徹底模塊化的。根模塊文件是一個無微不至的大管家，你把你要用什麼（模塊、組件、服務、管道、指令等）都告訴它，它會幫你去弄來，而你就只管作個安靜的美男子就好了。

app.component.ts 根組件

angular裏的組件，就是咱們平時所說的視圖，組件的產品就是咱們所看見的界面了。根組件主要定義了app總體的視覺表現，好比根頁面、狀態欄、啓動界面等等。

app.component.scss 全局樣式文件

嗯，就是寫全局css的地方，不過在ionic裏你能夠用sass來寫，若是你不瞭解sass，我後續會在作一些介紹。

app.html 根組件的模板

沒有存在感，略了。

pages文件夾

pages很簡單啦，就是存放APP的全部頁面，每一個文件夾就是一個頁面，裏面定義了頁面的業務邏輯、模板和樣式，下一章咱們就來說講頁面的那些事兒。

開始第一次運行

記得先cd到項目目錄

$ cd demo

在控制檯執行serve命令

$ ionic serve

ionic就會在本地建立一個服務器，稍等片刻後，瀏覽器就會彈出應用的首頁。

是否是感受這個應用的體態有些……豐滿，咱們按F12進入開發者工具，而後點擊移動設備工具，就能夠模擬頁面在移動設備上的效果。

上方還有幾款預設的設備，你能夠切換它們來觀察不一樣分辨率，不一樣操做系統的效果。不過要記得每次切換後，把頁面刷新一下。

此時，服務器會監事你項目中文件的變化，當你對其中的文件進行了修改時，頁面會自動刷新呈現新的狀態，當你完成調試工做時，在控制檯使用ctrl+c來關閉本地服務器。在開發初期，瀏覽器能幫咱們完成大部分的調試工做，也就是你無需準備實體移動設備或者虛擬機，很是地方便。

結語

前端框架已經成爲了一種熱潮，如今的培訓機構也在積極地推出各類框架的課程。可是使用框架並不就表明了掌握前端技術，其實你也能夠看出來，要用好一個框架，那些基礎知識起着舉足輕重的做用。若是你在以前已經積累了不少的基礎知識，這篇文章你基本上兩下就看完了；可是若是你接觸的還很少，那你可能還得花點時間去補充那些必要的技能。

框架是一種工具，也許今天它是煊赫一時的大衆明星，但明天就有可能變成過氣的淘汰品。可是那些最基礎的知識和思惟，是能夠支撐你在開發道路上一直走下去的，而且可讓你很快地就能掌握新的工具和技術。特別對於學生來講，不管是學習前端或後端，必定戒驕戒躁，踏踏實實地去打好底層的基礎。