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