Ionic4 cordova混合开发的开发调试环境搭建

39次阅读

共计 1457 个字符,预计需要花费 4 分钟才能阅读完成。

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

正文完
 0