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中的消息。真機調試時比較有用。