node 10.15.0
ionic 4.12.0
cordova 9.0
# platforms
cordova-android：8.0.0
cordova-ios: 5.0.0
安装
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
]
