ionic+cordova+angular混合开发WKWebView 跨域适配方案

一、用UIWebView 替换WKWebView

方案一

修改config.xml文件

方案二

卸载 the Ionic WebView plugin

$ ionic cordova plugin remove cordova-plugin-ionic-webview --save
$ rm -rf platforms/
$ rm -rf plugins/
$ ionic cordova build ios

在打包执行运行的时候可能遇到一些问题

• 1. xcode运行后页面没反应

  可能是一些js没有加载完成如

  GET file:///runtime.js net::ERR_FILE_NOT_FOUND
  

  则需要修改index.html文件中的

• 2. ionic 中静态资源（图片）加载失败

css文件夹中的样式文件中如果要调用本地的图片的话,从该css文件所在的文件夹开始算。

例如www/css/style.css要加../,否则在浏览器中可以正常显示，在设备上不行。

结构如下所示：

.login-inner {
  background:url(../assets/login_banner.png)
}

如果是页面中定义的图片路径，从www路径开始算,否则浏览器中可显示，在设备上就显示空白, assets文件夹和index.html在一级,如：

二、用cordova提供的 cordova-plugin-advanced-http插件

参考文档: https://ionicframework.com/docs/v3/wkwebview/

首先需要安装插件

 $ ionic cordova plugin add cordova-plugin-advanced-http
 $ npm install @ionic-native/http

页面中使用

import { HTTP } from '@ionic-native/http/ngx';

constructor(private http: HTTP) {}

...

this.http.get('http://ionic.io', {}, {})
  .then(data => {

    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);

  })
  .catch(error => {

    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);

  });

问题

• 1. 页面导入插件后报错

core.js:1448 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[options]: 
  StaticInjectorError(Platform: core)[options]: 
    NullInjectorError: No provider for options!
Error: StaticInjectorError(AppModule)[options]: 
  StaticInjectorError(Platform: core)[options]: 

可能是没有添加 ==providers==

在app.module.ts中添加

   providers: [HTTP]