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
]

你可能感兴趣的:(ionic4,cordova,ionic4,混合开发实战)