使用ionic3開始自己的App開發之路

標籤：work   tps   公司   網上   結合   orm   mac   app   ionic   

由於這次換工作的原因，我的技術路線也有了一些變化。我原本比較喜歡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 androidionic cordova platform add ios

刪掉平台相關代碼　

ionic cordova platform remove androidionic cordova platform remove ios

 

在模擬器中啟動項目

ionic cordova platform add android   //android        ionic cordova platform add ios     //ios

通常在開發當中我們需要用的時時重新整理(livereload)

所以在模擬器中啟動項目的時候需要添加 --livereload 命令

ionic cordova emulate run android --livereloadionic cordova emulate run ios --livereload

除此之外我們在開發當中需要看到控制台輸出(console.log之類的)

所以在模擬器中啟動項目的時候需要添加-c命令(--console)

結合--livereload 命令可以把命令簡化成 -lc

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

 

真機調試

ionic cordova run androidionic cordova run ios//livereloadionic cordova run android --livereloadionic cordova run ios --livereload//livereload and consoleionic cordova run android -lcionic cordova run ios -lc

 

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

需要調用的UI組建可以到ionic3官網上去看，並選擇自己喜歡的UI組建來使用。

 

使用ionic3開始自己的App開發之路