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