cordova-plugin-ionic-webview

cordova-plugin-ionic-webview

node 10.15.0
ionic 4.12.0
cordova 9.0
# platforms
cordova-android：8.0.0
cordova-ios: 5.0.0

欢迎访问我的专栏：
ionic4 混合开发实战-csdn
ionic4 混合开发实战-简书

安装

ionic cordova plugin add cordova-plugin-ionic-webview
npm install @ionic-native/ionic-webview

配置

config.xml

// 默认值： localhost
<preference name="Hostname" value="app" />
// Android Scheme 默认：http（没必要无需设置）
//<preference name="Scheme" value="https" />
// ios Scheme 默认：ionic（没必要无需设置）
//<preference name="iosScheme" value="httpsionic" />
// 修改后需要增加如下配置 ionic:// 默认被允许 无需额外操作
<allow-navigation href="http://app/*" />
<allow-navigation href="https://app/*" />
// 对应iosScheme 
//<allow-navigation href="httpsionic://*"/>

修改后的

iOS: ionic://app
Android: http://app

跨域问题

如果后端关闭了跨域，且并未对ionic://app、http://app开启允许跨域，如第三方API.

Android平台

• MIXED_CONTENT_ALWAYS_ALLOW 0
• MIXED_CONTENT_NEVER_ALLOW 1
• MIXED_CONTENT_COMPATIBILITY_MODE 2

<preference name="MixedContentMode" value="0" />

Android可通过如上设置来避免跨域问题。

iOS

iOS默认使用WKWebView,WKWebView禁止跨域.

方案一(不推荐)

使用旧的UIWebView替代
好处：改动小
坏处：性能较差，新特性无法使用，其他坑

方案二(不推荐)

使用插件cordova-plugin-advanced-http，所有请求通过此插件发送

方案三(推荐)

使用代理程序，app所有接口走代理

本地文件加载问题

import {WebView} from '@ionic-native/ionic-webview/ngx';
constructor(private webView: WebView) {}
this.webView.convertFileSrc(filePath);

别忘了在app.module.ts中声明

import {WebView} from '@ionic-native/ionic-webview/ngx';
providers: [
    WebView
]