手摸手帶你入門ionic3(一)：ionic介紹

移動開發已經成爲一股潮流，web開發者假如也想在此浪潮中衝浪的話，我推薦 ionic 這個跨平臺的移動應用開發框架。它的口號是 Build amazing apps in one codebase, for any platform, with the web, 能夠作到 write once, run anywhere。

ionic1 基於 angularjs，已經成爲歷史。前不久發佈了ionic4，作了很大的改動，最重要的一點就是使用了 Stencil 這個能夠將自定義組件轉化爲web Components的編譯器，鑑於這個版本暫時仍是beta版本，不建議使用。

本系列的文章所有基於ionic3，底層的Angular使用5.x版本，之後都簡稱ionic，ionic3以前基於Angular 4.x版本，如今已經全面切換到Angular5.x了，你們開發的過程當中注意甄別，由於 5.x和4.x之間仍是有不少改動的。

ionic 的成功少不了Angular 和Cordova 的功勞。

Angular 是 Google 推出的前端開發框架，使用 TypeScipt 語言進行開發，適合規模大，多人配合的項目。

Cordova 脫胎於 Adobe 的 PhoneGap，後來其核心源碼被捐給Apache ，更名爲 Cordova ，是一個使用web技術的跨平臺移動應用開發框架。

ionic 是 Angular 的一些核心開發者，將 Angular 與 Cordova 結合起來，並針對移動應用的特色進行改造，提供了豐富的UI組件的跨平臺移動應用開發框架。同時，ionic也提供了命令行工具 ionic-cli ，功能強大，簡單好用。

上圖能夠看出 Angular，Cordova 和 ionic 以前的關係。

我的認爲 ionic 能夠簡單解釋爲成 Angular+Cordova 基礎上的UI框架，它使用 Angular 開發，提供了精美的UI組件，經過Cordova plugin 與原生功能進行交互，最後藉助 Cordova 命令打包成能夠運行在不一樣平臺上的App，固然也能夠只使用 www 文件夾下的內容當作能夠經過瀏覽器訪問的 webApp 。

打包出來的Android App其實就是一個 WebView ，加載本地的www 文件夾中的網頁。網頁中能夠調用 Native 功能就是經過 Cordova 這個橋樑。iOS同理。

ionic 不是簡單的把 Angular 和 Cordova 結合在一塊兒，也作了一些改造，使之更適合移動開發。首先，ionic 拋棄了 Angular 中的路由框架，而是實現了本身的堆棧式頁面導航功能，經過簡單的 push 和 pop方法，實現頁面的跳轉和返回，更符合移動開發習慣。其次，ionic 也針對 cordova native plugin寫了配套的JS依賴包，使web開發者能夠很快上手原生插件的使用。最後，ionic 提供了豐富的適合移動應用開發的UI控件，好比，DateTime，Toobar等經常使用的組件。

ionic 的缺點也是顯而易見的，首先，性能，仍是性能，安卓低端機上卡頓明顯，用戶體驗不好。其次，雖然 ionic 提供了大部分常見的與原生進行交互的插件，可是假如你的需求很冷門，只能本身寫一個，好比說支付。最後，使用 Angular 這個框架，學習曲線比較陡峭。

下圖展現了應用打開的過程及以打開相機爲例調用原生功能的流程，內容簡單，不過多解釋。

後記

本人在寫一個ionic入門的教學手冊 ionic3-handbook，還有一個基於真實項目的ionic項目HW-basic，感興趣的能夠看一下。