Skip to content

waitaction/cordova-plugin-ionic4-crosswalk-webview

 
 

Repository files navigation

前言

该插件的功能是在cordova ionic4项目中使用cordova-plugin-crosswalk-webview浏览器内核。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

目前只支持[email protected]或以下平台,高于[email protected]将出现启动空白情况

介绍

使用了cordova-plugin-crosswalk-webview作为 cordova 浏览器内核,cordova使用file:///协议访问app内置的html页面,但由于angular ionic4中无法兼容file:/// 协议。

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

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

安装

使用前需卸载cordova-plugin-ionic-webviewcordova-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

About

cordova ionic4项目中使用cordova-plugin-crosswalk-webview浏览器内核

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 62.3%
  • Objective-C 27.2%
  • JavaScript 10.5%