android - Android WebView 中的 Sencha Touch 2 白屏

Question

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

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

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

这是我的 Ext.application block 的基本设置:

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);
    }
});

View (例如 MyApp.view.Startseite View )的定义非常传统:

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

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

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

Answer 1

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

It is recommended to set the WebView layout height to a fixed value or to MATCH_PARENT instead of using WRAP_CONTENT.

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