Ionic4 cordova混合開發的開發除錯環境搭建
Ionic4混合開發首選應該是capacitor,但capacitor剛推出不久還不夠成熟,所以選擇使用傳統的cordova方式開發。基本上,Ionic native5和之前版本使用方式上變化不大,但cli有些選項上有些區別。
1.建立platform
新增android平臺
ionic cordova platform add android
刪除android平臺
ionic cordova platform remove android
2.編譯ionic專案原始檔到www目錄
只有在Android studio中執行除錯ionic專案才需要執行cordova的prepare命令,用於ionic原始碼被修改之後,更新Android studio中相應的原生專案。
ionic cordova prepare android
如果要編譯release版本,可以新增引數:
ionic cordova prepare android --release --prod
3.ionic模擬器或者真機除錯
以下命令在模擬器上執行app,最好在執行命令之前啟動模擬器。
ionic cordova emulate android -l
注意,原先3.x版本的--consolelogs引數在4.x版本已經不支援,至少在4.1版本不支援,也不知道以後是否會支援。因此,呼叫console.log等方法輸出到瀏覽器控制檯的資訊,無法通過ionic輸出到命令列。
要檢視console.log等方法輸出到瀏覽器控制檯的資訊,目前只能進入模擬器的Extended controls視窗的Bug report選項卡,然後在Bug report data下方視窗複製日誌資訊到記事本中,然後查詢"SystemWebChromeClient"或者"I chromium"定位console資訊。
這個方法比較麻煩,所以建議採用第4步的方法,使用Android studio除錯app。
連線真機執行除錯app的cli:ionic cordova run android -l
4.在Android studio中執行除錯ionic專案(真機或者模擬器除錯)
如果專案之前曾經使用ionic在模擬器和真機上除錯執行,Android studio匯入專案可能會失敗,此時需要用ionic cordova platform remove android刪除android平臺,然後再次使用ionic cordova platform add android新增。
執行Android studio,匯入專案platformsandroid,可能會提示配置gradle.wrapper,點選確定。配置過程中,可能會發生build失敗,提示gradle版本過高,可以點選自動修改配置。然後還可能出現android sdk版本缺失,可以按照提示下載安裝android sdk。
點選 Run/Edit configurations選單,點選+號,新增一個android app配置;在Gerenal選項卡的Module下拉框中選擇app,點選確定建立配置。然後可以執行或者除錯配置。
之後修改ionic原始碼,只需要重新執行第2步的ionic cordova prepare命令,就可以同步到android studio專案。
除錯之前,最好先把模擬器執行起來,執行模擬器之前最好wipe data。
在下方的Logcat視窗中,篩選框中輸入 I/chromium,可以檢視ionic專案中呼叫console.info/debug等方法輸出到瀏覽器console中的訊息。真機除錯時比較有用。