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

相关推荐