使用ionic3開始本身的App開發之路

因爲此次換工做的緣由，個人技術路線也有了一些變化。我本來比較喜歡react，前端js框架方面一直偏向於react。我第一次來到這家公司面試的時候聽到他們要開發一款APP，要是用跨平臺的技術方案。因而我當時提議的是react native。不過講實話呢我也不是頗有信心作好react native。雖然本身又一些java的基礎，還有比較熟悉react，可是react native就看着文檔只造太小小的輪子，相比真正的投入生產還比較遠。

可是呢我本身相信，這些東西扯來扯去我非就是造輪子，現階段我又不必一會兒去研究這些框架的底層實現，這些到後來隨着經驗的加深在深刻也來得及。既然不用看源碼了，哪它的使用就是看着文檔和前任的技術分享去造本身的輪子。固然了，缺少經驗的短處有些時候仍是會體現出來的，這個以後再說。就這樣，我帶着慢慢的自信跟面試官聊了一些跨平臺的方案，我相關的知識看的仍是比較多。

後來沒過多久，我接到了他們的offer，並給出了贊成的答案。等我過去以後面試官跟我聊，說他準備使用ionic3+angular4這套技術棧。實話講我對ionic的認識還停留在ionic1時代，angularjs的缺點對不少人都清楚。後來也據說過angular＋typescript開發的強大之處，知識沒有深刻去理解。既然技術主管決定使用這套技術棧，並且頗有自信的跟我講這套技術棧，說明我上次面試的表現仍是能夠的，他仍是確定了個人技術水平。他選擇這套我不熟悉的技術棧，還選擇了我說明他認爲我能快速學習並能投入到生產當中，這是對我學習能力的確定。一邊很高興，通常有些擔心，畢竟這套技術棧我並不熟悉，有不少未知，我也有些慌。

既然已經定了，就沒辦法了，要來一波挑戰了。因而，就開始了本身的cordova＋ionic3＋angular4+TypeScript的開發路線。如今，咱們的app意境開發上線了，並且問題幾乎沒有，速度很好，用戶體驗也很不錯。我本身對ionic3也有了一些研究，在這裏跟你們分享一下。

首先提醒你們，在選擇本技術棧以前要慎重考慮。由於ionic3跟ionic2基本特別像，但差異仍是有的。angular4和angular2就更不用講，最重要的是cordova plugin 這個不少以前的版本不能在新的ionic Cli中使用。所以遇到不少問題須要本身去折騰。國內幾乎沒有這套這技術棧的縣官中文文檔，須要道英文官網去查看相關文檔。

好了，到這裏咱們能夠開始咱們的第一個ionic3 App了。

第一步上個乾貨

http://ionicframework.com/docs/

這是ionic3官方文檔

https://github.com/nurdun/ionic3-App

這是我當時學習的時候寫的一個demo

 

第一步須要全局安裝ionic3

npm install -g cordova ionic

而後咱們就能夠開始咱們的ionic3 App了

ionic start myApp tabs

就這樣開始了咱們的第一個帶着底部選項卡的ionic3 App

等myApp項目建立完成以後，咱們能夠進入myApp目錄下

ionic serve

或者

ionic serve --lab

來在瀏覽器中啓動本項目。

添加平臺(platform)

在添加android或者ios相關的平臺到咱們的項目以前咱們得須要安裝咱們須要的相關平臺的開發環境的咱們的電腦。

安卓須要安裝android sdk ，下載並安裝完以後須要到系統環境變量中配置咱們的android sdk路徑到系統環境變量當中。如何添加android模擬器，能夠到百度或者Bing上去搜有不少相關的很好的答案。

ios須要下載並安裝xcode(固然ios平臺須要在mac環境下進行開發)，如何下載並安裝並如何添加ios模擬器能夠去搜索，有不少答案。

ionic cordova platform add android
ionic cordova platform add ios

刪掉平臺相關代碼　

ionic cordova platform remove android
ionic cordova platform remove ios

 

在模擬器中啓動項目

ionic cordova emulate android　　//android  
ionic cordova emulate ios //ios

一般在開發當中咱們須要用的時時刷新(livereload)

因此在模擬器中啓動項目的時候須要添加 --livereload 命令

ionic cordova emulate android --livereload
ionic cordova emulate ios --livereload

除此以外咱們在開發當中須要看到控制檯輸出(console.log之類的)

因此在模擬器中啓動項目的時候須要添加-c命令(--console)

結合--livereload 命令能夠把命令簡化成 -lc

ionic cordova emulate android -lc    //android
ionic cordova emulate ios -lc //ios

 

真機調試

ionic cordova run android
ionic cordova run ios

//livereload

ionic cordova run android --livereload
ionic cordova run ios --livereload

//livereload and console

ionic cordova run android -lc
ionic cordova run ios -lc

 

上面這些是ionic3建立第一個app和不一樣平臺上運行並看到效果的過程。

須要調用的UI組建能夠到ionic3官網上去看，並選擇本身喜歡的UI組建來使用。