Android WebView 中的 Sencha Touch 2 白屏答案

【问题标题】：Sencha Touch 2 White screen in Android WebViewAndroid WebView 中的 Sencha Touch 2 白屏
【发布时间】：2023-03-26 05:08:01
【问题描述】：

我正在将 JavaScript 应用程序从 Sencha Touch 1.x 迁移到 Sencha Touch 2.x。它被指定在原生 Android 应用程序内的 WebView 中运行。该应用程序在 Sencha Touch 1.x 上运行。同时进行了大量的重构和调试以使其在 Sencha Touch 2.x 上运行。当前使用的 Sencha Touch 版本是 2.4.2。

我在桌面版 Firefox 中做了一些测试。基本上成功了，但测试有限，因为 Sencha Touch 应用程序高度依赖原生 Android 应用程序通过 JS 接口提供的几个对象和方法。

现在，在 Android WebView 中运行它时，我遇到了一个奇怪的问题：启动和渲染后，我看到的只是白屏，而所有 MVC 依赖项都已加载，launch()在Ext.application 中被正确触发。控制台中完全没有 JavaScript 错误，所有 Ext 类/对象/方法都可用。

这是我的Ext.application 块的基本设置：

Ext.application({
    name: 'MyApp',
    models: [
        'TestModel',
        'UserModel',
        'HauptmenueModel',
        /* ... */
    ],
    controllers: [
        'MyController'
    ],
    views: [
        'Benutzer',
        'Startseite',
        /* ... */
    ],
    stores: [
        'TestStore',
        'UserStore',
        'HauptmenueStore',
        /* ... */
    ],
    launch: function () {
        Ext.Viewport.add(Ext.create('MyApp.view.Startseite'));

        console.log(document.body.innerHTML.length);
    }
});

视图（例如MyApp.view.Startseite 视图）的定义非常传统：

Ext.define('MyApp.view.Startseite', {
    extend: 'Ext.Panel',
    config: {
        id: 'Startseite',
        layout: 'card',
        items: [
            /* ... */
        ]
    },
    /* ... */
});

有趣的是：Sencha Touch 确实会根据我通过Ext.Viewport.add() 加载的视图生成大量 HTML 内容，我可以从我正在记录的innerHTML.length 推断出这些内容。但是 WebView 中没有显示任何内容。如果我创建一个不同的视图并通过Ext.Viewport.add() 加载它，尺寸会随之改变，但视口仍然是白色的。

这可能是什么原因？我也非常感谢有关调试此问题或以某种方式隔离此问题的任何提示。

【问题讨论】：

标签： android webview sencha-touch android-webview sencha-touch-2

【解决方案1】：

一个可能的原因可能是 WebView 的布局本身。请检查 WebView 的布局高度。将其设置为 MATCH_PARENT 应该可以完成这项工作。

建议将 WebView 布局高度设置为固定值或到 MATCH_PARENT 而不是使用 WRAP_CONTENT。

请参阅此处的布局大小部分： http://developer.android.com/reference/android/webkit/WebView.html

【讨论】：

非常感谢，它就像一个魅力！（我已将<WebView ...> 标记中的android:layout_height 参数设置为match_parent。）