科尔多瓦WKWebView白屏

时间:2017-05-12 06:24:51

标签: iphone cordova cordova-plugins wkwebview

我试图让我的iPhone上的Cordova内部运行一个简单的JavaScript应用程序。 项目在模拟器内完美运行,但在手机上运行时显示奇怪的屏幕。

这是我的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": {}
    }
  }
}

要构建并运行应用程序,我会执行以下操作:

  1. yarn install
  2. cordova platform add ios
  3. cordova run ios
  4. 目前,在手机上运行应用时,我会看到以下屏幕:

    App on iPhone

1 个答案:

答案 0 :(得分:1)

正如dymv所提到的,问题很可能是你的应用无法访问localhost,因为&#34; localhost&#34;在这种情况下,你的开发计算机,而不是iPhone。您可以将其部署到托管服务器解决方案并重新测试吗?

WKWebView插件不是本地服务器,而是增强的WebView组件(WebView基本上是一个运行HTML,CSS,JavaScript代码的应用程序中的嵌入式浏览器)。核心好处是它可以更快地处理JavaScript(更快!),因此您的应用程序将表现更好。