Cordova Windows 10 UWP 应用程序中的黑屏

Posted

技术标签:

【中文标题】Cordova Windows 10 UWP 应用程序中的黑屏【英文标题】:Black screen in Cordova Windows 10 UWP app 【发布时间】:2018-07-06 15:19:51 【问题描述】:

我正在使用 Cordova 构建包含 Ext.js Web 应用程序的 UWP Windows 10 应用程序。

我可以使用 Cordova 和 cordova build windows 和 Sencha 的系统 sencha app build native 成功构建应用程序。这会在cordova\platforms\windows\AppPackages 中输出一个文件夹,其中包含一个.appx 文件,我可以在信任生成的密钥后安装该文件。

问题

安装完成后,如果选中“完成时运行”复选框,应用程序将加载,我会看到我们的登录屏幕。 如果我按右上角的 X 关闭应用程序,然后从开始菜单重新打开应用程序,我看到的只是黑屏(实际颜色为 #1d1f20)。如果我卸载该应用程序并重新安装,它将再次工作,但只有一次。任何后续关闭和重新打开都会导致黑屏。

如果我取消选中“完成后运行”复选框,然后手动打开应用程序,我也会看到黑屏。

显示黑屏时,如果我按 F12 打开开发者工具,然后按 Ctrl 和 R 重新加载,我会看到登录屏幕。没有控制台错误。

如果我在网络浏览器中从cordova\platforms\windows\www 打开 index.html 文件,我会看到登录屏幕。

我尝试将配置添加到与启动屏幕相关的 config.xml 中,但这对这种情况没有帮助。

重申一下,该应用运行一次(如果立即启动),但随后所有启动都只显示黑屏,除非我打开开发者工具并手动重新加载

在 Visual Studio 中

如果我在 Visual Studio 中打开解决方案并在本地计算机上“运行”,它可以工作并且我会看到登录屏幕。

如果我转到构建 > 部署解决方案,它将在我的系统上安装应用程序并运行它并且它可以工作。

这实际上会导致应用程序运行,即使在后续启动时也是如此!

如果我转到 Project > Store > Create App Packages 并创建一个应用程序包,我会遇到同样的黑屏问题(旁注,这会创建一个 .appxbundle 文件而不是 .appx 文件)。

我的系统详情:

Windows 10 x64 版本 1709 操作系统内部版本 16299.192 节点:6.10.3 npm: 5.6.0 科尔多瓦:8.0.0 Visual Studio:社区 2017 15.5.3 javascript UWP 项目系统:2.0 适用于通用 Windows 应用的 Visual Studio 工具:15.0.27130.2020 Ext.js 6.5.1

Cordova 配置文件

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.foo.foomobile" version="1.0.5" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>FooMobile</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Foo Services
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <preference name="windows-target-version" value="10.0" />
    <preference name="KeepRunning" value="true" />
    <engine name="android" spec="~6.2.3" />
    <engine name="windows" spec="^5.0.0" />
</widget>

任何帮助将不胜感激。

编辑

我使用全新的空白 Ext.js 6.5.3 应用程序尝试了 Cordova 构建,并且在首次启动工作和随后启动白屏时也遇到了同样的问题。

编辑 2

Here is a link to the sample app in question

【问题讨论】:

我无法在我这边重现您的问题,您是否测试过在其他设备上安装该软件包? 是的,我们已经在其他 Windows 10 设备上测试了可安装的 .appx 文件,并且存在同样的问题。它实际上也发生在一个空白的 Ext.js 应用程序中。难道是因为我用的是VS 2017? 你能分享一个简单的例子吗? ufile.io/vga91 这里是 Ext.js 6.5.3 应用程序。实际的 Windows UWP .appx 文件位于 cordova/platforms/windows/AppPackages 中。可以使用 cordova 目录中的 sencha app build nativecordova build windows 再次构建它。 从平台文件夹打开由cordova生成的原生WP解决方案,并尝试在物理设备上构建和调试它,并查看Visual Studio调试中的附加内容.. 【参考方案1】:

我与 Daniel Twigg 一起解决了这个问题。

问题出在 Sencha Ext JS 微加载器 (bootstrap.js) 中。出于某种原因,将文件动态加载到微加载器完成的页面中在 Windows 中存在问题 - 我有修复问题的“bootstrap.js”文件的修改版本 - 如果需要,请与我联系 - 或者我可以发布它这里

marc.gusmano@sencha.com

【讨论】:

【参考方案2】:

来自 Sencha 的 Marc 通过提供更新的 microloader 帮助我解决了这个问题。代码如下所示。

它使用不同的方式加载文件。

https://gist.github.com/djam90/79389bb82696b082b83da701e12373ef

另一种解决方案是通过修改 app.json 来完全禁用微加载器:

"production": 
    "output": 
        "microloader": 
            "enable": false
         
     

【讨论】:

以上是关于Cordova Windows 10 UWP 应用程序中的黑屏的主要内容,如果未能解决你的问题,请参考以下文章

如何在 UWP 应用(C# 或 WinJS)中获取 Windows 10 版本(例如 1809、1903、1909、...)?

自动启动 Windows 10 UWP 应用

修改 Windows 10 UWP 应用任务栏图标

UWP (Windows 10) 应用程序提交失败

在桌面上为 Windows 10 UWP 应用设置窗口大小

网易云音乐win10uwp版啥意思