因此在ionic4中，ionic官方提供了一个插件cordova-plugin-ionic-webview，将file:///协议替换成了http://协议，以兼容angular框架，但是该插件调用的android系统自带的浏览器，且无法同时兼容cordova-plugin-crosswalk-webview插件。

为了能在ionic4项目中同时使用cordova-plugin-crosswalk-webview,可以安装此插件。

安装

使用前需卸载cordova-plugin-ionic-webview与cordova-plugin-crosswalk-webview

cordova plugin remove cordova-plugin-crosswalk-webview
cordova plugin remove cordova-plugin-ionic-webview

安装插件

android sdk 24 以下，使用crosswalk webview浏览器内核; android sdk 24及以上，使用安卓系统内置的高版本浏览器内核。

cordova plugin add cordova-plugin-ionic4-crosswalk-webview --variable WEBVIEW_ENGINE=AUTO

始终使用CrosswalkWebView内核

cordova plugin add cordova-plugin-ionic4-crosswalk-webview --variable WEBVIEW_ENGINE=CROSSWALK

始终使用SystemWebView内核

cordova plugin add cordova-plugin-ionic4-crosswalk-webview --variable WEBVIEW_ENGINE=SYSTEM

如何使用

在你的cordova启动页面index.html中写以下脚本

<head>
  <script>
    // 在加载cordova.js之前调用
    if (window.location.href.indexOf("file:") == 0){
      window.location.href = "http://localhost";
    }
  </script>
</head>

切换内核

//在下次启动APP时使用CrosswalkWebView内核后
Ionic.WebView.useCrosswalkWebViewAtTheNextStartup();

//在下次启动APP时使用SystemkWebView内核
Ionic.WebView.useSystemWebViewAtTheNextStartup();

如何调试

由于crosswalk编译成了不同架构的apk，因此原来的命令ionic cordova run android --emulator不再适用，请改用以下命令调试apk

ng run app:ionic-cordova-build --platform=android && cordova run android --emulator

可以使用npm封装命令，在package.json中

{
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "debug": "ng run app:ionic-cordova-build --platform=android && cordova run android --emulator"
  }
}

使用npm命令调试

npm run debug

Demo

你可以参考示例 https://github.com/waitaction/cordova-plugin-ionic4-crosswalk-demo

Keywords

FAQs

What is cordova-plugin-ionic4-crosswalk-webview?

Is cordova-plugin-ionic4-crosswalk-webview popular?

Is cordova-plugin-ionic4-crosswalk-webview well maintained?

Package last updated on 21 Nov 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install