Cordova WKWebView白屏

Question

我正在尝试在我的 iPhone 上获取一个简单的 JavaScript 应用程序运行ning 在 Cordova 内部。 该项目在模拟器中运行良好，但在我的 phone 上运行显示奇怪的屏幕。

这是我的 config.xml 文件：

<widget 
  id="com.landonschropp.tictactoe" 
  version="1.0.0" 
  xmlns="http://www.w3.org/ns/widgets" 
  xmlns:cdv="http://cordova.apache.org/ns/1.0">

  <name>Tic-Tac-Toe</name>
  <description>An awesome little tic-tac-toe game.</description>
  <author email="schroppl@gmail.com" href="https://landonschropp.com">Landon Schropp</author>

  <content src="http://localhost:8080" />
  <access origin="*" />
  <allow-navigation href="http://localhost:8080/*" />

  <feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
  </feature>

  <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

  <plugin name="cordova-plugin-statusbar" spec="^2.2.3" />
  <plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
  <plugin 
    name="cordova-plugin-wkwebview-engine" 
    spec="git+https://github.com/driftyco/cordova-plugin-wkwebview-engine.git" />

  <engine name="ios" spec="^4.4.0" />
</widget>

和我的 package.json 文件：

{
  "name": "tic_tac_toe",
  "description": "A simple tic-tac-toe game",
  "dependencies": {
    "axios": "^0.16.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "cheerio": "^0.22.0",
    "cordova": "^7.0.0",
    "cordova-ios": "^4.4.0",
    "cordova-plugin-statusbar": "^2.2.3",
    "cordova-plugin-whitelist": "^1.3.2",
    "cordova-plugin-wkwebview-engine": "git+https://github.com/driftyco/cordova-plugin-wkwebview-engine.git",
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0",
    "gulp-file-cache": "^0.0.1",
    "gulp-sass": "^3.1.0",
    "gulp-sass-glob": "^1.0.8",
    "gulp-transform": "^1.1.0",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^4.3.11",
    "lodash": "^4.17.4",
    "phaser": "^2.6.2",
    "rollup": "^0.41.6",
    "rollup-plugin-babel": "^2.7.1",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-json": "^2.1.1",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-stream": "^1.19.0",
    "run-sequence": "^1.2.2",
    "vinyl-source-stream": "^1.1.0"
  },
  "devDependencies": {
    "babel-register": "^6.24.1",
    "chai": "^3.5.0",
    "del": "^2.2.2",
    "eslint": "^3.19.0",
    "mocha": "^3.2.0"
  },
  "cordova": {
    "platforms": [
      "ios"
    ],
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-wkwebview-engine": {},
      "cordova-plugin-statusbar": {}
    }
  }
}

要构建和运行应用程序，我执行以下操作：

yarn install
cordova platform add ios
cordova run ios

目前，当运行在我的 phone 上安装应用程序时，我看到以下屏幕：

Answer 1

正如 dymv 所提到的，问题很可能是您的应用程序无法访问本地主机，因为在此上下文中 "localhost" 是您的开发计算机，而不是 iPhone。您可以将其部署到托管服务器解决方案并重新测试吗？

WKWebView 插件不是本地服务器，而是增强的 WebView 组件（WebView 基本上是您的应用程序中的嵌入式浏览器，它运行您的 HTML、CSS、JavaScript 代码）。核心优势是它处理 JavaScript 更快（快得多！），因此您的应用程序将执行得更好。

Cordova WKWebView白屏

Cordova WKWebView white screen

iphone

cordova

cordova-plugins

wkwebview