Ionic2踩坑記錄(一)

首先爲了兼容對Ionic尚且不瞭解的人,允許我對ionic做一個介紹。

衆所周知,在當今主流的移動應用開發中,android和ios平臺採用的是完全不同的開發語言,android主流使用java和kotlin,而ios則主流OC和swift,因此在大多數移動應用開發中,不得不採用兩套完全不同的代碼來完成不同平臺的開發。

如何讓ios和android能夠兼容,這個問題已經困擾了很多IT開發的研究者,人們採用了各種插件去自動生成原生的代碼,但是效果依然不好,但是在衆多的方案中,有一個方案卻是非常有實現的價值的,因爲不管是android還是ios,它們都有瀏覽器,如果能把app做成網站的形式,那不就解決了兼容問題?

但是但凡手機應用,都希望儘可能的去調用手機的設備(藍牙、wifi、攝像頭等等),這是普通的web前端無法解決的問題,於是乎又有人想出來,將調用手機設備的代碼和界面顯示的代碼分開來,手機設備用原生的開發語言去調用,界面顯示用web前端的語言去完成,二者只要能相互調用即可,這種混合類的開發模式並不是在移動應用中第一次被提出的,其他語言如java的jni技術早就已經利用了不同語言的特性進行混合開發了。於是乎這種將界面代碼統一,僅僅開發不同平臺的設備調用接口的開發模式便成爲了移動應用的混合開發模式,曾經有一段時間,混合開發變得非常火爆,雖然這項技術出來已經很久了,但是由於早期的手機性能的原因,混合開發的卡頓現象顯得特別嚴重,但是隨着手機性能的不斷提升,混合開發也漸漸進入了主流開發的視野。

而混合開發中,將web前端代碼和原生代碼可以相互調用的插件有很多種,其中有一種叫做cordova的插件,他是從phonegap插件衍生出來的,其中的歷史背景我並不瞭解,但是利用cordova插件,確實可以滿足將前端代碼生成手機app,並且可以自己用原生代碼寫一些插件來加入app應用中達到相應功能。

時代總是不斷在進步的,隨着cordova的不斷髮展,人們開始思考如何把前端的框架和cordova進行整合,以達到更加簡單的開發效果,於是乎,就有這麼一個團隊,將angular和cordova整合在一起,並自己開發了一系列適用於手機的類庫,形成了ionic框架,所謂ionic,就是開發人員在框架的結構下編寫web前端代碼,並添加適量的自開發插件,利用ionic自帶的功能去生成app項目。

從上述文字看,ionic似乎是個很完美的東西啊,簡單高效,那爲什麼說踩坑呢?原因有很多:第一,ionic只是衆多混合開發框架中的一個,外加上混合開發本來就是比較新鮮進入主流的開發技術,因此網上資源非常少,學習成本相當高;第二,這個坑是angular遺留下的,做過angular開發的人應該都知道,angular1由於有着性能問題,因此angular2對angular1做出了極大的改版,雖然最基本的依賴注入和雙向綁定的思想沒有變化,但是其組件架構還是發生的翻天覆地的變化,而且開發語言也從原本的JavaScript變成了typescript,這樣一來angular1和angular2就好像是完全不相干的兩種語言。ionic基於angular做出開發,ionic1基於angular1,ionic2基於angular2,那麼理所當然的ionic1和ionic2自然有着完全不同的開發形式;第三,ionic的開發團隊非常喜歡最新版的東西,很多時候如果不把你的配套軟件升級到最新就可能出現各種各樣的問題。總而言之,ionic2的開發過程中踩坑是在所難免的,但是好在整個流程都咬着牙走了下來,下面就來看看我都踩過哪些神奇的坑吧。


1.安裝ionic2

這就是一件很好笑的事情了,且不說後面的開發,ionic的安裝就已經非常蛋疼了,首先ionic需要用npm安裝,npm是在node安裝的過程中附帶的,所以開發ionic需要先安裝node,而且建議安裝最新版,node官網:https://nodejs.org/zh-cn/

安裝完以後,運行npm -g install ionic

理論上是可行的,但是npm的源是國外的,不排除腦殘的情況,所以建議換源爲阿里鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

之後就運行cnpm -g install ionic即可。

當然還可能報出沒有JAVA_HOME的錯誤,這個就不說了,自己安裝配置java的環境去。

如果是mac或者linux系統,在運行npm -g install的時候可能要加上sudo,這個應該不用我說。

安裝完以後 運行命令:ionic -v看下版本是不是2以上的就行,都完成以後再去安裝cordova,同樣npm -g install cordova


2.生成項目

這個事情更蛋疼,爲什麼呢,這個命令行不僅僅ionic1和ionic2不一樣,而且ionic2好像也一直在變,在ionic1中好像運行:

ionic start <項目名稱> 

即可,但是在ionic2中,start的過程卻大致是這樣的:

ionic start <項目名稱> <appType> type=ionic2

其中項目名稱是你所需要創建項目的名稱(注意別傻逼的寫個中文名),appType是創建工程的類型,我一般創建的是tabs,其他還有blank什麼的,如果不確定,可以鍵入 ionic start --help來看下詳細的情況

