为什么Cordova ios Vue 组件在迁移到WKWebview 后只在重新加载应用程序时显示？

Question

我的应用程序的底部 div 按钮在第一次加载时不显示，但是当应用程序滑开并重新选择时显示。

应用首次加载时的控制台日志消息是：

    2021-02-01 10:55:11.982756+0000 SoundSleep[287:9375] Apache Cordova native platform version 5.1.1 
is starting.
2021-02-01 10:55:11.982849+0000 SoundSleep[287:9375] Multi-tasking -> Device: YES, App: YES
2021-02-01 10:55:12.341036+0000 SoundSleep[287:9375] WF: === Starting WebFilter logging for process 
SoundSleep
    2021-02-01 10:55:12.341149+0000 SoundSleep[287:9375] WF: _userSettingsForUser mobile: {
    filterBlacklist =     (
    );
    filterWhitelist =     (
    );
    restrictWeb = 1;
    useContentFilter = 0;
    useContentFilterOverrides = 0;
    whitelistEnabled = 0;
}
2021-02-01 10:55:12.341261+0000 SoundSleep[287:9375] WF: _WebFilterIsActive returning: NO
2021-02-01 10:55:12.392665+0000 SoundSleep[287:9375] WF: _userSettingsForUser mobile: {
    filterBlacklist =     (
    );
    filterWhitelist =     (
    );
    restrictWeb = 1;
    useContentFilter = 0;
    useContentFilterOverrides = 0;
    whitelistEnabled = 0;
}
2021-02-01 10:55:12.392716+0000 SoundSleep[287:9375] WF: _WebFilterIsActive returning: NO
2021-02-01 10:55:12.394914+0000 SoundSleep[287:9375] CDVWKWebViewEngine will reload WKWebView if 
required on resume
2021-02-01 10:55:12.394987+0000 SoundSleep[287:9375] Using WKWebView
2021-02-01 10:55:12.395228+0000 SoundSleep[287:9375] [CDVTimer][console] 0.052929ms
2021-02-01 10:55:12.395373+0000 SoundSleep[287:9375] [CDVTimer][handleopenurl] 0.057101ms
2021-02-01 10:55:12.396933+0000 SoundSleep[287:9375] [CDVTimer][intentandnavigationfilter] 1.510978ms
2021-02-01 10:55:12.397027+0000 SoundSleep[287:9375] [CDVTimer][gesturehandler] 0.038981ms
2021-02-01 10:55:12.402787+0000 SoundSleep[287:9375] [Crashlytics] Version 3.10.1 (129)
2021-02-01 10:55:12.413614+0000 SoundSleep[287:9375] [CDVTimer][fabricplugin] 16.546965ms
2021-02-01 10:55:12.415830+0000 SoundSleep[287:9375] [CDVTimer][file] 2.138019ms
2021-02-01 10:55:12.417003+0000 SoundSleep[287:9375] [CDVTimer][localnotification] 1.132011ms
2021-02-01 10:55:12.417043+0000 SoundSleep[287:9375] [CDVTimer][localnotification] 0.003934ms
2021-02-01 10:55:12.419718+0000 SoundSleep[287:9375] [CDVTimer][splashscreen] 2.645016ms
2021-02-01 10:55:12.420720+0000 SoundSleep[287:9375] [CDVTimer][statusbar] 0.934958ms
2021-02-01 10:55:12.420776+0000 SoundSleep[287:9375] CDVPlugin class WKWebViewXHRFix (pluginName: 
wkwebviewxhrfix) does not exist.
2021-02-01 10:55:12.420804+0000 SoundSleep[287:9375] [CDVTimer][wkwebviewxhrfix] 0.038981ms
2021-02-01 10:55:12.420856+0000 SoundSleep[287:9375] [CDVTimer][inappbrowser] 0.029087ms
2021-02-01 10:55:12.420889+0000 SoundSleep[287:9375] CDVPlugin class CDVUIInAppBrowser (pluginName: 
uiinappbrowser) does not exist.
2021-02-01 10:55:12.420912+0000 SoundSleep[287:9375] [CDVTimer][uiinappbrowser] 0.030041ms
2021-02-01 10:55:12.420965+0000 SoundSleep[287:9375] [CDVTimer][wkinappbrowser] 0.033021ms
2021-02-01 10:55:12.421067+0000 SoundSleep[287:9375] [CDVTimer][TotalPluginStartup] 25.961995ms
2021-02-01 10:55:12.747924+0000 SoundSleep[287:9375] IAB.close() called but it was already closed.

当应用重新加载并且 div 显示正常时，我看到添加了这些控制台日志消息：

2021-01-29 12:43:36.109629+0000 SoundSleep[488:66151] CDVWKWebViewEngine shouldReloadWebView::
2021-01-29 12:43:36.109695+0000 SoundSleep[488:66151] CDVWKWebViewEngine shouldReloadWebView title: snore.app
2021-01-29 12:43:36.109723+0000 SoundSleep[488:66151] CDVWKWebViewEngine shouldReloadWebView location: file:///private/var/containers/Bundle/Application/3FFF7BB5-2C15-4649-8997-94993B7E5677/SoundSleep.app/www/dist/index.html#/reports
2021-01-29 12:43:36.109747+0000 SoundSleep[488:66151] CDVWKWebViewEngine shouldReloadWebView reload: 0

我尝试将 cordova ios 平台从 4.5.5 升级到 5.1.1 并将 cordova inappbrowser 3.1.0 升级到 3.2.0 并添加了

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

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

至 config.xml 还加了补丁

cordova plugin add https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix.

我还尝试将 cordova ios 平台从 4.5.5 升级到 6.1.1，并将 cordova inappbrowser 3.1.0 升级到 4.1.0，但得到了相同的结果。

有好心人可以帮我解决这个问题吗？

Answer 1

找到解决方法：

添加到 main.scss 或您的 html 正文代码所在的任何位置：

html, body {
width: 100vw;
height: 100vh;
}

请参阅 apache/cordova-plugin-wkwebview-engine：问题 #108 和 https://forum.framework7.io/t/ios-wkwebview-blank-space-at-the-bottom/8530

为什么Cordova ios Vue 组件在迁移到WKWebview 后只在重新加载应用程序时显示？

Why does Cordova ios Vue component only display on reloading app after migrating to WKWebview?

ios

cordova

wkwebview