Ionic 6低版本WebView（低于60）空白屏问题求助

问题根源 #

Ionic 6依赖的Angular 12+默认使用ES6+语法，版本低于60的WebView对这类语法支持不足，导致JavaScript执行失败，最终app-root标签无法渲染内容。以下是两种可行的修复方案：

方案一：集成Crosswalk WebView（Android专属） #

Crosswalk会将Chromium内核打包进APK，彻底摆脱系统WebView的限制：

• 安装兼容Ionic 6的Crosswalk插件：

  ionic cordova plugin add cordova-plugin-crosswalk-webview@2.4.0
  

• 在config.xml中添加配置，优化打包和兼容性：

  <preference name="xwalkVersion" value="23.53.589.4" /> <!-- 指定稳定内核版本 -->
  <preference name="xwalkMode" value="embedded" /> <!-- 嵌入私有内核，不依赖系统 -->
  <preference name="xwalkMultipleApk" value="true" /> <!-- 按CPU架构拆分APK，减小体积 -->
  

• 重新构建Android安装包：

  ionic cordova build android
  

方案二：强制使用Chrome内核WebView（Android专属） #

若不想增大APK体积，可强制优先调用设备上的Chrome WebView（需确保设备已安装Chrome浏览器）：

• 打开config.xml，添加以下配置：

  <preference name="AndroidXEnabled" value="true" /> <!-- 适配Ionic 6的AndroidX依赖 -->
  <preference name="WebViewEngine" value="org.chromium.android_webview" /> <!-- 指定Chrome内核WebView -->
  

• 若设备未安装Chrome，可在应用启动时检测并引导用户安装（需编写原生代码或使用cordova插件实现检测逻辑）。

额外优化：降级代码编译为ES5 #

配合上述WebView方案，将Angular代码编译为ES5，进一步提升兼容性：

• 打开angular.json，找到projects -> 你的项目名 -> architect -> build -> options，修改target为es5：

  "target": "es5"
  

• 重新编译项目后再构建APK。

内容的提问来源于stack exchange，提问作者Ali Mahmoodvand