但是即使這樣,也不一定可行,上文說過了,npm這個東西是時不時會抽風的,ionic start命令時候會自動運行npm,雖然你可能下載了cnpm,但是不能用來替換ionic中定死的命令,所以當遇到其nodemodule下載不下來的時候,大約有兩種方法:

1).將npm本身臨時換源成淘寶,鍵入以下命令後不要關閉命令行,馬上去執行ionic start

npm --registry https://registry.npm.taobao.org info underscore

2).雖然報錯,但是項目文件夾已經生成,只需要進入項目路徑,並運行cnpm install即可


3.打包生產app項目

這個問題更加老大難,而且android和ios還不太一樣,理論上如果是在mac機子上新建的項目,打包生產ios肯定沒問題,但是如果是生成android項目,或者在windows上新建的項目再導到mac上生成ios,都會遇到各種各樣的問題,我來大致盤算一下可能遇到問題的情況:

1)android項目,環境變量一定要配置好,不僅僅JAVA_HOME,連ANDROID_HOME、GRADLE_HOME也一樣要配置,建議下載一個Androidstudio,它會自動下載android SDK和gradle,只要把路徑配到環境變量即可。

2)生成過程中可能需要下載模板,如果報錯類似於install xxx error的均按照問題二中的解決方案(換源)

3)這個是我自己遇到的奇葩問題,windows建的項目移植到mac上去生成ios項目,結果在platform add ios的時候一直報錯,後來我知道了,這東西就是奇葩,最好能在打包生成前將尚未做過任何編譯的代碼在當前環境中使用ionic serve運行一遍,它會自動使用npm去安裝一系列需要的東西,只有東西不缺才能正常打包。

4)版本問題,這個儘可能所有版本最新吧。

5)打包完了以後運行在手機上時,尤其android,啓動界面相當長,也不是設置的時間問題,這時候需要在打包的時候加上--prod,如:

ionic cordova platform add android

ionic cordova build android --prod

當然如果需要簽名打包android,還需要加上release,這個具體自己百度ionic的簽名打包,不細講。


4.使用ionic組件

ionic的組件很多,而且不同於原本的web前端開發,它的組件很多都是封裝成適用於移動應用的,因此在開發的時候一定要對照官網,其實不僅僅是web前端的組件,包括調用設備的插件,主流的也儘可能使用官網上的,官網地址:https://ionicframework.com/docs/

在官網上查找想要的,當然如果因爲英文看不懂或者網上不去等問題,作爲四級沒過的我都在這兒笑看人生,你們自求多福吧。

但是這要說的不是這些問題,而是如何去看官網,ionic官網上說的往往是它封裝的內容,但是很多東西是不需要它進行封裝的,比如說類似於發送http請求,這些原本是前端就應該有的東西(當然貌似ionic也有調用原生的插件實現http),那麼問題來了,到底應該使用哪種方式去實現http請求呢?

如果是利用web前端方式去實現http,需要參照angular官網,而如果是用原生插件,參照ionic官網。而至於其中本質區別,我覺得在於前者需要處理跨域訪問,後者則不需要,對於跨域訪問問題不瞭解的轉入我的第一篇博客。

在http請求上可能還有的選擇,但是在模板渲染等問題上,顯然我們需要參照angular的官網,因爲模板渲染的實現本來就是ionic直接套用angular的。

如果硬要問遇到問題需要從哪參照,我個人總結了一個參照順序:

1)如果是界面顯示的功能,如彈窗啊跳轉啊之類的,參照ionic官網的COMPONENTS欄目

2)如果是網絡方面的功能,看協議內容,如果是web前端支持的協議,如http或webSocket則參照angular官網,否則如socket協議之類的就參照ionic官網提供的插件

3)如果調用手機設備(相機啊藍牙啊)或者調用手機自帶應用的(sqlLite啊)這種功能,參照官網提供插件,官網的NATIVE欄目

4)上述參照官網插件但凡沒有找到的,很遺憾,如果不想去各個論壇去瘋找一些不靠譜的,那就自己寫插件吧,不過這種可能性很小了。

5)如果是界面效果上的,需要自己審判這種效果是否是手機特色的,如果不是自己查閱css的教程,如果是則先查閱ionic官網,如果沒有找到。。。自己用css實現吧,這就得自求多福了。


5.使用第三方平臺

上面說的內容還都是一般的功能,但是我們在移動開發中不得不使用一些第三方平臺實現一些特殊的功能,比如手機支付啊之類的。但是第三方平臺很少或者根本不會提供混合開發的接口,那麼怎麼辦呢,第一是看第三方平臺的技術開發論壇是否有用ionic2實現的插件,如支付寶微信都是有的;第二,如果是一些比較小衆的第三方平臺,可能就需要自己去寫插件了,當然如果這些平臺有提供js接口的,且其js接口和移動應用接口的使用效果類似的,那可以試試使用。


以上是我初步總結的五個常見的坑的類型,由於是第一篇關於ionic2的,言論更帶有總結提綱的類型,沒有細緻到具體的問題,因爲我覺得每個人遇到的問題都不一樣,走過一個應用的流程很難說就遇到了大家經常遇到的問題了,所以就總結性發言了一下,在後面關於ionic的文章中我會比較具體的探探我遇到的問題和解決的方案。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章