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中的消息。真机调试时比较有用。